Array.prototype.reduce() - JavaScript - MDN Web Docs

reduce() 執行的結果將會是 20 。

範例. 加總所有陣例之元素值. var sum = ... SkiptomaincontentSkiptosearchSkiptoselectlanguage給開發者的網頁技術文件JavaScriptJavaScript參考文件標準內建物件ArrayArray.prototype.reduce()ArticleActions正體中文(繁體)ThispagewastranslatedfromEnglishbythecommunity.LearnmoreandjointheMDNWebDocscommunity.Tryit語法描述範例Polyfill規範瀏覽器相容性參見RelatedTopicsStandardbuilt-inobjectsArrayPropertiesArray.prototype[@@unscopables](en-US)Array.prototype.lengthMethodsArray.prototype[@@iterator]()getArray[@@species](en-US) Experimental Array.prototype.at()(en-US)Array.prototype.concat()Array.prototype.copyWithin()Array.prototype.entries()Array.prototype.every()Array.prototype.fill()Array.prototype.filter()Array.prototype.find()Array.prototype.findIndex()Array.prototype.flat()Array.prototype.flatMap()(en-US)Array.prototype.forEach()Array.from() Experimental Array.prototype.groupBy()(en-US) Experimental Array.prototype.groupByToMap()(en-US)Array.prototype.includes()Array.prototype.indexOf()Array.isArray()Array.prototype.join()Array.prototype.keys()Array.prototype.lastIndexOf()Array.prototype.map()Array.of()Array.prototype.pop()Array.prototype.push()Array.prototype.reduce()Array.prototype.reduceRight()(en-US)Array.prototype.reverse()Array.prototype.shift()Array.prototype.slice()Array.prototype.some()Array.prototype.sort()Array.prototype.splice()Array.prototype.toLocaleString()(en-US) Non-Standard Array.prototype.toSource()(en-US)Array.prototype.toString()Array.prototype.unshift()Array.prototype.values()Inheritance:FunctionProperties Deprecated Function.arguments(en-US) Deprecated Function.caller(en-US) Non-Standard Function.displayName(en-US)Function.lengthFunction.name(en-US)MethodsFunction.prototype.apply()Function.prototype.bind()Function.prototype.call() Non-Standard Deprecated Function.prototype.toSource()(en-US)Function.prototype.toString()(en-US)ObjectPropertiesObject.prototype.constructor(en-US) Deprecated Object.prototype.__proto__Methods Deprecated Object.prototype.__defineGetter__()(en-US) Deprecated Object.prototype.__defineSetter__()(en-US) Deprecated Object.prototype.__lookupGetter__()(en-US) Deprecated Object.prototype.__lookupSetter__()(en-US)Object.prototype.hasOwnProperty()Object.prototype.isPrototypeOf()(en-US)Object.prototype.propertyIsEnumerable()(en-US)Object.setPrototypeOf()(en-US)Object.prototype.toLocaleString()(en-US) Non-Standard Deprecated Object.prototype.toSource()(en-US)Object.prototype.toString()(en-US)Object.prototype.valueOf()(en-US)Tryit語法描述範例Polyfill規範瀏覽器相容性參見Array.prototype.reduce()Tryit reduce()方法將一個累加器及陣列中每項元素（由左至右）傳入回呼函式，將陣列化為單一值。

語法arr.reduce(callback[accumulator,currentValue,currentIndex,array],initialValue)參數 callback 用於處理陣列中每個元素的函式，可傳入四個參數： accumulator 用來累積回呼函式回傳值的累加器（accumulator）或initialValue（若有提供的話，詳如下敘）。

累加器是上一次呼叫後，所回傳的累加數值。

currentValue 原陣列目前所迭代處理中的元素。

currentIndex選擇性 原陣列目前所迭代處理中的元素之索引。

若有傳入initialValue，則由索引0之元素開始，若無則自索引1之元素開始。

array選擇性 呼叫reduce()方法的陣列。

initialValue選擇性 於第一次呼叫callback時要傳入的累加器初始值。

若沒有提供初始值，則原陣列的第一個元素將會被當作初始的累加器。

假如於一個空陣列呼叫reduce()方法且沒有提供累加器初始值，將會發生錯誤。

回傳值簡化後的結果值。

描述reduce()會對每一個目前迭代到的陣列元素（除了空值以外）執行callback函式，回呼函式會接收四個參數： accumulator currentValue currentIndex array 當回呼函式第一次被呼叫時，accumulator與currentValue的值可能為兩種不同的狀況：若在呼叫reduce()時有提供initialValue，則accumulator將會等於initialValue，且currentValue會等於陣列中的第一個元素值；若沒有提供initialValue，則accumulator會等於陣列的第一個元素值，且currentValue將會等於陣列的第二個元素值。

備註：假如initialValue未被提供，reduce()將會跳過第一個陣列索引，從陣列索引1開始執行回呼函式。

若有提供initialValue，則會由陣列索引0開始執行。

若陣列為空且沒有提供initialValue，將會拋出TypeError。

假如陣列只有一個元素（無論其索引位置為何）並且沒有提供initialValue，或如果提供了initialValue但陣列為空，則此唯一的值將會被直接回傳而不會呼叫callback函式。

提供累加器初始值通常較為安全，因為在沒有傳入initialValue的情況下會有三種可能的輸出結果，如下列範例： varmaxCallback=(acc,cur)=>Math.max(acc.x,cur.x); varmaxCallback2=(max,cur)=>Math.max(max,cur); //reduce()withoutinitialValue [{x:22},{x:42}].reduce(maxCallback);//42 [{x:22}].reduce(maxCallback);//{x:22} [].reduce(maxCallback);//TypeError //map/reduce;bettersolution,alsoworksforemptyorlargerarrays [{x:22},{x:42}].map(el=>el.x) .reduce(maxCallback2,-Infinity); reduce()如何運作假設reduce()以下例方式使用： [0,1,2,3,4].reduce( function( accumulator, currentValue, currentIndex, array ){ returnaccumulator+currentValue; } ); 所傳入的回呼函式將被呼叫四次，所傳入的參數與回傳值如下所示： callback accumulator currentValue currentIndex array returnvalue firstcall 0 1 1 [0,1,2,3,4] 1 secondcall 1 2 2 [0,1,2,3,4] 3 thirdcall 3 3 3 [0,1,2,3,4] 6 fourthcall 6 4 4 [0,1,2,3,4] 10 reduce()的最終回傳值將會是最後一次呼叫回呼函式的回傳值(10)。

你也可以傳入一個箭頭函式來替代一個完整的函式。

下方的程式碼執行的結果將與前述例子相同。

[0,1,2,3,4].reduce((prev,curr)=>prev+curr); 如果你有提供第二個參數值給reduce()，執行的結果如下： [0,1,2,3,4].reduce( (accumulator,currentValue,currentIndex,array)=>{ returnaccumulator+currentValue; }, 10 ); callback accumulator currentValue currentIndex array returnvalue firstcall 10 0 0 [0,1,2,3,4] 10 secondcall 10 1 1 [0,1,2,3,4] 11 thirdcall 11 2 2 [0,1,2,3,4] 13 fourthcall 13 3 3 [0,1,2,3,4] 16 fifthcall 16 4 4 [0,1,2,3,4] 20 reduce()執行的結果將會是20。

範例加總所有陣例之元素值varsum=[0,1,2,3].reduce(function(a,b){ returna+b; },0); //sumis6 另外，也可以寫成箭頭函式： vartotal=[0,1,2,3].reduce( (acc,cur)=>acc+cur, 0 );攤平一個多維陣列varflattened=[[0,1],[2,3],[4,5]].reduce( function(a,b){ returna.concat(b); }, [] ); //flattenedis[0,1,2,3,4,5] 另外，也可以寫成箭頭函式： varflattened=[[0,1],[2,3],[4,5]].reduce( (acc,cur)=>acc.concat(cur), [] ); 計算相同元素數量並以物件鍵值顯示varnames=['Alice','Bob','Tiff','Bruce','Alice']; varcountedNames=names.reduce(function(allNames,name){ if(nameinallNames){ allNames[name]++; } else{ allNames[name]=1; } returnallNames; },{}); //countedNamesis: //{'Alice':2,'Bob':1,'Tiff':1,'Bruce':1} 使用spread運算子與給定初始值，結合物件中的陣列元素//friends-anarrayofobjects //whereobjectfield"books"-listoffavoritebooks varfriends=[{ name:'Anna', books:['Bible','HarryPotter'], age:21 },{ name:'Bob', books:['Warandpeace','RomeoandJuliet'], age:26 },{ name:'Alice', books:['TheLordoftheRings','TheShining'], age:18 }]; //allbooks-listwhichwillcontainallfriends'books+ //additionallistcontainedininitialValue varallbooks=friends.reduce(function(prev,curr){ return[...prev,...curr.books]; },['Alphabet']); //allbooks=[ //'Alphabet','Bible','HarryPotter','Warandpeace', //'RomeoandJuliet','TheLordoftheRings', //'TheShining' //]  移除陣列中的重複項目letarr=[1,2,1,2,3,5,4,5,3,4,4,4,4]; letresult=arr.sort().reduce((init,current)=>{ if(init.length===0||init[init.length-1]!==current){ init.push(current); } returninit; },[]); console.log(result);//[1,2,3,4,5] 序列執行Promise/** *Runspromisesfrompromisearrayinchainedmanner * *@param{array}arr-promisearr *@return{Object}promiseobject */ functionrunPromiseInSequense(arr){ returnarr.reduce((promiseChain,currentPromise)=>{ returnpromiseChain.then((chainedResult)=>{ returncurrentPromise(chainedResult) .then((res)=>res) }) },Promise.resolve()); } //promisefunction1 functionp1(){ returnnewPromise((resolve,reject)=>{ resolve(5); }); } //promisefunction2 functionp2(a){ returnnewPromise((resolve,reject)=>{ resolve(a*2); }); } //promisefunction3 functionp3(a){ returnnewPromise((resolve,reject)=>{ resolve(a*3); }); } constpromiseArr=[p1,p2,p3]; runPromiseInSequense(promiseArr) .then((res)=>{ console.log(res);//30 }); Polyfill//ProductionstepsofECMA-262,Edition5,15.4.4.21 //Reference:http://es5.github.io/#x15.4.4.21 //https://tc39.github.io/ecma262/#sec-array.prototype.reduce if(!Array.prototype.reduce){ Object.defineProperty(Array.prototype,'reduce',{ value:function(callback/*,initialValue*/){ if(this===null){ thrownewTypeError('Array.prototype.reduce'+ 'calledonnullorundefined'); } if(typeofcallback!=='function'){ thrownewTypeError(callback+ 'isnotafunction'); } //1.LetObe?ToObject(thisvalue). varo=Object(this); //2.Letlenbe?ToLength(?Get(O,"length")). varlen=o.length>>>0; //Steps3,4,5,6,7 vark=0; varvalue; if(arguments.length>=2){ value=arguments[1]; }else{ while(k=len){ thrownewTypeError('Reduceofemptyarray'+ 'withnoinitialvalue'); } value=o[k++]; } //8.Repeat,whilek