JS函数式编程工具：数组reduce方法的使用例子

数组的众多方法中，也许大家都使用过map，filter，forEach，some，every，sort，reverse等方法，而reduce方法用过的人并不多，因为它相比数组的其它方法，不是那么直观，对初学者有一点点难度，往往找不到适合的应用场景。mdn中对reduce方法的介绍是：

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

reduce接收2个参数：callbackFn函数和初始值initialValue，initialValue是可选的；callbackFn接收4个参数：

• previousValue：上一次调用 callbackFn 时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。
• currentValue：数组中正在处理的元素。在第一次调用时，若指定了初始值 initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。
• currentIndex：数组中正在处理的元素的索引。若指定了初始值 initialValue，则起始索引号为 0，否则从索引 1 起始。
• array：用于遍历的数组。

我们可以把reduce理解为聚合器，当我们需要把数组转化为一个新的数据结构的时候，也许reduce很适合。比如：统计数组中的元素出现的次数，对数组进行计算操作等。在适合的场景使用reduce，也许能使我们的代码非常简洁而优雅！现在，我们开始上代码吧。

编写一个函数：toFlatArray，该函数接收一个嵌套的数组arr作为参数，返回平铺的一维数组。

const toFlatArray = arr => arr.reduce((t, _) => [...t, ...(Array.isArray(_) ? toFlatArray(_) : [_])], [])

console.log(toFlatArray([1, 2, [3, [4, [5, 7, [99], [9, 9, 0]]], 9], 8]))
// 输出 [1,  2, 3, 4, 5, 7, 99, 9, 9, 0,  9,  8]           

是不是很简洁？如果当前元素是数组，我们就递归调用toFlatArray函数，否则把元素添加到前一个值(一个新的一维数组)中。

编写函数：getAttr，用来获取嵌套对象的属性值，如果没有该属性，不要抛异常，而是返回undefined。

// 例子1：getAttr({a: { b: 2 }}, 'a.b') 返回 2
// 例子2：getAttr({a: { b: { c: 3 } }}, 'a.b.c') 返回 3
// 例子3：getAttr({a: { b: { c: 3 } }}, 'a.b.c.d.e') 返回 undefined           

const getAttr = (o, attrsStr) => attrsStr.split('.').reduce((t, _) => (t || {})[_], o)           

不知道大家有没有用过一些组件库，比如element-ui中的el-table-column和el-form-item组件，可以这样绑定prop：

<el-table-column prop="user.company.name"  />
<el-form-item prop="form.company.id">
  <el-select v-model="form.company.id"></el-select>
</el-form-item>           

没错，我们的getAttr函数正适用于该场景，用来解析prop的值。

获取页面中zIndex值最大的元素。

const el = els.reduce((t, _) => t ? +t.style.zIndex > +_.style.zIndex ? t : _ : _)           

我们假定els是使用Array.from将类数组对象NodeList转化而来的数组。完整地使用例子，在我的这篇文章中有介绍。Vuejs通过浏览器导航关闭模态框，实现增强的用户体验，实际上，只要大家认真思考，这种简单的使用场景有很多。

现在，我们来个复杂点的例子。

编写函数stat：要求：随机生成包含50个由大于等于0且小于10的整数构成的数组，返回生成的数组及出现次数最多的值和出现次数构成的对象，返回格式： { array: [], current: number, count: number }。

function stat () {
  // 随机生成包含50个大于等于0且小于10的元素构成的数组
  const array = Array(50).fill(0).map(() => Math.floor(Math.random() * 10))
  // 对数据进行聚合，统计每个元素出现的次数，key为数组元素，value为出现次数
  const obj = array.reduce((t, _) => ({ ...t, [_]: (t[_] || 0) + 1 }), {})
  return {
    array,
    // 由obj中的所有key构成的数组，进行聚合操作，返回出现次数最多的key
    ...Object.keys(obj).reduce((t, _) => {
      return obj[_] > t.count ? { value: +_, count: obj[_] } : t
    }, { value: null, count: 0 })
  }
}           

console.log(stat())
/*
  输出：{
  array: [
    6, 4, 5, 1, 6, 6, 4, 8, 9, 5, 9, 4, 3, 0, 2, 1, 8, 5, 2, 4, 3, 0, 6, 6, 8,
    9, 3, 7, 8, 3, 1, 7, 7, 1, 9, 6, 4, 1, 0, 2, 7, 0, 4, 2, 7, 3, 9, 9, 6, 8
  ],
  value: 6,
  count: 7
}
*/           

最后，我们来一个闭包中使用reduce的例子。

编写add函数，参数数量不固定，将所有参数相加，运算结果可以满足如下预期结果：

/**
 * add(1)(2)(3) // 6
 * add(1, 2)(3)(4) // 9
 * add(1, 2, 3)(4, 5)(6) // 21
 */           

实现如下：

const add = (...a) => (...b) => (...c) => [...a, ...b, ...c].reduce((t, _) => t + _)           

是不是很简单？在我以往的文章中，有很多使用reduce方法的复杂场景，比如使用reduce＋递归操作树形结构。reduce方法是不是没想象中那么难呢？

大家还有什么不懂的地方都可以问我。感谢阅读！