首页 > 其他分享 > js 中,reduce() 的详解 以及使用方法

js 中,reduce() 的详解 以及使用方法

时间:2023-09-22 17:37:29浏览次数:47  
标签:pre arr return cur reduce js 详解 var

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);// 输出:6
2.累加数组中对象的值

var arr = [{ x: 1 }, { x: 2 }, { x: 3 }];

var value = arr.reduce((pre, cur) => {
   return pre + cur.x;
}, 0);

console.log(value);// 输出:6
3.将二维数组转为一维数组

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]

 

标签:pre,arr,return,cur,reduce,js,详解,var
From: https://www.cnblogs.com/ranyonsue/p/17722966.html

相关文章

  • Arcgis 与 Pixi.js 可视化 glsl 特效篇(二十一)
    这次我们用pixi.js和arcgisjs结合我们先定义一下传入数据结构symbol暂时不做let option={renderer:{type:"simple",symbol:{}},data:[{geometry:[12956152.73135875,4855356.473704897],attributes:{name:"北京"}},{geometry:[12697872.01278319......
  • js中!!的用法(双感叹号)
    在javascript代码中经常会见到!!的情况,本文即以实例形式较为深入的分析javascript中2个感叹号的用法。分享给大家供大家参考之用。具体分析如下:javascript中的!!是逻辑"非非",即是在逻辑“非”的基础上再"非"一次。通过!或!!可以将很多类型转换成bool类型,再做其它判断。使用javas......
  • JS实现电子签名,并且将带logo和时间水印的电子签名保存到本地
    页面效果如下 本地保存的电子签名图片如下 具体实现代码如下<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>电子签名</title><style>#canvas{border:1pxsolid#000;margin-bo......
  • @JsonFormat 使用方法
    @JsonFormat(shape=JsonFormat.Shape.STRING,pattern="yyyy-MM-ddHH:mm:ss",timezone="GMT+8")privateLocalDatecreateTime;错误示范:@JsonFormat(pattern="yyyy-MM-ddHH:mm:ss")privateLocalDatecreateTime;@JsonFormat注解是一......
  • JVM堆内存(heap)详解
    JAVA堆内存管理是影响性能主要因素之一。堆内存溢出是JAVA项目非常常见的故障,在解决该问题之前,必须先了解下JAVA堆内存是怎么工作的。先看下JAVA堆内存是如何划分的,如图:Java堆内存又溢出了!教你一招必杀技   JVM内存划分为堆内存和非堆内存,堆内存分为年轻代(YoungGeneration)、......
  • Kafka详解、Kafka集群搭建与使用
    Kafka详解、Kafka集群搭建与使用原创 凉兮 凉兮的运维日记 2023-09-2116:10 发表于北京收录于合集#docker6个#消息队列1个一、Kafka详解1.Kafka是什么Kafka是Apache旗下的一款分布式流媒体平台,Kafka是一种高吞吐量、持久性、分布式的发布订阅的消息队列系统......
  • php js+laravel+mysql手术麻醉临床信息系统
    医院手麻系统源码 技术架构:phpjs+laravel+mysql vue2elementB/S网页版手术麻醉临床信息系统有着完善的临床业务功能,能够涵盖整个围术期的工作,能够采集、汇总、存储、处理、展现所有的临床诊疗资料。通过该系统的实施,能够规范麻醉科的工作流程,实现麻醉手术过程的信息数字......
  • JsonConvert相关操作
    #序列化时,忽略jsonproperty特性的作用:publicstaticclassJsonConvertExtension{publicstaticstringCustomSerialize(objectobj){JsonSerializerSettingssettings=newJsonSerializerSettings();settings.Formatting......
  • Arrays.binarySearch 详解
    Arrays.binarySearch详解前提:非降序排序数组binarySearch(Object[]a,Objectkey)a:待搜索的数组key:要搜索的值逻辑条件可以找到:返回一个>=0的索引找不到:【从1开始计数】在数组范围内,返回-(key将要插入的位置)不在范围内:返回-1或者-(len+1)......
  • 一次性搞懂JS字符串截取方法substring()、slice()以及substr()的用法和区别
    substring()和slice()都接受两个参数,“start”和“end”。“start”表示截取的开始位置,“end”表示结束的位置(不包括该位置的字符,也就是前要后不要)。如果不传参数,则返回字符串本身的一个副本。 如果只传一个参数,则从该位置开始,截取到字符串的末尾。 如果传递两个参数,则......