js 数组reduce()方法详解

1. 前言

reduce是一个很美妙的函数，不仅因为它好用，也因为它也蕴含了Redux的哲学，对理解Redux中的reducer也有很大的帮助

2. 思考

先抛出一个问题，如何实现数组求和？

const arr = [1, 3, 5, 9, 20] // 求和

问题很简单，一个简单的解决方案如下：

let sum = 0
for (let i = 0; i < arr.length; i++) {
    sum += arr[i]
}
return sum

对于这个解决方案，不难发现，我们将数组里的值规约成了一个单一的值（sum）

在遍历数组的时候，我们使用了sum储存了求和结果。

那如果我要求数组内元素的乘积呢？将sum的初值设置为1即可。

这种设置累加器并且遍历数组（记住累加器前一个值）以生成一个单一元素的过程称为规约数组

3. 想法

那我们考虑是不是能用一种方法，来将我们的规约数组操作抽象成一个函数呢

当然可以，这就是我们reduce函数的哲学了

对于实现累加操作，我们重写reduce

Array.prototype.reduce = function(callback) {
    const arr = this
    let sum = 0
	for (var i = 0; i < arr.length; i++) {
        sum = callback(sum, arr[i])
    }
    return sum
}

[1, 3, 5, 9, 20].reduce((acc, val) => acc + val) // 38

执行乘积的时候会输出0，因为使用了累加器的0，所以我们得想办法优化reduce函数

Array.prototype.reduce = function(callback) {
    const arr = this
    let res = arr[0]
	for (var i = 1; i < arr.length; i++) {
        res = callback(res, arr[i])
    }
    return res
}

这样就实现了一个简单的reduce

这与Redux中的reducer(state, action)有着异曲同工之处

4. 应用

reduce的一些应用

找数组中的最大值最小值

const arr = [1, 2, 3, 9, 2]
arr.reduce((acc, item) => Math.max(acc, item)) // 9
arr.reduce((acc, item) => Math.min(acc, item)) // 1

// 更好的办法
Math.max.apply(Math, arr)
Math.min.apply(Math, arr)

实现map
map是将数组中每个元素都调用回调函数

那么reduce要做的事情就是将回调函数调用后的结果，规约到数组中

Array.prototype._map = function(cb) {
    const arr = this
    return arr.reduce((acc, item) => {
        return acc.concat(cb(item))
    }, [])
}
[1, 2, 3]._map(item => item*2) // [1, 2, 3]

filter
与实现map差不多

如果满足回调函数的条件，那么将它规约到数组中

Array.prototype._filter = function(cb) {
    const arr = this
    return arr.reduce((acc, item) => {
        return cb(item) ? acc.concat(item) : acc
    }, [])
}

[1, 2, 3]._filter(item => item >= 2) // [2, 3]

数组扁平化

let arr = [1, 2, '3js', [4, 5, [6], [7, 8, [9, 10, 11], null, 'abc'], {age: 12}, [13, 14]], '[]'];

const flatten = (arr) => {
    return arr.reduce((acc, item) => {
        if (Array.isArray(item)) {
            return acc.concat(flatten(item))
        } else {
            return acc.concat(item)
        }
    }, [])
}

// 常规解法
const flatten = (arr) => {
    let res = []

    const dfs = (cur) => {
        for (let i = 0; i < cur.length; i++) {
            if (Array.isArray(cur[i])) {
                dfs(cur[i])
            } else {
                res.push(cur[i])
            }
        }
    }

    dfs(arr)
    return res
}