Array.prototype.map()

map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的一个数组的长度与原始数组相同的新数组，它不会改变原来的数组。

const arr = [1, 2, 3];
const double = x => x * 2;
arr.map(double); // [2, 4, 6]
复制代码

Array.prototype.filter()

通过使用过滤函数创建新数组，仅保留返回true的元素，false则不保留。结果是一个等于或小于原始数组长度的数组，其中包含与原始数组相同元素的子集。

const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.filter(isOdd); // [1, 3]
复制代码

Array.prototype.find()

返回匹配器函数返回的第一个元素true。结果是原始数组中的单个元素。

const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.find(isOdd); // 1
复制代码

Array.prototype.reduce()

为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组

参数

callback （执行数组中每个值的函数，包含四个参数）

previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
currentValue （数组中当前被处理的元素）
index （当前元素在数组中的索引）
array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

解析 initialValue

const arr = [1, 2, 3, 4];
const sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
});
console.log(arr, sum);
/*
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10
*/
复制代码

上述代码中index是从1开始的，第一次的prev的值是数组的第一个值。数组长度是4，但是reduce函数循环3次。

const arr = [1, 2, 3, 4];
const sum = arr.reduce(function (prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}, 0); //注意这里设置了初始值
console.log(arr, sum);
/*
0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10
*/
复制代码

上述代码中index是从0开始的，第一次的prev的值是设置的初始值0，数组长度是4，reduce函数循环4次。

结论：如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

注：reduce提供初始值通常更安全，若无初始值切当前数组为空的时候，会报错。

const  arr = [];
const sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
});
//报错，"TypeError: Reduce of empty array with no initial value"
复制代码

reduce一般用法

const arr = [1, 2, 3];

const sum = (x, y) => x + y;
arr.reduce(sum, 0); // 6

const increment = (x, y) => [...x, x[x.length - 1] + y];
arr.reduce(increment, [0]); // [0, 1, 3, 6]
复制代码

reduce高级用法

计算数组中每个元素出现的次数

const names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"];
const nameNum = names.reduce((pre, cur) => {
     if (cur in pre) {
       pre[cur]++;
     } else {
       pre[cur] = 1;
     }
     return pre;
}, {}); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
复制代码

数组去重

const arr = [1, 2, 3, 4, 4, 1];
const newArr = arr.reduce((pre, cur) => {
     if (!pre.includes(cur)) {
       return pre.concat(cur);
     } else {
       return pre;
     }
}, []); // [1, 2, 3, 4]
复制代码

将二维数组转化为一维

const arr = [
     [0, 1],
     [2, 3],
     [4, 5],
];
const newArr = arr.reduce((pre, cur) => {
     return pre.concat(cur);
}, []); // [0, 1, 2, 3, 4, 5]
复制代码

将多维数组转化为一维

const arr = [
     [0, 1],
     [2, 3],
     [4, [5, 6, 7]],
];
const newArr = function (arr) {
     return arr.reduce(
       (pre, cur) => pre.concat(Array.isArray(cur) ? newArr(cur) : cur),
       []
     );
};
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
复制代码

对象里的属性求和

const result = [
     {
       subject: "math",
       score: 10,
     },
     {
       subject: "chinese",
       score: 20,
     },
     {
       subject: "english",
       score: 30,
     },
];

const sum = result.reduce(function (prev, cur) {
     return cur.score + prev;
}, 0); //60
复制代码

==================================