實務上常見的應用

實務上從 API 獲得的資料,可能只有 id,並沒有實際的 value,我們必須在 map() 內自行將 id 轉換成 value。

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
25
26
27
28
29
30
const data = [
{id: 1, name: 'Sam', cityId: 1},
{id: 2, name: 'Kevin', cityId: 2},
{id: 3, name: 'Mike', cityId: 3},
];

let result = [];
for (let i = 0; i < data.length; i++) {
let city = '';
switch (data[i].cityId) {
case 1:
city = 'Taipei'
break;
case 2:
city = 'Tokyo';
break;
case 3:
city = 'Chicage';
break;
}

result.push({
id: data[i].id,
name: data[i].name,
cityId: data[i].cityId,
city: city,
});
}

console.log(result);

使用 Imperative 寫法,我們會使用 for loop

cityId 轉換成 city 部分,會使用 switch case,最後在使用 Array.push() 將新的 object 塞進 result array。

map000

Functional


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const data = [
{ id: 1, name: 'Sam', cityId: 1 },
{ id: 2, name: 'Kevin', cityId: 2 },
{ id: 3, name: 'Mike', cityId: 3 },
];

const cityMap = {
1: 'Taipei',
2: 'Tokyo',
3: 'Chicago',
};

const result = data.map(x => ({
...x,
city: cityMap[x.cityId],
}));

console.log(result);

Functional 寫法會透過 map()

cityId 轉換成 city 部分,由於 ECMAScript object 的 key / value 特性,將 switch case 改用 object 改寫。

map001

Conclusion


  • 再次證明 Functional 寫法比 Imperative 可讀性更高,程式碼也更加精簡
  • 由於 ECMAScript 特殊的 object 語言特性,switch case 可使用更精簡的 object 改寫
2018-12-16