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方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了JavaScript 短路运算的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
有时候我们需要动态的加入适合的js，因为有时候不需要将所有的js都加载进来，以来提高效率，但这种方法比较适合单个js文件比较大的情况2009-05-05
这篇文章主要为大家详细介绍了JS表格组件神器bootstrap table使用指南，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了微信小程序制作扭蛋机代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
layui中使用jquery控制radio选中事件的示例代码
今天小编就为大家分享一篇layui中使用jquery控制radio选中事件的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
JS中for,for...in,for...of和forEach的区别和用法实例
JS遍历数组（循环数组）的方式有多种,可以使用传统的for循环,也可以使用升级版的for in循环,还可以使用Array类型的forEach() 方法,这篇文章主要给大家介绍了关于JS中for、for...in、for...of和forEach的区别和用法的相关资料,需要的朋友可以参考下2021-11-11
这篇文章主要介绍了小程序分享模块超级详解(推荐)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
本文主要介绍了webpack打包时如何修改文件名的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要为大家详细介绍了JS实现字体背景跑马灯，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
此库非常的迷你压缩之后只有1.54KB.但是却有类似jquery的语法有COOKIE操作还有DOM以及AJAX跟绑定事件函数.2010-03-03
最新评论