###### 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)