383 words
2 minutes
Array reduce 实战
什么是 reduce
Array 上的原型方法,它接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。
使用方法就是这样
arr.reduce(callback(previousValue, currentValue, currentIndex, sourceArray), [
initValue,
]);
- callback:reduce 得回调函数,接收四个参数:
- previousValue:累加器,即上一次回调返回的值,或者提供的初始值(initValue)
- currentValue:数组中当前正在被处理的值
- currentIndex: 数组中当前元素的索引(可选)
- sourceArray:reduce 的源数组(可选)
回调函数第一次执行时,previousValue 和 currentValue 的取值有两种情况:如果调用 reduce() 时提供了 initValue,previousValue 取值为 initValue,currentValue 取数组中的第一个值;如果没有提供 initValue,那么 previousValue 取数组中的第一个值,currentValue 取数组中的第二个值
initValue:作为第一次调用 callback 得第一个参数的初始值。(可选)
返回值 回调函数累计处理的结果
举几个例子
求和
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15
获取深层次对象
这个还挺实用,并且在一些面试还会问到
const obj = {
a: {
b: {
c: {
d: '1',
},
e: null,
},
},
};
function getValue(target, key) {
try {
return key.split('.').reduce((r, k) => r[k], target);
} catch (e) {
return undefined;
}
}
getValue(obj, 'a.b.c.d'); // 1
getValue(obj, 'a.b.e'); // null
getValue(obj, 'a.b.e.f'); // undefined
求元素出现的次数
const nameList = ['张三', '李四', '王五', '王五', '王五', '李四'];
const nameNum = nameList.reduce((pre, cur) => {
if (cur in pre) {
pre[cur]++;
} else {
pre[cur] = 1;
}
return pre;
}, {});