###### tags: `JS直播班第19組` , `array` Array.prototype.reduce() == > **reduce()** 方法將一個累加器及陣列中每項元素(由左至右)傳入回呼函式,將陣列化為單一值。 > [name=MDN] - 相似方法:reduceRight() 為由右至左傳入。 ## 使用方法 ```javascript= // 箭頭函式 reduce((acc, cur, index, array) => { ... }, initialValue) // 一般函式 reduce(function(acc, cur, index, array) { ... }, initialValue) ``` | 參數 | 說明 | | -------- | -------- | |acc|accumulator 累加器,前次呼叫後所回傳的累加數值。| |cur|currentValue 目前處理中的元素值。| |index|索引 (選擇性),目前處理中的元素索引;若有傳入初始值,則由索引 0 之元素開始,若無則自索引 1 之元素開始。| |array|陣列 (選擇性),呼叫 reduce() 方法的陣列。| |initialValue|初始值 (選擇性),於第一次呼叫時要傳入的累加器初始值;若無則陣列的第一個元素會被當作初始的累加器。| ## 應用範例 ### 基本累加功能 ```javascript= let age = [15, 21, 33, 48, 57]; let sumAge = age.reduce((acc, cur) => { acc += cur return acc }, 0); console.log(sumAge); // 174 ``` ### 實現 map 功能 ```javascript= let price = [100, 150, 200, 350, 400]; let discountPrice = price.reduce((acc, cur) => { acc.push(cur * 0.8) return acc }, []); console.log(discountPrice); // [80, 120, 160, 280, 320] ``` ### 實現 filter 篩選功能 ```javascript= let weight = [50, 91, 66, 70, 83]; let overWeight = weight.reduce((acc, cur) => { if (cur >= 80) { acc.push(cur) } return acc }, []); console.log(overWeight); // [91, 83] ``` ### 實現資料統計功能 ```javascript= let food = ['牛肉麵', '蛋餅', '花椰菜', '奶茶', '義大利麵', '牛肉麵', '蛋餅']; let foodCount = food.reduce((acc, cur) => { // 如果 acc 物件中有 cur 這個屬性,則重新賦值 +1;沒有則賦予值為 1 // acc = {'牛肉麵': 1},acc['牛肉麵']+=1 if (acc.hasOwnProperty(cur)) { acc[cur] += 1; } else { acc[cur] = 1; }; return acc; }, {}); console.log(foodCount); // {'牛肉麵': 2, '蛋餅': 2, '花椰菜': 1, '奶茶': 1, '義大利麵': 1} ``` ### 實現比較大小功能 ```javascript= let num = [ 12,2,35,4,5555] let maxNum = num.reduce((acc, cur)=>{ // 三元運算式:當()中為 true 時執行 ? 後的動作,false 則執行 : 後的動作 // 12 > 2 為 true,回傳 12。 // 12 > 35 為 false,回傳 35。 return ( acc > cur ) ? acc : cur; }); console.log(maxNum); // 5555 ``` ## 參考資料 - [MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) - [JavaScript reduce function](https://ithelp.ithome.com.tw/articles/10243053) - [JavaScript Day 14. 靈活運用 reduce()](https://ithelp.ithome.com.tw/articles/10269670) - [JavaScript - Array 陣列 - 06. 陣列方法 - map, filter, reduce, and reduceRight](https://ithelp.ithome.com.tw/articles/10272789)