JavaScript中reduce方法的用法及使用场景
更新时间：2023年08月28日 10:30:00 作者：编程三昧
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方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家带来一篇js控制一个按钮是否可点击(可使用)disabled的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
最近想实现一个uniapp取色器组件,实现后发现效果还不错,下面这篇文章主要给大家介绍了关于uni-app低成本封装一个取色器组件的相关资料,文中通过图文介绍的介绍的非常详细,需要的朋友可以参考下2023-02-02
javascript 控制超级链接的样式代码...2007-08-08
这篇文章主要介绍了JS如何根据当前日期获取一周所有日期,文中通过实例代码补充介绍了js获取当前一周的时间,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
作为浏览器脚本语言，如果JavaScript不是单线程，那么就有点棘手了。比如，与用户交互或者对DOM进行操作时，在一个线程上修改某个DOM，另外的线程删除DOM，这时浏览器该如何抉择呢?2021-05-05
这篇文章主要介绍了nuxt中使用路由守卫的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
这篇文章主要介绍了javascript 获取网页标题代码实例，有需要的朋友可以参考一下2014-01-01
JS获取后台Cookies值的小例子，需要的朋友可以参考一下2013-03-03
柯里化是将接受多个参数的函数转换成一系列只接受单个参数的函数的过程，而反柯里化是将柯里化函数转换成接受多个参数的函数的过程，本文将带大家理解 js 中的柯里化与反柯里化,需要的朋友可以参考下2023-07-07
escape()、encodeURI()、encodeURIComponent()三种方法都能对一些影响URL完整性的特殊字符进行过滤。2010-11-11
最新评论