JavaScript中reduce()详解及使用方法
更新时间：2023年04月27日 10:19:01 作者：超快的慢蜗牛
reduce()方法接收一个函数做为累加器,数组中的每一个值(从左到右)开始缩减,最终计算为一个值,下面这篇文章主要给大家介绍了关于JavaScript中reduce()详解及使用方法的相关资料,需要的朋友可以参考下
reduce（）：
reduce（）方法为归并类方法，最常用的场景就是，计算数组中的每一项的总和。
reduce（） 方法会遍历数组的每一项，他接收两个参数：
第一个参数：每次遍历都会调用的函数，而这个函数有接收四个参数，分别是：前一个值、当前项、项目的索引和数组对象，而这个函数的返回值，回传给下一次遍历时，执行的这个方法的第一个参数。
第二个参数：归并基础的初始值
我们看一下例子： reduce（）怎么用？
let arr = [1,2,3,4,5]
arr.reduce((prev,cur)=>{
return prev+cur
})上面的这段代码，是用来计算数组总和的，reduce（）方法中，只传了第一个参数，也就是只传了一个函数，但第二个参数、初始值没有传，当第二个值没有传的时候，第一次循环，prev的值，默认为数组的第一项，而cur的值为数组的第二项，也就是第一次循环，会return 1+2，这个时候，第一次循环返回的结果回传给下一次循环中方法的第一个参数，也就是说、第二次循环方法中prev的值，是第一次循环方法返回的结果
let arr = [1,2,3,4,5]
arr.reduce((prev,cur)=>{
return prev+cur
},10)我们传入一下第二个参数，第一个循环，prev的值为reduce的第二个参数，也就是"归并基础的初始值"，而cur的值为数组的第一项，第一项循环会返回10+1
总结：
1.当reduce（）方法的第二个值为空时，第一次循环方法中的第一个参数（prev）为数组的第一项值，第二个参数（cur）为数组的第二项值，反之，第一次循环方法中的第一个参数（prev）为reduce的第二个参数值，第二个参数（cur）为数值的第一项值。
2.reduce（）方法的第一个参数，就是每次遍历都会执行的匿名函数，当前函数的返回值就会传给下一次执行函数的第一个值。也就是prev
reduce 应用场景：
1.数组里所有值的和
var arr = [0,1,2,3];
var value = arr.reduce((pre, cur) => {
return pre + cur;
}, 0);
console.log(value);// 输出：62.累加数组中对象的值
var arr = [{ x: 1 }, { x: 2 }, { x: 3 }];
var value = arr.reduce((pre, cur) => {
return pre + cur.x;
}, 0);
console.log(value);// 输出：63.将二维数组转为一维数组
var arr = [
[0, 1],
[2, 3],
[4, 5],
];
var value = arr.reduce((pre, cur) => {
return pre.concat(cur);
}, []);
console.log(value); // 输出：[0, 1, 2, 3, 4, 5]4.计算数组中每个元素出现的次数
var arr = ["a", "b", "a", "c", "c", "c"];
var value = arr.reduce((pre, cur) => {
if (cur in pre) {
pre[cur]++;
} else {
pre[cur] = 1;
}
return pre;
}, {});
console.log(value); // 输出：{a: 2, b: 1, c: 3}5.按属性对object分类
var people = [
{ name: "tom", age: 17, birthYear: 2021 },
{ name: "tony", age: 21, birthYear: 2021 },
{ name: "bob", age: 18, birthYear: 2020 },
{ name: "bob", age: 18, birthYear: 2021 },
{ name: "bob", age: 18, birthYear: 2019 },
];
function groupBy(arr, property) {
if (!Array.isArray(arr)) return [];
return arr.reduce((pre, obj) => {
var newObj = {
[property]: obj[property],
data: [obj],
};
if (!pre.length) {
return [newObj];
}
for (let i = 0; i < pre.length; i++) {
let item = pre[i];
if (item[property] === obj[property]) {
item.data = [...item.data, obj];
return pre;
}
}
return [...pre, newObj];
}, []);
}
var value = groupBy(people, "birthYear");返回值：
6.数组去重：
var arr = [1, 2, 3, 2, 2, 3, 5, null, null, 0, false, false, true];
var value = arr.reduce((pre, cur) => {
return pre.includes(cur) ? pre : pre.concat(cur);
}, []);
console.log(value);//[1, 2, 3, 5, null, 0, false, true]附：reduce的高级用法
（1）计算数组中每个元素出现的次数
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let nameNum = names.reduce((pre,cur)=>{
if(cur in pre){
pre[cur]++
}else{
pre[cur] = 1
}
return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
（2）数组去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(newArr);// [1, 2, 3, 4]
（3）将二维数组转化为一维
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
（3）将多维数组转化为一维
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
（4）、对象里的属性求和
var result = [
{
subject: 'math',
score: 10
},
{
subject: 'chinese',
score: 20
},
{
subject: 'english',
score: 30
}
];
var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, 0);
console.log(sum) //60
到此这篇关于JavaScript中reduce()详解及使用方法的文章就介绍到这了,更多相关js中reduce()详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
之前做项目的时候在实现表单中file类型input选择多图片时有很多种实现方法，今天小编给大家分享基于php实现一种多文件上传的方法，需要的朋友参考下吧2017-09-09
javascript 操作Word和Excel的实现代码, 需要的朋友可以参考下。2009-10-10
事件委托是指将一个事件处理程序绑定到父元素上,而不是直接绑定到每个子元素上,下面就跟随小编一起来了解一下JavaScript是如何处理事件委托的吧2024-12-12
Javascript构造函数是非常强大的,它可能也是Javascript能被充分利用的特点之一,文中通过实例代码介绍的非常详细,这篇文章主要给大家介绍了关于JavaScript构造函数的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了微信小程序实现计算器案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
Javascript实现快速排序（Quicksort）的算法详解
排序算法（Sorting algorithm）是计算机科学最古老、最基本的课题之一，要想成为合格的程序员，就必须理解和掌握各种排序算法。2015-09-09
下面小编就为大家带来一篇javascript获取网页各种高宽及位置的方法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
echarts中X轴显示特定个数label并修改样式的方法详解
最近在使用Echarts图表遇到些特别的需求,想着给大家整理下,所以下面这篇文章主要给大家介绍了关于echarts中X轴显示特定个数label并修改样式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07![JavaScript输出为[object Object]问题的解决办法](//img.jbzj.com/images/xgimg/bcimg8.png)
JavaScript输出为[object Object]问题的解决办法
平时我们在接收后端返回的json对象通常是一个字符串类型的object,所以一般我们要对这个object进行类型转化后,我们才能使用object里面的数据,这篇文章主要给大家介绍了关于JavaScript输出为[object Object]问题的解决办法,需要的朋友可以参考下2023-11-11
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
这篇文章主要介绍了JavaScript中的索引数组、关联数组和静态数组、动态数组讲解,本文介绍了从数组的下标分为索引数组、关联数组、从对数据的存储分为静态数组、动态数组,并给出了示例,需要的朋友可以参考下2014-11-11
![JavaScript输出为[object Object]问题的解决办法](http://img.jbzj.com/images/xgimg/bcimg8.png)
最新评论