JavaScript中reduce方法的用法及使用场景
作者：编程三昧
reduce()方法对数组中的每个元素按序执行一个提供的reducer函数,每一次运行 reducer会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值,今天我们就介绍一下reduce的几种简单使用场景,需要的朋友可以参考下
求数组的累计值
简单数组的累计值获取：
const arr = [12, 3, 7, 34, 6, 22, 15]; const total = arr.reduce((acc, cur) => acc + cur, 0); console.log(total); // 99
复杂数组的累计值获取：
const people = [
{ name: "Alice", age: 21 },
{ name: "Max", age: 20 },
{ name: "Jane", age: 20 }
];
const ages = people.reduce((acc, cur) => acc + cur.age, 0);
console.log(ages); // 61按属性对对象进行分组
假设有以下数组：
const people = [
{ name: "Alice", age: 21 },
{ name: "Max", age: 20 },
{ name: "Jane", age: 20 }
];现要求根据年龄值将上面的数组换换为对象，返回格式为 年龄值:obj。使用 reduce 的实现代码如下：
const ageGroups = people.reduce((acc, cur) => {
const age = cur.age;
if (!acc[age]) {
acc[age] = [];
}
acc[age].push(cur.name);
return acc;
}, {});
console.log(ageGroups);
// {
// 20: ["Max", "Jane"],
// 21: ["Alice"]
// }展开嵌套数组
我们可以利用 reduce 会累积的特性，逐层展开嵌套数组：
const arr = [
[0, 1],
[2, 3],
[4, 5, 6,7]
];
const flattenArr = arr.reduce((acc, cur) => acc.concat(cur), []);
console.log(flattenArr);
// [0, 1, 2, 3, 4, 5, 6, 7]到此这篇关于JavaScript中reduce方法的用法及使用场景的文章就介绍到这了,更多相关JavaScript reduce方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！