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
}