神妙的 reduce() 用法

實務上 Object 的 Key 與 Value 可能來自各自的 Array,但 Function 要求傳入的是 Object,因此必須將兩個 Array 整合成單一 Object。

Version


ECMAScript 5

Imperative


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const keys = [
'Sam',
'Kevin',
'John'
];

const values = [
1,
2,
3
];

const obj = {};

for(let index = 0; index < keys.length; index++)
obj[keys[index]] = values[index];

console.log(obj);

分別有 keysvalues 兩個 array,Imperative 寫法就是很直覺地使用 for loop 建立 object。

reduce000

Functional


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const keys = [
'Sam',
'Kevin',
'John'
];

const values = [
1,
2,
3
];

const reducer = (obj, value, index) => ({...obj, [keys[index]]: value});
const obj = values.reduce(reducer, {});

console.log(obj);

相同的需求,若使用 Functional 寫法,就會使用 Array.prototype.reduce()

reduce() 其實有較少使用的第三個 argument:currentIndex,傳入目前 item 的 index。

...obj 為 ECMAScript 2015 的 Object Spread,將展開目前的 object。

1
[keys[index]]: value

乍看很 tricky,原本 [variable]: value 為新增 object 的一對 key / value,將 variable 以 keys[index] 取代而已。

reduce001

Conclusion


  • 若要將 array 轉成 object,則 reduce() 為標準思考方式

Reference


MDN, Array.prototype.reduce()

2018-11-27