reduce() 也能用來計算 Array 的 Length

實務中常見 Array 中都是 Object,而每個 Object 又有 Array,我們希望計算出每個 Array 全部的 item 個數。

Version


ECMAScript 5

Imperative


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const data = [
{
name: 'Sam',
products: [
'iPhone',
'iPad',
'AirPods',
],
},
{
name: 'John',
products: [
'Apple TV',
'Macbook',
],
}
];

let result = 0;
for(let i = 0; i < data.length; i++)
result += data[i].products.length;

console.log(result);

我們想要計算所有 products array 的 length 總和,首先建立 result 變數,再使用 for loop 將每個 products array 的 length 相加。

length000

Functional


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const data = [
{
name: 'Sam',
products: [
'iPhone',
'iPad',
'AirPods',
],
},
{
name: 'John',
products: [
'Apple TV',
'Macbook',
],
}
];

const reducer = (accm, item) => accm + item.products.length;
const result = data.reduce(reducer, 0);

console.log(result);

若結果為 單一值,則適合使用 reduce() 思考。

在 Imperative 寫法,我們必須先建立 result 變數,然後每個 loop 累加,在 reduce() 則稱為 accumulator,也就是 reducer() 的第一個參數 accm

reducer() 的第二個參數 item,則是每個 loop 所傳進得 item

因此 reducer() 的重點在於將 accumulator 與 array 的 length 相加。

length001

Conclusion


  • 若結果為 單一值,則適合使用 reduce() 思考
  • Accumulator 為每一個 loop 所累加的值,而 reducer 重點就是實現 Accumulator 與 item 的關係
  • 理論上所有的 for loop 都能使用 operator 實作,若沒有適合 operator,則一定能使用 reducer()
2018-12-16