JavaScript數組reduce總是不會用該怎么辦

JavaScript數組reduce總是不會用該怎么辦，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

相信不少初學者曾經都被 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 能做的事情還有很多，它本質上是對數組元素執行某種“累進”操作，最終返回單個值。

關于JavaScript數組reduce總是不會用該怎么辦問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。