---
# System prepended metadata

title: Array.prototype.reduce()
tags: [JS直播班第19組, array]

---

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