提升代码格调——JavaScript 数组的 reduce() 方法入门

基本概念

reduce() 方法为数组中的每一个元素依次执行回调函数（不包括数组中被删除或从未被赋值的元素），返回一个具体的结果。

语法

reduce() 接收两个参数，其基本语法为：

arr.reduce(callback,[initialValue])

参数解析：

callback 执行数组中每个值的函数，包含四个参数：

previousValue 第一项的值或者上一次叠加的结果值，或者是提供的初始值（initialValue）
currentValue 数组中当前被处理的元素
index 当前元素在数组中的索引
array 数组本身

initialValue (可选) 作为第一次调用 callback 的第一个参数，可以控制返回值的格式

reduce() 方法可以使用以下这个表达式总结一下：

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

基本示例

我们通过下面这个例子，来直观认识一下 reduce() 的各个参数：

const arr = [2, 4, 6, 8, 10];
let i = 0;
arr.reduce((pre, cur, index, arr) => {console.log(`第${ i + 1 }次执行：pre:${ pre },cur:${ cur },index:${ index }`);i++;return pre + cur;
}, 10);// 第1次执行：pre: 10, cur: 2, index: 0
// 第2次执行：pre: 12, cur: 4, index: 1
// 第3次执行：pre: 16, cur: 6, index: 2
// 第4次执行：pre: 22, cur: 8, index: 3
// 第5次执行：pre: 30, cur: 10, index: 4
// 40

代码分析：

数组中的元素依次执行了回调函数。
因为给 initialValue 赋了初始值 10，所以第一次执行时， pre 的值默认从 10 开始。
每次执行时，pre 的值都是 cur 元素前的所有元素之和。
最后返回数组所有元素累加的和。

我们再看一下不传 initialValue 参数的执行结果：

const arr = [2, 4, 6, 8, 10];
let i = 0;
arr.reduce((pre, cur, index, arr) => {console.log(`第${ i + 1 }次执行：pre:${ pre },cur:${ cur },index:${ index }`);i++;return pre + cur;
});// 第1次执行：pre: 2, cur: 4, index: 1
// 22 第2次执行：pre: 6, cur: 6, index: 2
// 22 第3次执行：pre: 12, cur: 8, index: 3
// 22 第4次执行：pre: 20, cur: 10, index: 4
// 30

可以看到，这里只执行了四次，且是从数组的第二位开始执行的，数组的第一位默认作为了 pre 的值。

实际应用

除了上面的基本应用之外，reduce() 方法还有以下应用。

计算数组中每个元素出现的次数

const arr = ['name', 'age', 'long', 'short', 'long', 'name', 'name']arr.reduce((pre, cur) => {console.log(pre, cur)if (cur in pre) {pre[cur]++} else {pre[cur] = 1}return pre
}, {})// { } "name"
// {name: 1} "age"
// {name: 1, age: 1} "long"
// {name: 1, age: 1, long: 1} "short"
// {name: 1, age: 1, long: 1, short: 1} "long"
// {name: 1, age: 1, long: 2, short: 1} "name"
// {name: 2, age: 1, long: 2, short: 1} "name"
// {name: 3, age: 1, long: 2, short: 1}

数组去重

const arr = ['name', 'age', 'long', 'short', 'long', 'name', 'name'];let arrResult = arr.reduce((pre, cur) => {if (!pre.includes(cur)) {pre.push(cur)}return pre;
}, [])// ["name", "age", "long", "short"]

对象属性求和

const person = [{name: 'xiaoming',age: 18}, {name: 'xiaohong',age: 17}, {name: 'xiaogang',age: 19}
]person.reduce((a, b) => {a = a + b.age;return a;
}, 0);// 54

总结

reduce() 方法还有很多其他用途，这里只是列出了最常见的几种，剩下的还需要大家多多探索哦！

~本文完！

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

大家好！我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！

知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！

提升代码格调——JavaScript 数组的 reduce() 方法入门相关推荐

【JavaScript】查漏补缺 —数组中reduce()方法
[JavaScript]查漏补缺 -数组中reduce()方法
JavaScript数组属性和方法
数组字面量声明数组 let arr = [1,2,3,4] 构造函数声明数组 let arr = new Array(1,2,3) arr[0] = "a" arr[1] = & ...
Javascript 数组求和的方法
1.应用场景主要用于数组求和. 2.学习/操作 JavaScript 数组求和的方法 var array = [1, 2, 3, 4, 5]; var sum = 0; 1.for循环 for (l ...
数组的 reduce方法
数组的 reduce方法 reduce() 方法对数组中的每个元素按序执行一个由你提供的 reducer 函数,每次运行都会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值. 当第一 ...
Javascript数组的 splice方法介绍
Javascript数组的 splice 方法介绍 splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容.此方法会改变原数组. 语法格式 array ...
数组求和-reduce方法
function sum(...numbers){return numbers.reduce((pre,current)=>{return pre + current}) } console.l ...
【基础恶补】JavaScript数组的一些方法，reduce，filter，reverse，map等
reduce reduce方法会对数组中的每个元素按序执行由你提供的reducer函数,每一次运行reducer会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值. 用法,两个参数cal ...
JavaScript数组常用的方法总结
导读:在实际开发中,前端工程师除了写页面布局及样式还要对后端返回的数据进行处理,返回的数据大多数是json格式,一般都是返回一个对象或者数组,下面对常用的数组的使用方法进行总结,方便在开发中手到擒来! ...
Javascript数组常见的方法
分为两种:原型(实例)方法和静态函数第一类:原型方法: 栈方法(后进先出) push 参数:任意个作用:将任意数量的参数逐个添加到数组尾部返回值: 新数组的长度影响:破坏了原数组 pop 参数 ...