Array数组reduce方法与数组累加、去重

简介: 【7月更文挑战第12天】

一、reduce
定义
reduce是一个聚合的方法,它可以将数组中的每一项通过叠加变成一项。

    例子

var arr = [1,2,3];
arr.reduce((pre,cur) => {
console.log(pre)
console.log(cur)
},0);
// 0,1
// undefined,2
// undefined,3
var arr = [1,2,3]
arr.reduce((pre,cur) => {
console.log(pre)
console.log(cur)
})
// 1,2
// undefined,3
var arr = [1, 2, 3, 4, 5];
arr.reduce(function(prev, cur, index) {
console.log(prev);
console.log(cur);
console.log(index);
})
console.log(arr); // 返回[1, 2, 3, 4, 5];
输出结果:

    1,2,1

    undefined,3,2

    undefined,4,3

    undefined,5,4

    可以看到,上例中其实值遍历了4次,数组有五项。数组中的第一项被当做了prev的初始值,而遍历从第二项开始。

    为什么会出现undefined? 因为第一个prev指的是数组第一项的值,而后面的prev指的是每一次叠加的结果,而reduce函数中缺少了对参数的处理,所以是undefined

var arr = [1, 2, 3, 4, 5];
sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prevres + cur;
})
console.log(arr, sum);
1,2,1

    3,2,2

    6,4,3

    10,5,4

     [1, 2, 3, 4, 5] ,15

prev: 第一项的值或上一次叠加的结果值
cur: 当前会参与叠加的项
index: 当前值的索引
arr: 数组本身
二、数组累加
var result = [
{
name: 'Lisa',
score: 88
},
{
name: 'Mike',
score: 95
},
{
name: 'Alan',
score: 80
}
];
我们要对三位同学的成绩进行累加求得该小组的总分。最常用的方法无非

var sum = 0;
for(var i=0; i<result.length; i++) {
sum += result[i].score;
}
使用reduce解决这个问题

var sum = result.reduce(function(prev, cur) {
console.log(prev) // 0
console.log(cur) // {name:'小明',score:88}
return cur.score + prev;
}, 0);
console.log('总数是' + sum)
可以看到添加了第二个参数,0,这第二个参数就是设置prev的初始类型和初始值,比如为0,就表示prev的初始值为number类型,值为0,因此,reduce的最终结果也会是number类型。同时设置起始值后,reduce函数将从第一项开始遍历。

    还能怎么玩?这三个同学这学期老是迟到,我想给他们三个人的小组总分扣掉20分,那我便可以:

var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, -20);
如果我们想调整小组的总分计算方式,改成由20%、40%、40%的组成计算方式,我们可以:

const prop = {
Lisa: 0.2,
Mike: 0.4,
Alan: 0.4
}
const sum = result.reduce((prev,cur) => {
return prev + cur.score * prop[cur.name]
},0)
三、灵活使用
由于可以通过第二参数设置叠加结果的类型初始值,因此这个时候reduce就不再仅仅只是做一个加法了,我们可以灵活的运用它来进行各种各样的类型转换,比如将数组按照一定规则转换为对象,也可以将一种形式的数组转换为另一种形式的数组。

    场景一:统计字符串中每个字符出现的次数

const str = 'I am SuperMan';
str.split('').reduce((result,cur) => {
result[cur] ? result[cur] ++ : result[cur] = 1
return result
},{})

    场景二: 数组元素各加1

[1, 2].reduce(function(res, cur) {
res.push(cur + 1);
return res;
}, [])
四、数组去重
通过reduce+includes我们可以轻松实现数组去重

const arr = [1,2,2,4,5,7,1,8]
arr.reduce((res,cur)=>{
res = res.includes(cur) ? res : [...res,cur]
return res
},[])

AI3D_WebEngineer

相关文章
|
2月前
|
人工智能 Java
Java 中数组Array和列表List的转换
本文介绍了数组与列表之间的相互转换方法,主要包括三部分:1)使用`Collections.addAll()`方法将数组转为列表,适用于引用类型,效率较高;2)通过`new ArrayList&lt;&gt;()`构造器结合`Arrays.asList()`实现类似功能;3)利用JDK8的`Stream`流式计算,支持基本数据类型数组的转换。此外,还详细讲解了列表转数组的方法,如借助`Stream`实现不同类型数组间的转换,并附带代码示例与执行结果,帮助读者深入理解两种数据结构的互转技巧。
Java 中数组Array和列表List的转换
|
2月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
2月前
|
前端开发 JavaScript 数据格式
通过array.reduce()实现数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式、聚合统计、处理树结构数据和性能优化,reduce()的使用详解(附实际应用代码)
array.reduce()可以用来数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式、聚合统计、处理树结构数据、性能优化等,使用难度相对高一些,但是能大大减少代码量。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时
|
2月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
2月前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
Python
使用array()函数创建数组
使用array()函数创建数组。
221 3
|
2月前
|
Web App开发 存储 前端开发
别再用双层遍历循环来做新旧数组对比,寻找新增元素了!使用array.includes和Set来提升代码可读性
这类问题的重点在于能不能突破基础思路,突破基础思路是从程序员入门变成中级甚至高级的第一步,如果所有需求都通过最基础的业务逻辑来做,是得不到成长的。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
2月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
5月前
|
存储 Go 索引
go语言中的数组(Array)
go语言中的数组(Array)
146 67
|
7月前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
153 5

热门文章

最新文章