1. JS数组的概念
数组的字面意思就是一组数据,一组数据(一般情况下是相同类型的数据, 不一定都是数字)
2. 数组的作用
使用单独的变量名来存储一系列的值, 数组是特殊的变量,它可以同时保存一个以上的值。
如上节课中我们学过的arguments就是一个数组, 里面保存了多个参数.
数组的定义和使用
1.数组的定义
方式一:
new Array(参数,参数,...): 只有一个数字参数时是数组的长度(new可以省略,但一般尽量写上)
例如:
var arr = new Array(); //定义一个空数组
var arr = new Array(10); //创建一个包含 10 个元素的数组,没有赋值
var arr = new Array(“芙蓉姐姐”,30); //创建一个数组有两个元素
方式二:
var arr = [1,2,3,4,5]; //字面量定义方式
2.数组元素的获取(访问)
arr[0]: 表示数组的第一个元素,0是下标,也叫索引
arr[1]: 表示数组的第二个元素,1是下标
3.数组的赋值
给数组赋值,就是给数组的元素赋值,需要通过给数组的每个元素一一赋值,
如:arr[0] = 20; //让数组的第一个元素的值为20;
arr[1] = 12; //让数组的第二个元素的值为12;
以下为通过for循环给数组的每个元素赋值,赋成下标的平方。
for(var i=0;i<10;i++){
arr[i] = i*i;
}
4.数组的使用
使用数组就是在使用数组的每个元素,因为数组相当于若干个相同类型的变量。
遍历数组:
之前我们讲过通过下标获取单个数组元素, 但有时候我们需要批量使用数组, 这个时候我们需要遍历整个数组.
1, 普通for循环
for(var i=0; i<5; i++){
console.log(arr[i]);
}
2, for...in遍历: 用于遍历数组或者对象
for(var i in arr){
console.log(arr[i]);
}
3、数组的方法
1.concat() 用于连接两个或多个数组
注意:concat()该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
var arr=[1,2,3,4];
var arr1=[5,6];
console.log(arr.concat(arr1)) // [1,2,3,4,5,6]
//多个合并
var arr3=arr.concat(arr1,99,true,[]) //[1, 2, 3, 4, 5, 6, 99, true]
l
2.join() 根据指定分隔符将数组中的所有元素放入一个字符串,并返回这个字符串。
var arr = [1,2,3,4,5];
console.log(arr.join()); //1,2,3,4,5
console.log(arr.join("-")); //1-2-3-4-5
console.log(arr); //[1,2,3,4,5]---原数组未改变
l
3.slice(a,b) 截取原数组的元素
注意:a和b都可以为负数,负数时表示从最后一位开始算起,如-1表示最后一位。
var arr = [1,2,3,4,5];
console.log(arr.slice(1,3)); //[2,3]
console.log(arr.slice(-3,-1)); //[3,4]
l
4.splice() 向数组中添加,删除,或替换元素,然后返回被切割的部分。
var arr =[11,22,33,44,55];
console.log(arr.splice()); //[]
console.log(arr); //[11, 22, 33, 44, 55]
console.log(arr.splice(1)); //[22, 33, 44, 55]
console.log(arr); //[11]
var arr =[11,22,33,44,55];
console.log(arr.splice(2,2)); //[33, 44]
console.log(arr); //[11, 22, 55]
l
5.toString() 将数组转换成字符串.
注意:该方法会在数据发生隐式类型转换时被自动调用,如果手动调用,就是直接转为字符串。
var arr = [1,2,3,4,5];
console.log(arr.toString()); //1,2,3,4,5
console.log(arr); //[1,2,3,4,5]
l
6.indexOf(a,b) 查询数值在数组中出现的位置,
a为要查询的数据;b为开始查询的位置,
注意:如果不存在指定的数据,返回-1,indexOf()不会对数组产生改变。
var arr = [1,2,3,4,5,5,5,6,7,8,9];
console.log(arr.indexOf(5)); //4
console.log(arr.indexOf(5,7)); //-1 5的位置是4,5,6 ,所以参数位置7取不到5
l
7.lastIndexOf(a,b) 从后面往前面查询数值在数组中出现的位置,
a为要查询的数据;b为开始查询的位置,
注意:如果不存在指定的数据,返回-1,indexOf()不会对数组产生改变。
var arr = [1,2,3,4,5,5,5,6,7,8,9];
console.log(arr.lastIndexOf(5)); //6
console.log(arr.lastIndexOf(5,3)); //-1 5的位置是4,5,6,所以参数位置3取不到5
l
8.pop() 删除数组的最后一位
注意:pop()方法会返回被删除的元素,并改变原来数组
var arr=[1,2,3,4];
arr.pop();// 4会被删除
console.log(arr) // [1,2,3]
l
9.push() 往数组的最后一位添加新的多个成员,
注意:push()方法会返回新数组的长度,并改变原来数组
var arr=[1,2,3,4];
arr.push("这里是4.5",5); // 数组的长度会被增加到6
console.log(arr)// [1,2,3,4,"这里是4.5",5];
l
10.unshift() 往数组的地第一个位置添加多个成员,
注意:unshift()方法会返回新数组的长度,并改变原来数组
var arr=[1,2,3,4,5];
arr.unshift("11","22"); //长度会增加到7
console.log(arr) // ["11","22",1,2,3,4,5];
l
11.shift() 删除数组第一个位置的成员,
注意:shift()方法返回被删除的成员,并且会改变原来数组
var arr=[1,2,3,4,5];
arr.shift() // 1 被删除
console.log(arr) // [2,3,4,5]
l
12.sort() 它是根据ASCII码的码值,进行比较,如果成员十位数以上的,就不准备,就需要在 sort()里定义一个函数,改函数2个参数, a-b,升序,否则b-a 降序
但是在排序前,会先调用数组的toString方法,将每个元素都转成字符之后,再进行排序,此时会按照字符串的排序,逐位比较,进行排序。
var arr=[1,2,5,4,3,6];
arr.sort(function(a,b){
retrun a-b; //升序
//如果是b-a则会降序
})
var arr=[1,2,5,4,3,6];
console.log(arr.sort()); //[1,2,3,4,5,6]
console.log(arr); //[1,2,3,4,5,6]---原数组改变
l
13.reverses() 倒序排列数组
var arr=["1","3","2"];
arr.reverses() // ['2','3','1']
4.数组的高阶函数
什么是高阶函数?
1.把一个函数当做另一个函数
2.一个函数,内部返回另外一个函数
1.forEach(a,b,c) 用来遍历数组
注意:forEach()没有返回值,是ES5新增方法,不会修改原数组
a表示遍历到的数组的数据,b表示对应的索引,c表示数组自身。
var arr=[1,2,3,4];
//forEach 纯粹遍历
var res =arr.forEach(function (el,index,self) {
console.log(el,index,self)
})
//1-0-1,2,3,4 //el-index-aaa,其中aaa表示函数自身
//2-1-1,2,3,4
//3-2-1,2,3,4
//4-3-1,2,3,4
//undefined //undefined---forEach没有返回值
2.map(a,b,c) 也是做遍历,有返回值,返回新数组
注意:map的回调函数会将执行结果返回,并将执行结果组成新数组返回。
a表示遍历到的数组的数据,b表示对应的索引,c表示数组自身。
var arr =[11,22,33,44,55];
//返回一个新数组,请将每个元素放大10倍,得到一个新数组
var arr1=arr.map(function (el,index) {
return el*10;
})
console.log(arr1) //[110, 220, 330, 440, 550]
console.log(arr) //[11, 22, 33, 44, 55]
3.some(a,b,c) 判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。
a表示遍历到的数组的数据,b表示对应的索引,c表示数组自身。
注意:
1.some 如果有一个条件满足,就返回ture
2.some() 不会对空数组进行检测。
var arr = [11, 22, 33, 44, 55];
//el,每个成员
// index,每个成员下标
// aaa,原来的数组
var res = arr.some(function (el, index, self) {
return el == 33;
})
console.log(res)
4.every(a,b,c) 判断数组中每一项是否都满足条件,只有所有项都满足条件,才会返回true。
a表示遍历到的数组的数据,b表示对应的索引,c表示数组自身。
var arr =[11,22,33,44,55];
var res = arr.every(function (el, index, self) {
return el>33;
})
console.log(res) //false
5.filter(a,b,c) 过滤,返回一个过滤后的新数组
a表示遍历到的数组的数据,b表示对应的索引,c表示数组自身。
var arr =[11,22,33,44,55];
var newArr= arr.filter(function (el) {
return el>20
})
console.log(newArr) //22,33,44