比你想象中更強大的 reduce 以及對敲碼的思考

前言
前面的這篇文章 JS 基礎\! | 扁平數(shù)組和JSON樹的轉(zhuǎn)換[2] 利用到了 reduce來實現(xiàn)數(shù)組轉(zhuǎn)為map，以及結合concat實現(xiàn)數(shù)組遞歸拼接。今天我們來看看還能搞些什么名堂~

簡單復習一下 reduce
語法
let value = arr.reduce(function(previousValue, item, index, array) {
  // ...
}, [initial]);

參數(shù)：
previousValue: 上一個函數(shù)調(diào)用的結果，第一次等于 initial（如果提供了 initial 的話）。
item : 當前的數(shù)組元素。
index :當前索引。
arr : 數(shù)組本身。
previousValue實際上有點像累加，所以一些地方也會叫將這個參數(shù)稱為accumulator ，存儲前面所有的執(zhí)行結果，最后會成為reduce的結果。

可讀性
但通常，你一般是不會完全參照這些參數(shù)定義的意思來決定參數(shù)名稱，而是要看具體開發(fā)遇到的場景來給其取可讀性高的名稱。

部分應用
1. 經(jīng)典累加器
將數(shù)組中的值從左到右累加，大家學reduce的時候第一個例子應該就是這個。這里只是簡單的提一下，不是本文的重點~

const a = [1, 2, 8, 7, 4];

const sum = a.reduce((pre, cur) => {
 const res = pre + cur;
 return res;
}, 0);

console.log(sum); // 22

2. 二維數(shù)組轉(zhuǎn)一維
結合 concat 實現(xiàn)數(shù)組扁平化

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

console.log(arr2); //

3. 多維數(shù)組扁平
這個算是上一個的進階和更為通用的版本~
這篇文章[3]里就用到了類似的，結合 concat 和遞歸

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






4. 數(shù)組分塊
根據(jù)傳入限制大小，對數(shù)組進行分塊。
小于限制長度時就往里添加，否則直接將其加入res

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

5. 字符統(tǒng)計
統(tǒng)計文本中各個字的數(shù)量

const countChar = text => {
 text = text.split("");
 return text.reduce((record, c) => {
  record[c] = (record[c] || 0) + 1;
  return record;
 }, {});
};
const text = "劃水水摸魚魚";
console.log(countChar(text)); // { '劃': 1, '水': 2, '摸': 1, '魚': 2 }

思考
本文只講了幾個應用，其實還有更多的應用，以及一些實現(xiàn) JS API 的功能，比如

數(shù)組填充
求最大、最小值
reverse
map
...
等等，這些代碼段的整合網(wǎng)上已經(jīng)有夠多了，我這里想總結一下寫出這些實用、通用的代碼需要進行怎樣的思考

core-js
其實從 Polyfill ofArray.prototype.reduceincore-js[4] 中可以從另一個角度理解 reduce 中第一個參數(shù)回調(diào)函數(shù)中接收的第一個參數(shù)：

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

他這里用的是 memo，中文直接翻譯過來就是備忘錄，在計算機中我們或許更為喜歡用緩存。我個人認為是更為符合我們寫出好用的代碼片段的。
他的精髓所在正是將回調(diào)函數(shù)作用于數(shù)組中的各個成員上，而上一次return的值就作為memo，傳入到下一個之中，你可以在這里面逐一處理：

不斷更新迭代（累加）
將結果拼接（扁平化）
將特定的值添加到同一個對象之中（字符統(tǒng)計）
最后作為想要得到最終效果展現(xiàn)出來~

總結



寫代碼，大概是這么幾個節(jié)點

了解語法
傳參
返回
真正領悟到語言的特性，并能將其運用到實際開發(fā)中，寫出更好更簡潔更實用的代碼
多看：要從從這些代碼段中以及網(wǎng)上各路好漢寫的實用代碼學習怎么樣真正地像寫詩一樣寫代碼~
多寫
第四步的多看，我感覺真的是收益匪淺，如果你有看源碼的學習習慣[5]，真的會學到很多~ 例如其實 Redux.compose中也用到了reduce。真的感覺有些代碼，如果我從沒有見到過，我絕對寫不出來...

關于本文

來自：前舟

https://juejin.cn/post/7102591881204203557


作者：前舟


歡迎關注微信公眾號 ：前端Q