概念
数组的一个方法,使用reduce可以针对数组处理很多比较复杂、抽象的操作,更简化逻辑,一步到位。
语法
- array.reduce(function(accumulator, currentValue, currentIndex, array), initialValue);
- 1.accumulator 必需。初始值, 或者计算结束后的返回值。
- 2.currentValue 必需。当前元素
- 3.currentIndex 可选。当前元素的索引
- 4.array可选。当前元素所属的数组对象。
- 5.initialValue 可选。传递给函数的初始值
- 注意:
- 1.对于空数组不会执行回调函数
用法如下:
1. 累加器
let numbers = [1, 2, 0, 0];
const getSum = (total, num) => {
return total + num;
};
let sum = numbers.reduce(getSum);
console.log(sum); // 3
2. 计算元素出现的次数
let arr = ['liming', 'liming', 'xiaohong'];
let reData = arr.reduce((pre, cur) => {
if (cur in pre) {
pre[cur]++;
} else {
pre[cur] = 1;
}
return pre;
}, {});
console.log(reData); //=>{liming:2,xiaohong:1}
3. 高阶函数(函数的compose)
把f3(f2(f1(6))) 改成chained([f1, f2, f3])(6)
const f1 = (x) => {
return x * 2;
};
const f2 = (x) => {
return x + 4;
};
const f3 = (x) => {
return x - 4;
};
//这样是可以实现,但是代码看起来有点笨重,所以可以使用reduce来优化一下
console.log(f3(f2(f1(6))));
const chained = (arr) => {
return (num) => {
return arr.reduce((pre, fn) => {
return fn(pre);
}, num);
};
};
// chained返回一个函数,接收一个参数,内部计算得到的值依次传递
console.log(chained([f1, f2, f3])(6)); // 从左到右依次处理,f1接收参数6处理后得到的值传递给f2,接着得到的值传给f3
4. 合并多维数组
let arr_ex = [
[0, 1],
[2, 3],
[4, 5]
];
let arr_merge = arr_ex.reduce(function (pre, cur) {
return pre.concat(cur);
}, []);
console.log(arr_merge); // [0,1,2,3,4,5]
5. 数组对象分组
let people = [
{name: 'Alice', age: 21},
{name: 'Max', age: 20},
{name: 'Jane', age: 20}
];
function groupBy(objectArray, property) {
return objectArray.reduce(function (acc, obj) {
let key = obj[property];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
}
let groupedPeople = groupBy(people, 'age');
console.log(groupedPeople); //{
// 20: [
// { name: 'Max', age: 20 },
// { name: 'Jane', age: 20 }
// ],
// 21: [{ name: 'Alice', age: 21 }]
// }
6. 数组去重
let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
let myOrderedArray = myArray.reduce(function (accumulator, currentValue) {
if (accumulator.indexOf(currentValue) === -1) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
console.log(myOrderedArray); //[a,b,c,e,d]
目前经常用到的就是上述几种,如果多个异步操作彼此依赖结果数据,链式调用,也是可以使用reduce进行处理的。