map
遍历数组中每个元素并返回一个新数组，不改变原始数组，原始数组元素顺序依次处理元素。
示例：
1
2
3
4
5
6
7
8
9
10
| let arr = [1, 2, 3];
let newArr = arr.map((x, y, z) => {
console.log(x, y, z);
// 1 0 [1, 2, 3]
// 2 1 [1, 2, 3]
// 3 2 [1, 2, 3]
return Math.pow(x, 2);
})
console.log('----------');
console.log(newArr); // [1, 4, 9]
|
注意：map() 不会对空数组进行检测。
forEach
遍历数组中每个元素，并将元素传递给回调函数，但是没有返回值。
示例：
1
2
3
4
5
6
7
| let arr = [1, 2, 3];
arr.forEach((x, y, z) => {
console.log(x, y, z);
// 1 0 [1, 2, 3]
// 2 1 [1, 2, 3]
// 3 2 [1, 2, 3]
})
|
注意: forEach() 对于空数组是不会执行回调函数的。
filter
遍历数组中每个元素返回一个满足返回条件的新数组，起到一个过滤作用。
简单点说就是，新数组中的元素是通过检查指定数组中符合条件的所有元素，不符合条件的元素就会被过滤掉。
示例：
1
2
3
4
5
6
7
8
9
| let arr = [1, 2, 3];
let newArr = arr.filter((x, y, z) => {
console.log(x, y, z);
// 1 0 [1, 2, 3]
// 2 1 [1, 2, 3]
// 3 2 [1, 2, 3]
return x > 1;
})
console.log(newArr); // [2, 3]
|
注意：filter() 不会对空数组进行检测，也不会改变原始数组。
reduce
接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算出一个值。比如，我们计算【1+2+3+4+5=？】时可以用此方法。
示例：
1
2
3
4
5
6
7
8
| let arr = [1, 2, 3];
let total = arr.reduce((num , arg) => {
console.log(num, arg);
// 1 2
// 3 3
return num + arg;
})
console.log(total); // 6
|
注意: reduce() 对于空数组是不会执行回调函数的。
总结
map 和 filter 都是 immutable methods，也就是说它们只会返回一个新数组，而不会改变原来的那个数组。