数组的reduce方法是怎么用的

1.定义

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

语法这个方法可以接收两个参数：

要执行的函数，要执行的函数中也可以传入参数，如下

prev：上次调用函数的返回值

cur：当前元素

index：当前元素索引

arr：被遍历的数组

函数迭代的初始值

array.reduce(function(prev, currentValue, currentIndex, arr), initValue)

2.应用

不传入函数迭代的初始值

const arr = [11, 22, 33, 44] const sum = arr.reduce((prev, cur, index) => { console.log(prev, cur, index); return prev + cur }) console.log('sum:', sum); 

控制台打印

打印结果可以看到， reduce 就是对 arr 从左到右进行累加求和， 如果没有传入函数迭代的初始值， 初始值默认是数组第一位 ， prev 就是计算结束后的返回值。

传入函数迭代的初始值

const arr = [11, 22, 33, 44] const sum = arr.reduce((prev, cur, index) => { console.log(prev, cur, index); return prev + cur }, 10) console.log('sum:', sum); 

控制台打印

打印结果可以看到，我们传入函数迭代的初始值之后，也就是让 prev 从10开始累加，然后接着迭代累加 prev 。

除了平时我们可以用它去求一个数组的和，又或者是乘积，我们还可以拿他去做很多很多的事情，比如 计算数组中每个元素出现的次数，数组去重，扁平数组等等。

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

const arr = ['张三', '李四', '张三', '王五', '赵六', '王五', '张三'] const obj = arr.reduce((prev, cur) => { console.log(prev, cur); if (cur in prev) { prev[cur] += 1 } else { prev[cur] = 1 } return prev }, {}) console.log(obj); 

控制台打印

数组去重

const arr = ['张三', '李四', '张三', '王五', '赵六', '王五', '张三'] const newArr = arr.reduce((prev, cur) => { console.log(prev, cur); if (!prev.includes(cur)) { prev.push(cur) } return prev }, []) console.log(newArr); 

控制台打印

扁平化数组

const arr = [ { label: '水果', children: [ { label: '香蕉' }, { label: '橘子' } ] }, { label: '蔬菜', children: [ { label: '西红柿' }, { label: '白菜' } ] }, { label: '小猫' }, { label: '小狗' } ] const func = (res) => res.reduce((prev, cur) => { console.log(prev, cur) return prev.concat(Array.isArray(cur.children) ? func(cur.children) : cur) }, []) console.log(func(arr)) 

控制台打印

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/504.html