持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第天，点击查看活动详情

前言

前面的这篇文章 JS 基础! | 扁平数组和JSON树的转换 利用到了 reduce来实现数组转为map，以及结合concat实现数组递归拼接。今天我们来看看还能搞些什么名堂~

简单复习一下 reduce

语法

  1. let value = arr.reduce(function(previousValue, item, index, array) {
  2.   // ...
  3. }, [initial]);

参数：

  • previousValue: 上一个函数调用的结果，第一次等于 initial（如果提供了 initial的话）。
  • item: 当前的数组元素。
  • index:当前索引。
  • arr: 数组本身。

previousValue实际上有点像累加，所以一些地方也会叫将这个参数称为accumulator，存储前面所有的执行结果，最后会成为reduce的结果。

可读性

但通常，你一般是不会完全参照这些参数定义的意思来决定参数名称，而是要看具体开发遇到的场景来给其取可读性高的名称。

部分应用

1. 经典累加器

将数组中的值从左到右累加，大家学reduce的时候第一个例子应该就是这个。这里只是简单的提一下，不是本文的重点~

  1. const a = [1, 2, 8, 7, 4];
  3. const sum = a.reduce((pre, cur) => {
  4.     const res = pre + cur;
  5.     return res;
  6. }, 0);
  8. console.log(sum); // 22

2. 二维数组转一维

结合 concat实现数组扁平化

  1. const arr2 = [
  2.     [1, 2],
  3.     [3, 4],
  4.     [5, 6],
  5. ].reduce((acc, cur) => {
  6.     return acc.concat(cur);
  7. }, []);
  9. console.log(arr2); //

3. 多维数组扁平

这个算是上一个的进阶和更为通用的版本~
这篇文章里就用到了类似的，结合 concat 和递归

  1. const arr3 = [
  2.     [1, 2],
  3.     [3, 4],
  4.     [5, [7, [9, 10], 8], 6],
  5. ];
  6. const flatten = arr =>
  7.     arr.reduce(
  8.         (pre, cur) => pre.concat(Array.isArray(cur) ? flatten(cur) : cur),
  9.         []
  10.     );
  11. console.log(flatten(arr3)); // [ 1, 2, 3, 4, 5, 7, 9, 10, 8, 6 ]

4. 数组分块

根据传入限制大小，对数组进行分块。
小于限制长度时就往里添加，否则直接将其加入res

  1. const chunk = (arr, size) => {
  2.     return arr.reduce(
  3.         (res, cur) => (
  4.             res[res.length - 1].length < size
  5.                 ? res[res.length - 1].push(cur)
  6.                 : res.push([cur]),
  7.             res
  8.         ),
  9.         [[]]
  10.     );
  11. };
  12. const arr4 = [1, 2, 3, 4, 5, 6];
  13. console.log(chunk(arr4, 3)); // [ [ 1, 2, 3 ], [ 4, 5, 6 ] ]

5. 字符统计

统计文本中各个字的数量

  1. const countChar = text => {
  2.     text = text.split("");
  3.     return text.reduce((record, c) => {
  4.         record[c] = (record[c] || 0) + 1;
  5.         return record;
  6.     }, {});
  7. };
  8. const text = "划水水摸鱼鱼";
  9. console.log(countChar(text)); // { '划': 1, '水': 2, '摸': 1, '鱼': 2 }

思考

本文只讲了几个应用，其实还有更多的应用，以及一些实现 JS API 的功能，比如

  • 数组填充
  • 求最大、最小值
  • reverse
  • map
  • …

等等，这些代码段的整合网上已经有够多了，我这里想总结一下写出这些实用、通用的代码需要进行怎样的思考

core-js

其实从 Polyfill ofArray.prototype.reduceincore-js 中可以从另一个角度理解 reduce 中第一个参数回调函数中接收的第一个参数：

  1. class Array {
  2.   //...
  3.   reduce(callbackfn: (memo: any, value: any, index: number, target: any) => any, initialValue?: any): any;
  4.  //...
  5. }

他这里用的是 memo，中文直接翻译过来就是备忘录，在计算机中我们或许更为喜欢用缓存。我个人认为是更为符合我们写出好用的代码片段的。
他的精髓所在正是将回调函数作用于数组中的各个成员上，而上一次return的值就作为memo，传入到下一个之中，你可以在这里面逐一处理：

  • 不断更新迭代（累加）
  • 将结果拼接（扁平化）
  • 将特定的值添加到同一个对象之中（字符统计）

最后作为想要得到最终效果展现出来~

总结

比你想象中更强大的 reduce 以及对敲码的思考 - 图1
写代码，大概是这么几个节点

  1. 了解语法
    1. 传参
    2. 返回
  2. 真正领悟到语言的特性，并能将其运用到实际开发中，写出更好更简洁更实用的代码
  3. 多看：要从从这些代码段中以及网上各路好汉写的实用代码学习怎么样真正地像写诗一样写代码~
  4. 多写

第四步的多看，我感觉真的是收益匪浅，如果你有看源码的学习习惯，真的会学到很多~ 例如其实 Redux.compose中也用到了reduce。真的感觉有些代码，如果我从没有见到过，我绝对写不出来…

文中措辞、知识点、格式如有疑问或建议，欢迎评论~你对我很重要~ 🌊如果有所帮助，欢迎点赞关注，一起进步⛵这对我很重要~