之前学习使用了[].reduce()方法，觉得非常好用。也知道数组有很多方法，比如数组迭代遍历，可以实现的方式太多太多了。 而且有的又是返回新数组，而有的却是操作原数组，所以在此总结下。
本文注意：
- 如果使用ES6的箭头函数写法，函数内
this 永远指代函数上一级的环境上下文。
- 本文在 js 非严格模式下执行。严格模式下，部分的
this 为 undifined。
数组迭代
数组遍历方法均支持2个参数，第一个为迭代方法，第二个为 this 指向。不指定 this 的话，默认为 window 。
Array.prototype.forEach()
- 数组遍历
- 遍历每一个值
- 遍历迭代函数无返回值
- 无返回值
1
2
3
4
5
6
7
8
9
10
11
12
| var arr = ['aab', 'aac', 'aad', 'bbc', 'bbd'];
var result = arr.forEach(function(value, index, _this){
console.log(value, index, _this);
});
console.log(result);
|
Array.prototype.every()
- 数组遍历
- 至少遍历一个值
- 遍历迭代函数须有返回值
- 检查每一个值是否能通过函数，如果有一个不符合，则立刻停止遍历，返回
false，如果所有数值均符合，则返回 true
- 有返回值
1
2
3
4
5
6
7
8
9
10
11
12
13
| var arr = ['aab', 'aac', 'aad', 'bbc', 'bbd'];
var result = arr.every(function(value, index, _this){
console.log(value, index, _this);
return 'string' === typeof value;
},'for this');
console.log(result);
|
Array.prototype.some()
- 数组遍历
- 至少遍历一个值
- 遍历迭代函数须有返回值
- 检查每一个值是否能通过函数，如果有一个符合，则立刻停止遍历，返回
true，如果所有数值均不符合，则返回 false
- 有返回值
1
2
3
4
5
6
7
8
9
10
| var arr = ['aab', 'aac', 'aad', 'bbc', 'bbd'];
var result = arr.some(function(value, index, _this){
console.log(value, index, _this);
return 'string' === typeof value;
},'for this');
console.log(result);
|
Array.prototype.map()
- 数组遍历
- 遍历每一个值
- 遍历迭代函数须有返回值
- 遍历数组每一个值，并将迭代函数返回值放入新数组
- 有返回值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| var arr = ['aab', 'aac', 'aad', 'bbc', 'bbd'];
var result = arr.map(function(value, index, _this){
console.log(value, index, _this);
return value + value;
});
console.log(result);
console.log(arr);
|
Array.prototype.filter()
- 数组遍历
- 遍历每一个值
- 遍历迭代函数须有返回值
- 遍历数组每一个值，并根据迭代函数返回值放入新数组
- 有返回值
1
2
3
4
5
6
7
8
9
10
11
| var arr = [2, 4, 6, 8, 10];
var result = arr.filter(function(value, index, _this){
console.log(value, index, _this);
return value > 5;
});
console.log(result);
console.log(arr);
|
Array.prototype.reduce() / Array.prototype.reduceRight()
- 数组遍历
- 遍历每一个值
- 遍历迭代函数须有返回值
- 有返回值
这个我自己太熟了。真的熟的都不想写了~
最常见的应用就是数字叠加求和。
1
2
3
4
5
6
7
8
9
10
11
12
| var arr = [2, 5, 8, 9];
var result = arr.reduce(function(cur,next,index,_this){
console.log(cur, next, index, _this);
return cur + next;
},4);
console.log(result);
|
数组编辑
Array.prototype.unshift()
1
2
3
4
| var arr = ['aa', 'bb', 'cc', 'dd'];
var result = arr.unshift(11, 12);
console.log(arr, result);
|
Array.prototype.shift()
- 数组开头删除
- 有返回值（数组的第一个值）
- 改变原数组
1
2
3
4
| var arr = ['aa', 'bb', 'cc', 'dd'];
var result = arr.shift();
console.log(arr, result);
|
Array.prototype.push()
1
2
3
4
| var arr = ['aa', 'bb', 'cc', 'dd'];
var result = arr.push(21, 22);
console.log(arr, result);
|
Array.prototype.pop()
- 数组结尾删除
- 有返回值（数组的最后一个值）
- 改变原数组
1
2
3
4
| var arr = ['aa', 'bb', 'cc', 'dd'];
var result = arr.pop();
console.log(arr, result);
|
Array.prototype.concat()
1
2
3
4
5
6
7
8
9
| var arr1 = [1, 2, 3];
var arr2 = ['a','b',['c1','c2']];
var result = arr1.concat(arr2);
console.log(result);
console.log(arr1);
console.log(arr2);
|
Array.prototype.fill()
1
2
3
4
5
6
| var arr = [1, 2, 3]
var result = arr.fill('a', 1, 2);
console.log(result);
console.log(arr);
|
Array.prototype.splice()
1
2
3
4
5
6
7
8
9
| var arr = ['aab', 'aac', 'aad', 'bbc', 'bbd'];
var result = arr.splice(2, 1);
console.log(arr, result);
var result2 = arr.splice(2, 0, 'test', 'test2');
console.log(arr, result2);
|
Array.prototype.slice()
1
2
3
4
| var arr = ['aab', 'aac', 'aad', 'bbc', 'bbd'];
var result = arr.slice(2, 4);
console.log(arr, result);
|
我觉得最常见的用法是用于数组复制，或者在函数内将 arguments 转为数组：
1
2
3
4
5
6
7
8
9
| var arr = [1,2,3,4];
var copies = arr.slice(0);
console.log(copies);
var fn = function(){
var args = [].slice.call(arguments,0);
console.log(args);
}
fn(1,2,3,4);
|
数组查找定位元素
Array.prototype.find()
- 查找符合要求的第一个元素值
- 传入查找函数
- 支持传入this指向
1
2
3
4
5
6
| var arr = [3, 9, 12, 18];
var result = arr.find((v) => {
return v > 10;
});
console.log(result);
|
Array.prototype.findIndex()
- 查找符合要求的第一个元素的索引值
- 传入查找函数
- 支持传入this指向
1
2
3
4
5
6
| var arr = [3, 9, 12, 18];
var result = arr.findIndex((v) => {
return v > 10;
});
console.log(result);
|
Array.prototype.includes()
1
2
3
4
| var arr = [3, 9, 12, 18, 22, 35];
var result = arr.includes(12, 4);
console.log(result);
|
Array.prototype.indexOf() / Array.prototype.lastIndexOf()
1
2
3
4
| var arr = [3, 9, 12, 18, 22, 35];
var result = arr.indexOf(12, 1);
console.log(result);
|
数组排序
Array.prototype.sort()
- 正向排序
- 支持传入排序函数
- 排序函数必须有返回值
- 修改原数组
- 有返回值，为排序后结果
1
2
3
4
5
6
7
8
| var arr = [{name:'jason',value:1},{name:'john',value:0}]
var result = arr.sort(function(a, b){
return a.value - b.value;
});
console.log(result);
console.log(arr);
|
Array.prototype.reverse()
- 反向排序
- 不支持传函数
- 直接修改数组
- 有返回值（修改后的数组）
其他
Array.prototype.join()
1
2
3
4
| var arr = ['aa', 'bb', 'cc'];
var result = arr.join('-');
console.log(result);
|
Array.prototype.keys() / Array.prototype.values() / Array.prototype.entries()
- 获取数组key / value
- 有返回值（迭代器）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| var arr = ['aab', 'aac', 'aad', 'bbc', 'bbd'];
var keys = arr.keys();
for (let k of keys){
console.log(k);
}
var entries = arr.entries();
for (let k of entries){
console.log(k);
}
|
小结
| 类型 |
方法 |
无返回 |
返回非数组结果 |
返回新数组 |
操作原数组 |
备注 |
| 迭代 |
forEach |
O |
|
|
|
|
| 迭代 |
every |
|
O |
|
|
|
| 迭代 |
some |
|
O |
|
|
|
| 迭代 |
map |
|
|
O |
|
|
| 迭代 |
filter |
|
|
O |
|
|
| 迭代 |
reduce |
|
O |
|
|
|
| 迭代 |
reduceRight |
|
O |
|
|
|
| 编辑 |
unshift |
|
O |
|
O |
修改原数组，返回长度 |
| 编辑 |
shift |
|
O |
|
O |
修改原数组，返回其中一个值 |
| 编辑 |
push |
|
O |
|
O |
修改原数组，返回长度 |
| 编辑 |
pop |
|
O |
|
O |
修改原数组，返回其中一个值 |
| 编辑 |
concat |
|
|
O |
|
|
| 编辑 |
fill |
|
|
O |
O |
修改原数组，并返回该数组 |
| 编辑 |
splice |
|
|
O |
O |
原数组被修剪，返回修剪内容 |
| 编辑 |
slice |
|
|
O |
|
|
| 查找 |
find
findIndex
includes
lastIndexOf |
|
O |
|
|
|
| 排序 |
sort |
|
|
|
O |
|
| 排序 |
reverse |
|
|
|
O |
|