JavaScript: 数组reduce实例方法
SegmentFault
共 5925字,需浏览 12分钟
· 2021-04-09
作者:沉静地闪光
一、 reduce定义和用法
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce() 可以作为一个高阶函数,用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
语法:
array.reduce(function(prev, cur, index, arr), init)
prev (上一次调用回调返回的值,或者是提供的初始值(initialValue)) cur (数组中当前被处理的元素) index (当前元素在数组中的索引) arr (调用的数组) init (传递给函数的初始值)
二、reduce浏览器支持情况
三、reduce累加
带初始值
var arr = [1,2,3,4]
var sum = arr.reduce((pre, item) => {
return pre + item
}, 10)
console.log(sum) // 20
不带初始值
var arr = [1,2,3,4]
var sum = arr.reduce((pre, item) => {
return pre + item
},)
console.log(sum) // 10
四、reduce数组去重
var arr = [1,2,3,3,2,1,4]
arr.reduce((acc, cur) => {
if (!(acc.includes(cur))) {
acc.push(cur)
}
return acc
}, [])
// [1, 2, 3, 4]
五、reduce求数组项最大值
var arr = [1, 2, 3, 4];
arr.reduce((prev, cur) => {
return Math.max(prev,cur);
});
//4
六、reduce将二维数组转为一维数组
var arr = [[1,2], [3,4], [5,6]]
arr.reduce((acc, cur) => {
return acc.concat(cur)
}, [])
// [1,2,3,4,5,6]
七、reduce对象里的属性求和
var arr = [
{subject: 'Math', score: 90},
{subject: 'Chinese', score: 90},
{subject: 'English', score: 100}
]
arr.reduce((pre, cur) => {
return cur.score + pre
}, 0)
//280
八、reduce计算数组中每个元素出现的个数
var arr = [1, 2,3,3,2,1,2,1]
arr.reduce((acc, cur) => {
if (!(cur in acc)) {
acc[cur] = 1
} else {
acc[cur] += 1
}
return acc
}, {})
//{1: 3, 2: 3, 3: 2}
九、reduce按属性给数组分类
var arr = [
{subject: 'Math', score: 90},
{subject: 'Chinese', score: 90},
{subject: 'English', score: 100},
{subject: 'Math', score: 80},
{subject: 'Chinese', score: 95}
];
arr.reduce((acc, cur) => {
if (!acc[cur.type]) {
acc[cur.type] = [];
}
acc[cur.type].push(cur)
return acc
}, {})
十、reduce实现map
var arr = [1, 2, 3, 4]
Array.prototype.reduceMap = function(callback) {
return this.reduce((acc, cur, index, array) => {
const item = callback(cur, index, array)
acc.push(item)
return acc
}, [])
}
arr.reduceMap((item, index) => {
return item + index
})
// [1, 3, 5, 7]
十一、reduce实现forEach
var arr = [1, 2, 3, 4]
Array.prototype.reduceForEach = function(callback) {
this.reduce((acc, cur, index, array) => {
callback(cur, index, array)
}, [])
}
arr.reduceForEach((item, index, array) => {
console.log(item, index)
})
// 1234
// 0123
十二、reduce实现filter
var arr = [1, 2, 3, 4]
Array.prototype.reduceFilter = function (callback) {
return this.reduce((acc, cur, index, array) => {
if (callback(cur, index, array)) {
acc.push(cur)
}
return acc
}, [])
}
arr.reduceFilter(item => item % 2 == 0) // 过滤出偶数项。
// [2, 4]
十三、reduce实现find
var arr = [1, 2, 3, 4]
var obj = [{ a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }]
Array.prototype.reduceFind = function (callback) {
return this.reduce((acc, cur, index, array) => {
if (callback(cur, index, array)) {
if (acc instanceof Array && acc.length == 0) {
acc = cur
}
}
if ((index == array.length - 1) && acc instanceof Array && acc.length == 0) {
acc = undefined
}
return acc
}, [])
}
arr.reduceFind(item => item % 2 == 0) // 2
obj.reduceFind(item => item.a % 2 == 0) // {a: 2}
obj.reduceFind(item => item.a % 9 == 0) // undefined
碰到数组复杂操作的时候,就是reduce
大显身手的时候。深入研究reduce
的用法,对开发大有裨益。
评论
15种时间序列预测方法总结(包含多种方法代码实现)
向AI转型的程序员都关注了这个号👇👇👇在这篇文章中,我们将深入探讨时间序列预测的基本概念和方法。我们将首先介绍单元预测和多元预测的概念,然后详细介绍各种深度学习和传统机器学习方法如何应用于时间序列预测,包括循环神经网络(RNN)、一维卷积神经网络(1D-CNN)、Transformer、自回归模型(
机器学习AI算法工程
0
JavaScript 可视化:Promise执行彻底搞懂
深入探讨了 JavaScript 中 Promise 的内部机制,解释了它们如何使异步任务以非阻塞方式执行,并展示了 Promise 的创建、状态变化以及与事件循环的关系。正文从这开始~~JavaScript 中的 Promise 一开始可能会让人感到有些难以理解,但是如果我们能够理解其内部的工作原
高级前端进阶
0
什么样的冷却方法适合数据中心运营?
冷却数据中心的最简单方法是安装空气交换器,通过服务器室生成冷空气。但是,如果想要节省资金,至少从长远来看,更好的方法可能是在每个机架上安装空气交换器,并使用它们为单个机架的服务器降温。"后机架冷却",与数据中心中更为传统的空气冷却系统相比,特别是在能源效率方面,其具有一些优势。冷却数据中心的最简单
数据中心运维管理
0
JavaScript 可视化:Promise执行彻底搞懂
大厂技术 高级前端 Node进阶点击上方 程序员成长指北,关注公众号回复1,加入高级Node交流群深入探讨了 JavaScript 中 Promise 的内部机制,解释了它们如何使异步任务以非阻塞方式执行,并展示了 Promise 的创建、状态变
程序员成长指北
2
一篇文章带你了解JavaScript作用域
点击上方“前端进阶学习交流”,进行关注回复“前端”即可获赠前端相关学习资料今日鸡汤杨家有女初长成,养在深闺人未识。在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript 有函数作用域: 这个作用域在函数内变化。一、本地
前端进阶学习交流
0
.NET 开源工具库,集成超过1000个扩展方法
前言推荐一个.NET 开源项目,集成了超过1000个扩展方法。项目简介Z.ExtensionMethods是由zzzprojects公司开发并维护的一款开源库,为.NET开发人员提供一系列实用的扩展方法,可以减少重复劳动、提高开发效率,支持.NET Framework 和 .NET Core。该项目
dotNET全栈开发
10
一篇文章带你了解JavaScript switch
点击上方“前端进阶学习交流”,进行关注回复“前端”即可获赠前端相关学习资料今日鸡汤舍身而取义者也!Switch是与if ... else ...相同的条件语句,不同之处在于switch语句允许根据值列表测试变量是否相等。switch 语句用于根据不同的条件执行不同的操作。一、Switch 语句使用s
前端进阶学习交流
0
《拆掉思维里的墙》:让你彻底走出恐惧的两张方法
梭罗在《瓦尔登湖》中说道:“无论你的生活多么艰难,请正视它,好好地活下去;别逃避它,也别咒骂它。它并没有你那么糟糕。”很多我们恐惧的事情,一旦我们真正去正视它的时候,其实它并没有那么可怕。恐惧其实就是一个欺软怕硬的货色,遇强它就弱,遇弱它就强。遇到问题,自己强势一点,相信一定可以解决它,那么心中那股
胖琪的升级之路
23