JavaScript中reduce()方法如何使用

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

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了麻陽免費建站歡迎大家使用！

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

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

回調(diào)函數(shù)

回調(diào)函數(shù)在數(shù)組的每個元素上執(zhí)行?；卣{(diào)函數(shù)的返回值是累加結(jié)果，并作為下一次調(diào)用回調(diào)函數(shù)的參數(shù)提供?；卣{(diào)函數(shù)帶有四個參數(shù)。

• Accumulator(累加器)——累加器累加回調(diào)函數(shù)的返回值。

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

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

• Source Array(源數(shù)組)

Current Index 和 Source Array 是可選的。

初始值

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

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

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

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.對數(shù)組的所有值求和

在下面的代碼中，studentResult 數(shù)組具有5個數(shù)字。使用 reduce() 方法，將數(shù)組減少為單個值，該值將 studentResult  數(shù)組的所有值和結(jié)果分配給 total。

const studentResult = [67, 90, 100, 37, 60];  const total = studentResult.reduce((accumulator, currentValue) => accumulator +currentValue, 0);  console.log(total); // 354

2.對象數(shù)組中的數(shù)值之和

通常，我們從后端獲取數(shù)據(jù)作為對象數(shù)組，因此，reduce() 方法有助于管理我們的前端邏輯。在下面的代碼中，studentResult  對象數(shù)組有三個科目，這里，currentValue.marks 取了 studentResult 對象數(shù)組中每個科目的分數(shù)。

const studentResult = [   { subject: '數(shù)學(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.展平數(shù)組

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

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.按屬性分組對象

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

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

5.刪除數(shù)組中的重復(fù)項

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

上述內(nèi)容就是JavaScript中reduce()方法如何使用，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標題：JavaScript中reduce()方法如何使用
文章轉(zhuǎn)載：http://bm7419.com/article30/gihpso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、微信小程序、網(wǎng)站導(dǎo)航、品牌網(wǎng)站設(shè)計、云服務(wù)器、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)