建议学习时长： 60分钟
学习方式：深入
学习目标
- 知道什么数组
- 了解数组有哪些常用方法。
详细介绍
数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。如
var arr = ['a', 'b', 'c']
上面代码中的a、b、c就构成一个数组，两端的方括号是数组的标志。a是0号位置(arr[0] 的值即为a)，b是1号位置，c是2号位置。
常用方法
创建数组
var arr = [];
var arr1 = [1,2,3];
常用方法
修改数组
- array.pop - 删除数组最后一位元素。
var arr = [1, 2, 3];
arr.pop();// 返回 3
arr;// [1,2]
- array.shift - 删除数组第一位元素。
var arr = [1, 2, 3];
arr.shift();// 返回 1
arr;// [2,3]
- array.push - 往数组的末尾新增一个或多个元素。
var arr = [];
arr.push(1);// 返回数组长度 1
arr;// [1]
arr.push(2,3);
arr;// [1,2,3]
- array.unshift - 往数组的开头新增一个或多个元素。
var arr = [1, 2, 3];
arr.unshift(0);
arr.unshift(-1, -2);
arr;// [-1, -2, 0, 1, 2]
- array.reverse - 把数组元素顺序逆转。
var arr = [1, 2, 3];
arr.reverse();// [3, 2, 1]
arr;// [3, 2, 1]
- array.sort - 数组排序。
var arr = [1 ,-1, 2];
arr.sort();// [-1, 1, 2]
arr;// [-1, 1, 2]
arr = [{
age: 10,
},{
age: 1
}, {
age: 12
}];
// 按照 age 从小到大排序
arr.sort(function(a, b){
return a.age - b.age > 0 ? 1 : -1;
});
- array.splice - 给数组添加或者删除元素。
// splice(开始下标, 删除个数，插入元素(可以多个)）
var arr = [1, 2, 3, 4];
arr.splice(1, 2);// [2,3]
arr;// [1,4]
arr = [1, 2, 3, 4];
arr.splice(1, 2, 'a', 'b', 'c');// [2,3]
arr;// [1, "a", "b", "c", 4]
注意：当数组执行上面的这些方法时，都会修改原数组。
迭代方法
- array.forEach - 遍历数组。
['a' ,'b' ,'c'].forEach(function(each, index){
console.log(each,index);
});
// 输出 'a' 0 'b' 1 'c' 2
- array.filter - 从数组中找出所有符合指定条件的元素。
// 找出所有正数
var res = [3, 4, -1].filter(function(each){
return each > 0;
});
res; //[3,4]
- array.every - 数组中是否每个元素都满足指定的条件。
// 是否都为正数
var isAllPositive = [3, 4, -1].every(function(each){
return each > 0;
});
isAllPositive; // false;
isAllPositive = [3, 4].every(function(each){
return each > 0;
});
isAllPositive; // true;
- array.some - 数组中是否有元素满足指定的条件。
// 是否有正数
var isSomePositive = [3, 4, -1].some(function(each){
return each > 0;
});
isSomePositive; // true;
isSomePositive = [-3, -4].every(function(each){
return each > 0;
});
isSomePositive; // false;
- array.map - 将数组映射成另一个数组。
// 内容 * 2
[1, 2, 3].map(function(each){
return each * 2;
});
// 返回 [2, 4, 6]
- array.reduce - 将数组合成一个值。
// 数组内容求和。0 为初始值
[1, 2, 3].reduce(function(prev, each){
return prev + each;
}, 0);
// 返回 6
当要使用迭代方法时，forEach 应该是最后被考虑的。主要原因是：forEach 与其他迭代方法比，语义性是最差的。更详细的说明见 avoid forEach。
** 注意 IE8 及以下版本不支持 every, some, map, reduce。如果想在 IE 8 及以下版本用这几个方法，可以用 es5-shim 或 lodash。**
其他方法
- Array.isArray - 是否是数组。IE9+ 支持该方法。
Array.isArray(3); // false
Array.isArray({}); // false
Array.isArray([]); // true
- array.concat - 合并数组或合并数组的值。
[1,2,3].concat(4,5); // 输出 [1, 2, 3, 4, 5]
- array.join - 合并数组所有元素拼接成字符串。
[1,2,3].join(); // 输出 '1,2,3'
[1,2,3].join('@'); // 输出 '1@2@3'
- array.slice - 选择数组中的一部分元素。
// slice(开始下标, 结束下标（可选，默认为数组长度）)
['a', 'b', 'c', 'd'].slice(1);// ["b", "c", "d"]
['a', 'b', 'c', 'd'].slice(1, 2);// ["b"]
['a', 'b', 'c', 'd'].slice(1, 3);// ["b", "c"]
- array.indexOf - 查找数组中指定元素的下标。
['a', 'b', 'c', 'd'].indexOf('c'); // 2
['a', 'b', 'c', 'd'].indexOf('g'); // -1
- array.lastIndexOf - 查找数组中指定元素的下标。查找方向为从后往前。
['c', 'd', 'c'].lastIndexOf('c'); // 2
['a', 'b', 'c', 'd'].lastIndexOf('g'); // -1
