JS reduce() 方法使用细节归纳

一、reduce语法介绍

array.reduce((prev, item, index, arr)=> {
    /***/
}, initialValue)

参数：

参数一 callback 函数，包含了四个参数：

prev	提供了 initialValue，则为之
	为提供 initialValue，为数组的第一项
item	当前数组循环正在处理的数组元素
index	当前 currentValue 的索引
array	执行 reduce 操作的数组

参数二 initialValue 初始值，初始值可提供，也可不提供。提供初始值，item 从数组第一项开始，若不提供初始值，则 item 从第二项开始执行，对应的第一次 prev 是数组第一项的值

返回值：

返回最后的执行结果

二、举例

let arr = ['h','i','n','a']
let str = arr.reduce((prev, item, index, arr)=> {
    console.log(prev, item, index, arr)
    return prev + item
}, 'C')
console.log(str) // China

循环打印结果如下图：

三、注意事项

1. reduce是一个对数组累积操作的方法，使用时要加上 return 返回累积操作的数据。这样 prev 才能获取上一次执行的结果，否则是 undefined

2. 空数组执行 reduce 操作且不提供初始值时reduce会报错，错误信息如下：

 四、具体使用

1. 数组去重

let arr = [1, 2, 2, 2, 3, 3, 4, undefined, undefined, null]
arr.reduce((prev, item) => {
    return prev.includes(item) ? prev : prev.concat(item);
}, [])

// [1, 2, 3, 4, undefined, null]

2. 数组降维

let arr = [0,[1],[2, 3],[4, [5, 6, 7]]];
let reduceArray = function (arr) {
    return arr.reduce((prev, item) => {
        return prev.concat(Array.isArray(item) ? reduceArray(item) : item)
    }, [])
}
reduceArray(arr)

//[0, 1, 2, 3, 4, 5, 6, 7]

3. 数组累加

let arr = [1, 2, 3, 4]
arr.reduce((prev, item) => {
    return prev + item;
})

// 10