JS中数组的reduce方法使用总结

不知道大家有没有这种情况，每次要使用reduce方法时，总会想不起来这个方法该如何使用，都得先搜索一波reduce方法各个参数的含义与适用场景。

接下来从reduce方法的语法讲起，结合实例，帮助掌握reduce方法的使用。

一、语法：数组中的每个元素执行该回调函数，最终返回一个结果值。

const arrMy = [1, 2, 3]arrMy.reduce(function(total, currentVal, currentIndex, arr){// todo 每个函数元素要执行的}, initVal)

reduce方法的第一个参数：回调函数，必需，数组元素会执行该函数

total：必需，初始值或者是计算返回后的结束值；

currentVal：必需，当前数组元素值；

currentIndex：可选，当前数组元素的下标；

arr：可选，当前元素所属的数组对象。

reduce方法的第二个参数：initVal，可选，传递给回调参数的初始值

例1：

const arrMy = [1, 2]
const res = arrMy.reduce(function(total, currentVal, currentIndex, arr){console.log(total, currentVal, currentIndex, arr)return total + currentVal
}, 0)
console.log(res)

结果如下图：

例2：

const arrMy = [1, 2]
const res = arrMy.reduce(function(total, currentVal, currentIndex, arr){console.log(total, currentVal, currentIndex, arr)return total + currentVal
})
console.log(res)

结果如下图：

由此，可以看出，回调函数第一次执行时，有以下两种情况：

1. 无初始值initVal时，total的值就是数组的第一个值，currentVal就是数组的第二个值；索引直接从1开始，跳过了0。
2. 有初始值initVal时，totao的值就是initVal，currentVal就是数组的第一个值；索引从0开始。

因此，下面这3点需要注意：

1. 无初始值initVal时，数组arrMy为空数组时，将会报错！
2. 数组arrMy只有一个元素时，不会执行回调函数，reduce方法直接返回该数组的唯一一个元素。
3. 有初始值，数组arrMy为空数组，不会执行回调函数，reduce方法直接返回该初始值。

二、使用场景举例

使用场景1：数组求和，参考例1

使用场景2：数组去重

const arr = [1, 3, 3, 4, 5, 5]
const res = arr.reduce((total, currentVal) => {if (total.indexOf(currentVal) === -1) {total.push(currentVal)}return total
}, [])
console.log(res) // [ 1, 3, 4, 5 ]
console.log(arr) // [1, 3, 3, 4, 5, 5]

使用场景3：数组降维

const arr = [[1], [2, 3, [4,5]]]
const resFun = (item) => {return item.reduce((total, currentVal) => {if (Array.isArray(currentVal)) {total = total.concat(resFun(currentVal))} else {total.push(currentVal)}return total}, [])
}
console.log(resFun(arr)) // [ 1, 2, 3, 4, 5 ]
console.log(arr) // [ [ 1 ], [ 2, 3, [ 4, 5 ] ] ]

❤️欢迎素质三连[点赞 + 收藏 + 评论]

我是小梅，有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知，一起沟通、学习成长呀。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！