JavaScript中reduce()方法如何使用

本篇文章為大家展示了JavaScript中reduce()方法如何使用，內容簡(jiǎn)明扼要并且容易理解，絕對能使你眼前一亮，通過(guò)這篇文章的詳細介紹希望你能有所收獲。

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

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

回調函數

回調函數在數組的每個(gè)元素上執行?；卣{函數的返回值是累加結果，并作為下一次調用回調函數的參數提供?；卣{函數帶有四個(gè)參數。

• Accumulator(累加器)——累加器累加回調函數的返回值。

• Current Value(當前值)——處理數組的當前元素。

• Current Index(當前索引)——處理數組當前元素的索引。

• Source Array(源數組)

Current Index 和 Source Array 是可選的。

初始值

如果指定了初始值，則將累加器設置為 initialValue 作為初始元素。否則，將累加器設置為數組的第一個(gè)元素作為初始元素。

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

在下面的代碼片段中，第一個(gè)累加器(accumulator)被分配了初始值0。currentValue是正在處理的 numbersArr  數組的元素。在這里，currentValue 被添加到累加器，在下次調用回調函數時(shí)，會(huì )將返回值作為參數提供。

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個(gè)數字。使用 reduce() 方法，將數組減少為單個(gè)值，該值將 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  對象數組有三個(gè)科目，這里，currentValue.marks 取了 studentResult 對象數組中每個(gè)科目的分數。

const studentResult = [   { subject: '數學(xué)', marks: 78 },   { subject: '物理', marks: 80 },   { subject: '化學(xué)', marks: 93 } ];  const total = studentResult.reduce((accumulator, currentValue) => accumulator + currentValue.marks, 0);  console.log(total); // 251

3.展平數組

“展平數組”是指將多維數組轉換為一維。在下面的代碼中，twoDArr 2維數組被轉換為oneDArr 一維數組。此處，第一個(gè) [1,2] 數組分配給累加器  accumulator，然后 twoDArr 數組的其余每個(gè)元素都連接到累加器。

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() 方法將對象數組分為幾組。通過(guò)下面的代碼片段，你可以清楚地理解這個(gè)概念。這里，result  對象數組有五個(gè)對象，每個(gè)對象都有 subject 和 marks 屬性。如果分數大于或等于50，則該主題通過(guò)，否則，主題失敗。reduce()  用于將結果分組為通過(guò)和失敗。首先，將 initialValue 分配給累加器，然后 push() 方法在檢查條件之后將當前對象添加到 pass 和 fail  屬性中作為對象數組。

const result = [   {subject: '物理', marks: 41},   {subject: '化學(xué)', marks: 59},   {subject: '高等數學(xué)', marks: 36},   {subject: '應用數學(xué)', marks: 90},   {subject: '英語(yǔ)', 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: ‘化學(xué)’, marks: 59 },   { subject: ‘應用數學(xué)’, marks: 90 },   { subject: ‘英語(yǔ)’, marks: 64 }  ],  fail: [   { subject: ‘物理’, marks: 41 },   { subject: ‘高等數學(xué)’, marks: 36 }  ] }

5.刪除數組中的重復項

在下面的代碼片段中，刪除了 plicatedArr 數組中的重復項。首先，將一個(gè)空數組分配給累加器作為初始值。accumulator.includes()  檢查 duplicatedArr 數組的每個(gè)元素是否已經(jīng)在累加器中可用。如果 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 ]