小編給大家分享一下JavaScript reduce的使用示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)公司主要從事網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)莆田,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):18982081108
reduce()方法對(duì)數(shù)組中的每一個(gè)元素執(zhí)行一個(gè)reducer函數(shù)(由你提供)，從而得到一個(gè)單一的輸出值。
reduce() 方法將一個(gè)數(shù)組中的所有元素還原成一個(gè)單一的輸出值，輸出值可以是數(shù)字、對(duì)象或字符串。 reduce() 方法有兩個(gè)參數(shù)，第一個(gè)是回調(diào)函數(shù)，第二個(gè)是初始值。
回調(diào)函數(shù)在數(shù)組的每個(gè)元素上執(zhí)行?；卣{(diào)函數(shù)的返回值是累加結(jié)果，并作為下一次調(diào)用回調(diào)函數(shù)的參數(shù)提供。回調(diào)函數(shù)帶有四個(gè)參數(shù)。
Accumulator（累加器）——累加器累加回調(diào)函數(shù)的返回值。
Current Value（當(dāng)前值）——處理數(shù)組的當(dāng)前元素。
Current Index（當(dāng)前索引）——處理數(shù)組當(dāng)前元素的索引。
Source Array（源數(shù)組）
Current Index 和 Source Array 是可選的。
如果指定了初始值，則將累加器設(shè)置為 initialValue 作為初始元素。否則，將累加器設(shè)置為數(shù)組的第一個(gè)元素作為初始元素。
arr.reduce(callback(accumulator, currentValue[,index[,array]])[, initialValue])
在下面的代碼片段中，第一個(gè)累加器(accumulator)被分配了初始值0。currentValue 是正在處理的 numbersArr 數(shù)組的元素。在這里，currentValue 被添加到累加器，在下次調(diào)用回調(diào)函數(shù)時(shí)，會(huì)將返回值作為參數(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
在下面的代碼中，studentResult 數(shù)組具有5個(gè)數(shù)字。使用 reduce() 方法，將數(shù)組減少為單個(gè)值，該值將 studentResult 數(shù)組的所有值和結(jié)果分配給 total。
const studentResult = [67, 90, 100, 37, 60]; const total = studentResult.reduce((accumulator, currentValue) => accumulator +currentValue, 0); console.log(total); // 354
通常，我們從后端獲取數(shù)據(jù)作為對(duì)象數(shù)組，因此，reduce() 方法有助于管理我們的前端邏輯。在下面的代碼中，studentResult 對(duì)象數(shù)組有三個(gè)科目，這里，currentValue.marks 取了 studentResult 對(duì)象數(shù)組中每個(gè)科目的分?jǐn)?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“展平數(shù)組”是指將多維數(shù)組轉(zhuǎn)換為一維。在下面的代碼中，twoDArr 2維數(shù)組被轉(zhuǎn)換為 oneDArr 一維數(shù)組。此處，第一個(gè) [1,2] 數(shù)組分配給累加器 accumulator，然后 twoDArr 數(shù)組的其余每個(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 ]
根據(jù)對(duì)象的屬性，我們可以使用 reduce() 方法將對(duì)象數(shù)組分為幾組。通過(guò)下面的代碼片段，你可以清楚地理解這個(gè)概念。這里，result 對(duì)象數(shù)組有五個(gè)對(duì)象，每個(gè)對(duì)象都有 subject 和 marks 屬性。如果分?jǐn)?shù)大于或等于50，則該主題通過(guò)，否則，主題失敗。
reduce() 用于將結(jié)果分組為通過(guò)和失敗。首先，將 initialValue 分配給累加器，然后 push() 方法在檢查條件之后將當(dāng)前對(duì)象添加到 pass 和 fail 屬性中作為對(duì)象數(shù)組。
const result = [
{subject: '物理', marks: 41},
{subject: '化學(xué)', marks: 59},
{subject: '高等數(shù)學(xué)', marks: 36},
{subject: '應(yīng)用數(shù)學(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: ‘應(yīng)用數(shù)學(xué)’, marks: 90 },
{ subject: ‘英語(yǔ)’, marks: 64 }
],
fail: [
{ subject: ‘物理’, marks: 41 },
{ subject: ‘高等數(shù)學(xué)’, marks: 36 }
]
}在下面的代碼片段中，刪除了 plicatedArr 數(shù)組中的重復(fù)項(xiàng)。首先，將一個(gè)空數(shù)組分配給累加器作為初始值。accumulator.includes() 檢查 duplicatedArr 數(shù)組的每個(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以上是“JavaScript reduce的使用示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
