JavaScript中的reduce()的5個用例

reduce()方法對數組中的每個元素執行一個reducer函數(由你提供)，從而獲得一個單一的輸出值。

reduce() 方法將一個數組中的全部元素還原成一個單一的輸出值，輸出值能夠是數字、對象或字符串。 reduce() 方法有兩個參數，第一個是回調函數，第二個是初始值。

回調函數

回調函數在數組的每一個元素上執行。回調函數的返回值是累加結果，並做爲下一次調用回調函數的參數提供。回調函數帶有四個參數。

• Accumulator（累加器）——累加器累加回調函數的返回值。
• Current Value（當前值）——處理數組的當前元素。
• Current Index（當前索引）——處理數組當前元素的索引。
• Source Array（源數組）

Current Index 和 Source Array 是可選的。

初始值

若是指定了初始值，則將累加器設置爲 initialValue 做爲初始元素。不然，將累加器設置爲數組的第一個元素做爲初始元素。

arr.reduce(callback(accumulator, currentValue[,index[,array]])[, initialValue])

在下面的代碼片斷中，第一個累加器(accumulator)被分配了初始值0。currentValue 是正在處理的 numbersArr 數組的元素。在這裏，currentValue 被添加到累加器，在下次調用回調函數時，會將返回值做爲參數提供。

const numbersArr = [67, 90, 100, 37, 60];

const total = numbersArr.reduce(function(accumulator, currentValue){
    console.log("accumulator is " + accumulator + " current value is " + currentValue);
    return accumulator + currentValue;
}, 0);

console.log("total : "+ total);

輸出

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

JavaScript reduce用例

1.對數組的全部值求和

在下面的代碼中，studentResult 數組具備5個數字。使用 reduce() 方法，將數組減小爲單個值，該值將 studentResult 數組的全部值和結果分配給 total。

const studentResult = [67, 90, 100, 37, 60];

const total = studentResult.reduce((accumulator, currentValue) => accumulator +currentValue, 0);

console.log(total); // 354

2.對象數組中的數值之和

一般，咱們從後端獲取數據做爲對象數組，所以，reduce() 方法有助於管理咱們的前端邏輯。在下面的代碼中，studentResult 對象數組有三個科目，這裏，currentValue.marks 取了 studentResult 對象數組中每一個科目的分數。

const studentResult = [
  { subject: '數學', marks: 78 },
  { subject: '物理', marks: 80 },
  { subject: '化學', marks: 93 }
];

const total = studentResult.reduce((accumulator, currentValue) => accumulator + currentValue.marks, 0);

console.log(total); // 251

3.展平數組

「展平數組」是指將多維數組轉換爲一維。在下面的代碼中，twoDArr 2維數組被轉換爲 oneDArr 一維數組。此處，第一個 [1,2] 數組分配給累加器 accumulator，而後 twoDArr 數組的其他每一個元素都鏈接到累加器。

const twoDArr = [ [1,2], [3,4], [5,6], [7,8] , [9,10] ];

const oneDArr = twoDArr.reduce((accumulator, currentValue) => accumulator.concat(currentValue));

console.log(oneDArr);
// [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

4.按屬性分組對象

根據對象的屬性，咱們可使用 reduce() 方法將對象數組分爲幾組。經過下面的代碼片斷，你能夠清楚地理解這個概念。這裏，result 對象數組有五個對象，每一個對象都有 subject 和 marks 屬性。若是分數大於或等於50，則該主題經過，不然，主題失敗。 reduce() 用於將結果分組爲經過和失敗。首先，將 initialValue 分配給累加器，而後 push() 方法在檢查條件以後將當前對象添加到 pass 和 fail 屬性中做爲對象數組。

const result = [
  {subject: '物理', marks: 41},
  {subject: '化學', marks: 59},
  {subject: '高等數學', marks: 36},
  {subject: '應用數學', marks: 90},
  {subject: '英語', marks: 64},
];

let initialValue = {
  pass: [], 
  fail: []
}

const groupedResult = result.reduce((accumulator, current) => {
  (current.marks >= 50) ? accumulator.pass.push(current) : accumulator.fail.push(current);
  return accumulator;
}, initialValue);

console.log(groupedResult);

輸出

{
 pass: [
  { subject: ‘化學’, marks: 59 },
  { subject: ‘應用數學’, marks: 90 },
  { subject: ‘英語’, marks: 64 }
 ],
 fail: [
  { subject: ‘物理’, marks: 41 },
  { subject: ‘高等數學’, marks: 36 }
 ]
}

5.刪除數組中的重複項

在下面的代碼片斷中，刪除了 plicatedArr 數組中的重複項。首先，將一個空數組分配給累加器做爲初始值。accumulator.includes() 檢查 duplicatedArr 數組的每一個元素是否已經在累加器中可用。若是 currentValue 在累加器中不可用，則使用 push() 將其添加。

const duplicatedsArr = [1, 5, 6, 5, 7, 1, 6, 8, 9, 7];

const removeDuplicatedArr = duplicatedsArr.reduce((accumulator, currentValue) => {
  if(!accumulator.includes(currentValue)){
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);

console.log(removeDuplicatedArr);
// [ 1, 5, 6, 7, 8, 9 ]

總結

在本文中，咱們討論了數組 reduce() 方法。首先介紹 reduce() 方法，而後，使用一個簡單的示例討論其行爲。最後，經過示例討論了 reduce() 方法最多見的五個用例。若是你是JavaScript的初學者，那麼本文將對你有所幫助。

---

來源：https://medium.com/javascript-in-plain-english，做者：wathsala danthasinghe，翻譯：公衆號《前端全棧開發者》