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]
相关推荐
然我9 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子14 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹18 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器24 分钟前
指定阿里镜像原理
前端
枷锁—sha29 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha30 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux