Array.reduce 算是比较高级的用法了。 本文用一些例子来介绍。
01 reduce 用法
Array.reduce(callback, initValue) 接受两个参数 callback 和 initValue 初始值。
其中 callback 会传入四个参数 callback (total, current, currentIndex, array), total 是当前累计的结果，current 是数组当前的值，currentIndex 是数组当前的 index, array 是整个数组对象。
数学功底好的同学看下面的例子就懂了，就是数学中的迭代。
迭代公式
那么 reduce 就是对数组遍历迭代，其中 callback 是迭代函数。
02 应用例子
reduce 应用范围非常广，只要是跟数据遍历有关，跟迭代有关的，都可以用 reduce 来实现。
我们从最简单的开始，
（1）求和
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const ret = data.reduce((sum, current) => {
return sum += current;
}, 0);
console.log(ret); // 55
（2）数组逆序
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const ret = data.reduce((arr, current) => {
arr.unshift(current);
return arr;
}, []);
console.log(ret);
（3）forEach 能干的事，map 能干的事，reduce 都能干
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const ret = data.map(item => {
return {
value: item
}
});
console.log(ret);
const ret2 = data.reduce((arr, current) => {
arr.push({
value: current
})
return arr;
}, []);
console.log(ret2);
附上结果，
（4）数组打平 flatten
const data = [[1,2,3], [4,5,6], [7,8,9]];
const ret = data.reduce((arr, current) => {
return arr.concat(current);
}, []);
console.log(ret); // 1,2,3,4,5,6,7,8,9
（5）filter 干的事，reduce 也可以干
例子，过滤掉负值 [3, 1, -2 ] -> [3, 1]
const data = [3, 1, -2];
const ret = data.reduce((arr, current) => {
if (current > 0) {
arr.push(current);
}
return arr;
}, []);
console.log(ret); // 3, 1
总之，几乎对数组的所有操作都是可以用 reduce 来处理，包括但不限于去重、数组转对象等等。
人有多大胆，地有多大产，无限可能属于你。
网友评论