reduce() 也能用在合併 Array

在實務中 Array 中的 Array 也很常見,但為了好用起見,我們常會先合併成單一 Array,再繼續後續的操作。

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
24
const data = [
{
name: 'Sam',
products: [
'iPhone',
'iPad',
'AirPods',
],
},
{
name: 'John',
products: [
'Apple TV',
'Macbook',
],
}
];

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

console.log(result);

Array 的 item 都各自有 products array,希望將所有 products array 合併成單一層 array。

先建立 result empty array,再使用 for loop 將每個 products array 加以 concat()

single000

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.concat(item.products);
const result = data.reduce(reducer, []);

console.log(result);

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

由於我們想合併為單一 array,也是 單一值,因此也適用 reduce()

在 Imperative 寫法,我們必須建立 result empty array,然後每個 loop 去 concat() array,這相當於 reduce() 的 accumulator,也就是 reducer() 的第一個參數 accm

reducer() 的第二個參數 item,則是每個 loop 所傳進的 item,而 item.products 才是 array,最後透過 concat() 合併 array。

由於結果是 array,因此 reduce() 的第二個參數傳進 [] empty array。

single001

Conclusion


  • reduce() 不再只是用在求 sum 而已,只要結果是 單一值 都適用
  • 因為 單一 array 也是 單一值,因此也適用 reduce()
2018-12-16