[[355931]]

相信不少初學者曾經都被 JavaScript 數組的 reduce方法困擾過，一直搞不明白到底怎么用。reduce方法是按順序對數組每個元素執行某個函數，這個函數接收上一次執行結果作為參數，并將結果傳給下一次調用。reduce方法用得好可以簡化復雜的邏輯，提高代碼可讀性。通過下面幾個例子可以幫你快速理解reduce的用法。

1.數字數組求和

這是reduce最常見的入門級例子。如果用傳統的for循環是這樣的：

function sum(arr) { 
  let sum = 0; 
  for (const val of arr) { 
    sum += val; 
  } 
  return sum; 
} 
 
sum([1, 3, 5, 7]); // 16 

如果用 reduce()：

function sum(arr) { 
  const reducer = (sum, val) => sum + val; 
  const initialValue = 0; 
  return arr.reduce(reducer, initialValue); 
} 
 
sum([1, 3, 5, 7]); // 16 

reduce()函數的第一個參數是一個reducer函數，第二個參數是初始值。在每個數組元素上執行reducer函數，第一個參數是“累進值”。累進值的初始值是initialValue，并且在每一輪調用后更新為reducer函數的返回值。

為了幫助理解，可以用for循環實現一個簡單的reduce()函數：

function reduce(arr, reducer, initialValue) { 
  let accumulator = initialValue; 
  for (const val of array) { 
    accumulator = reducer(accumulator, val); 
  } 
  return accumulator; 
} 

2.對象數組數字屬性值求和

單看 reduce() 本身，大家更多的感受是它的晦澀難懂，而不是有多好用。如果僅僅是為了給數字數組求和，用for循環可能來得更直觀。但是，當你把它跟其他數組方法(比如filter和map)結合使用時，才能感受到它的強大和方便。

舉個栗子，假設有個對象數組，每個對象都有個total屬性。對這些total求和：

const lineItems = [ 
  { description: 'Eggs (Dozen)', quantity: 1, price: 3, total: 3 }, 
  { description: 'Cheese', quantity: 0.5, price: 5, total: 2.5 }, 
  { description: 'Butter', quantity: 2, price: 6, total: 12 } 
]; 

用reduce可以這樣寫：

lineItems.reduce((sum, li) => sum + li.total, 0); // 17.5 

這樣是能得到最終結果，但是代碼的可組合性就沒那么好，可以做些優化，把total屬性提前提取出來：

lineItems.map(li => li.total).reduce((sum, val) => sum + val, 0); 

第二種方式為什么更好?因為這樣就可以把求和的邏輯抽象到一個單獨的函數sum()中，方便以后重用。

//匯總 total  
lineItems.map(li => li.total).reduce(sumReducer, 0); 
 
//  匯總 quantity 
lineItems.map(li => li.quantity).reduce(sumReducer, 0); 
 
function sumReducer(sum, val) { 
  return sum + val; 
} 

這種抽象比較重要，因為你覺得 sumReducer() 邏輯不會變，其實不然。比如，這個求和邏輯并沒有考慮到0.1 + 0.2 !== 0.3的問題。(參考 為什么 0.1 + 0.2 = 0.300000004)如果有了這個抽象，要修復這個缺陷就比較方便了。比如：

const { round } = require('lodash'); 
 
function sumReducer(sum, val) { 
  // 保留2位小數 
  return _.round(sum + val, 2); 
} 

3.求最大值

reduce()通常用來求和，但它的功能遠不止這個。累進值accumulator 可以是任意值：數字，null，undefined，數組，對象等。

舉個栗子，假設有個日期數組，要找出最近的一個日期：

const dates = [ 
  '2019/06/01', 
  '2018/06/01', 
  '2020/09/01', // 這個是最近日期，但是怎么找到它？ 
  '2018/09/01' 
].map(v => new Date(v)); 

一種方法是給數組排序，找最后一個值。看上去可行，但是效率沒那么高，并且用數組的默認方法給日期對象排序其實是有點小問題的。不只是日期對象，任何類型的值在sort()方法中比較，都會默認先轉成字符串比較，最終結果可能并不是你想要的。

const a = [4,1,13,2]; 
// 驚不驚喜，意不意外？ 
a.sort(); // [1, 13, 2, 4] 

這里就可以用reduce()來處理：

// 這里是用 `>` 和`<` 比較日期對象，因此不會有問題 
const maxDate = dates.reduce((max, d) => d > max ? d : max, dates[0]); 

4.分組計數

假設有個對象數組，每個對象上有個age屬性：

const characters = [ 
  { name: 'Tom', age: 59 }, 
  { name: 'Jack', age: 29 }, 
  { name: 'Bruce', age: 29 } 
]; 

怎樣返回一個對象，包含每個age的人物角色數量?比如這樣： { 29: 2, 59: 1 }.

用 reduce() 的實現方式如下：

const reducer = (map, val) => { 
  map[val] = map[val] || 1; 
  ++map[val]; 
  return map; 
}; 
characters.map(char => char.age).reduce(reducer, {}); 

5.Promise 動態鏈式調用

假設你有一個異步函數數組，想要按順序執行：

const functions = [ 
  async function() { return 1; }, 
  async function() { return 2; }, 
  async function() { return 3; } 
]; 

如果是靜態的Promise代碼，我們直接在代碼里鏈式調用就行了。但如果是動態的Promise數組，可以用reduce串起來：

// 最后 `res`的結果等價于`Promise.resolve().then(fn1).then(fn2).then(fn3)` 
const res = await functions. 
  reduce((promise, fn) => promise.then(fn), Promise.resolve()); 
res; // 3 

當然，reduce 能做的事情還有很多，它本質上是對數組元素執行某種“累進”操作，最終返回單個值。

本文轉載自微信公眾號「1024譯站」，可以通過以下二維碼關注。轉載本文請聯系1024譯站公眾號。