reduce 方法的简单使用

reduce() 方法对数组中的每个元素按序执行一个提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

今天我们就介绍一下 reduce 的几种简单使用场景。

求数组的累计值

简单数组的累计值获取:

javascript 复制代码
const arr = [12, 3, 7, 34, 6, 22, 15];
const total = arr.reduce((acc, cur) => acc + cur, 0);
console.log(total); // 99

复杂数组的累计值获取:

javascript 复制代码
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

按属性对对象进行分组

假设有以下数组:

javascript 复制代码
const people = [
    { name: "Alice", age: 21 },
    { name: "Max", age: 20 },
    { name: "Jane", age: 20 }
];

现要求根据年龄值将上面的数组换换为对象,返回格式为 年龄值:obj。使用 reduce 的实现代码如下:

javascript 复制代码
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 会累积的特性,逐层展开嵌套数组:

javascript 复制代码
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]
相关推荐
伍哥的传说20 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日4567020 小时前
学习日记-HTML-day51-9.9
前端·学习·html
狗头大军之江苏分军20 小时前
iPhone 17 vs iPhone 17 Pro:到底差在哪?买前别被忽悠了
前端
小林coding20 小时前
再也不怕面试了!程序员 AI 面试练习神器终于上线了
前端·后端·面试
文心快码BaiduComate21 小时前
WAVE SUMMIT深度学习开发者大会2025举行 文心大模型X1.1发布
前端·后端·程序员
babytiger21 小时前
python 通过selenium调用chrome浏览器
前端·chrome
passer98121 小时前
基于webpack的场景解决
前端·webpack
华科云商xiao徐21 小时前
Java并发编程常见“坑”与填坑指南
javascript·数据库·爬虫
奶昔不会射手21 小时前
css3之grid布局
前端·css·css3