1.如何声明数组
与java类似分为静态初始化和动态初始化。 例如:
<script>
let arr1 = [1,2,3,4,5]; //静态初始化
let arr2 = new Array(1,2,3,4,5); //动态初始化
console.log(arr1);
console.log(arr2);
</script>
要取得Array的长度,直接访问length属性:arr.length 请注意,直接给Array的length赋一个新的值会导致Array大小的变化,如果通过索引赋值时,索引超过了范围,同样会引起Array大小的变化。
例如:
<script>
let arr1 = [1,2,3,4,5]; //静态初始化
let arr2 = new Array(1,2,3,4,5); //动态初始化
//修改某个元素值
arr1[4]=100;
//修改数组长度,引起数组大小变化
arr1.length = 10;
console.log(arr1);
//下标超出范围,引起数组大小变化
arr2[9] = 10;
console.log(arr2);
</script>
运行结果:

2.ES6新增数组声明方式
ES5使用中使用new Array创建数组存在以下歧义性。
let arr1 = new Array(5); //只有一个参数,表示声明一个长度为5的数组,元素都是undefined
let arr2 = new Array(1,2,3,4,5); //声明一个长度为5的数组,元素值为[1,2,3,4,5]
for(let i=0;i<arr1.length;i++){
console.log(arr1[i]);
}
for(let i=0;i<arr2.length;i++){
console.log(arr2[i]);
}
ES6推荐使用Array.of或者Array.from
let arr1 = Array.of(5); //只有一个参数也表示声明一个长度为1的数组,元素都是5
let arr2 = Array.of(1,2,3,4,5); //声明一个长度为5的数组,元素值为[1,2,3,4,5]
let arr3 = Array.from([1,2,3,4,5]);////声明一个长度为5的数组,元素值为[1,2,3,4,5]
//把对象转换为数组
let arr4 = Array.from({
0: 'zhangsan',
1: 20,
2: 'male',
length:3
})
for(let i=0;i<arr1.length;i++){
console.log(arr1[i]);
}
for(let i=0;i<arr2.length;i++){
console.log(arr2[i]);
}
for(let i=0;i<arr3.length;i++){
console.log(arr3[i]);
}
console.log(arr4);
3.数组的遍历
数组有五种遍历方式: - for循环 - forEach循环 - for in - for of - map
例如:
<script>
let stus = ['张三','李四','王五','赵六'];
//1.for循环
for(let i=0;i<stus.length;i++){
console.log(stus[i]);
}
//2.forEach
stus.forEach(function(e,i){
console.log("第"+i+"个元素是:"+e);
})
//或者使用箭头函数,精简写法
stus.forEach((e,i)=>{
console.log("第"+i+"个元素是:"+e);
})
//3.for in
for(let index in stus){
console.log(stus[index]);
}
//4.for of
for(let value of stus){
console.log(value);
}
//5. map
stus.map((v,index)=>{
console.log(v);
//return;
})
</script>
运行结果:
张三
李四
王五
赵六
第0个元素是:张三
第1个元素是:李四
第2个元素是:王五
第3个元素是:赵六
第0个元素是:张三
第1个元素是:李四
第2个元素是:王五
第3个元素是:赵六
张三
李四
王五
赵六
张三
李四
王五
赵六
张三
李四
王五
赵六
4.数组的CRUD
常用方法: |方法|说明| |-|-| |shift()|该函数从从数组中删除第一项,并返回该删除项。| |unshift()|该函数向数组的开头添加一个或更多元素,并返回新的长度。| |pop()|该函数从数组中删除最后项,并返回该删除项。| |push()|该函数向数组尾部添加新元素,返回新长度。|
<script>
var stus = ['张三','李四','王五','赵六'];
//1.遍历
stus.forEach(function(e,i){
console.log("第"+(i+1)+"个学生是:"+e);
})
//2.添加新学生
stus.push('张飞');
console.log("----------添加新同学之后--------------");
stus.forEach(function(e,i){
console.log("第"+(i+1)+"个学生是:"+e);
})
//3.查询所有姓‘张’的学生
console.log("----------查询姓张的同学--------------");
stus.forEach(function(e,i){
if(e.startsWith('张')){
console.log("第"+(i+1)+"个学生是:"+e);
}
})
//4.把赵六改为赵云
console.log("----------把赵六改为赵云--------------");
/* 注意:forEach是只读的。
stus.forEach(function(e,i){
if(e=='赵六'){
e = '赵云';
return;
}
});*/
for(var i=0;i<stus.length;i++){
if(stus[i]=='赵六'){
stus[i]='赵云';
break;
}
}
stus.forEach(function(e,i){
console.log("第"+(i+1)+"个学生是:"+e);
})
//5.删除王五。
//先找到王五的下标。
var pos = stus.indexOf('王五');
stus.splice(pos,1);
console.log('---------删除王五之后-----------');
stus.forEach(function(e,i){
console.log("第"+(i+1)+"个学生是:"+e);
})
</script>
运行结果:

5.数组的排序
javascript内置的sort函数是多种排序算法的集合,数组在原数组上进行排序。JavaScrip对象数组排序,其实用的就是原生的sort()方法,用于对数组的元素进行排序。 例如:
<script>
var numbers = [12,45,67,8,10,22,11,35,78,43];
console.log("-------------排序之前---------------");
numbers.forEach(function(e,i){
console.log(e);
})
numbers.sort();
console.log("--------------排序之后--------------");
numbers.forEach(function(e,i){
console.log(e);
})
</script>
运行结果:

我们发现默认的排序算法是按照字符的ASCII码排序,并不是按照数值大小排序,我们需要自定义排序算法。
改写如下:
<script>
//自定义排序算法
function mySort(x,y){
return x-y;
}
var numbers = [12,45,67,8,10,22,11,35,78,43];
console.log("-------------排序之前---------------");
numbers.forEach(function(e,i){
console.log(e);
})
numbers.sort(mySort); //使用自定义排序算法
console.log("--------------排序之后--------------");
numbers.forEach(function(e,i){
console.log(e);
})
</script>
运行结果:

6.splice与slice的区别
splice和slice是数组里的两个重要的方法,其splice和slice的区别为:
splice改变原数组,除了可以删除之外,还可以插入。
let citys = ['北京','上海','广州','深圳','成都','武汉','西安'];
//1.splice会改变原数组,他通过删除或者替换现有元素或者原地添加新的元素来修改数组,并且以数组形式返回被修改的内容。有三个参数
citys.splice(2,1); //删除广州
console.log(citys);
citys.splice(3,1,'佛山','东莞');//删除成都后,插入'佛山'和'东莞'
console.log(citys);
运行结果:
(6) ['北京', '上海', '深圳', '成都', '武汉', '西安']
(7) ['北京', '上海', '深圳', '佛山', '东莞', '武汉', '西安']
slice返回由start和end决定的一个浅拷贝的新数组,原数组不会改变。
let citys = ['北京','上海','广州','深圳','成都','武汉','西安'];
let arr = citys.slice(0,3);
console.log(arr);
arr = citys.slice(-3);
console.log(arr);
运行结果:
(3) ['北京', '上海', '广州']
(3) ['成都', '武汉', '西安']
(7) ['北京', '上海', '广州', '深圳', '成都', '武汉', '西安']
7.查找元素的四种方式
let students = ["张三","李四","王五","赵六","孙七","吴用","刘备","李白","赵六"];
let target = "赵六";
//1.使用indexOf 返回第一个元素的下标
let pos = -1
if((pos = (students.indexOf(target))) !==-1){
console.log("获得下标是:"+pos);
console.log("找到元素:"+target);
}
//2.使用includes返回布尔
if(students.includes(target)){
console.log("找到元素:"+target);
}
//3.使用find,返回元素
let obj = students.find((value,index)=>{
return value === target
})
//console.log(obj);
if(obj!== undefined){
console.log("找到元素:"+target);
}
//4.使用some,返回布尔
let flag = students.some((value,index)=>{
return value === target;
})
if(flag){
console.log("找到元素:"+target)
}
运行结果:
获得下标是:3
找到元素:赵六
找到元素:赵六
找到元素:赵六
找到元素:赵六