通過範例來了解JS 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/5-use-cases-for-reduce-in-javascript-61ed243b8fef
作者：wathsala danthasinghe

更多程式設計相關知識，請存取：！！

以上就是通過範例來了解JS reduce()方法的5個使用方法的詳細內容，更多請關注TW511.COM其它相關文章！