Object Spread 既直覺又優雅

使用 map() 的目的就在於修改原來 Array 的 Object,實務上可能只有幾個 Property 需要修改,其他的 Property 都必須保留;若原本 Property 不多,重複輸入 Property 問題不大,但若 Property 很多,這會是一個很大的負擔。

Version


ECMAScript 2015

基本寫法


1
2
3
4
5
6
7
8
9
10
11
12
13
14
const data = [
{ id: 1, name: 'Sam', city: 'Taipei' },
{ id: 2, name: 'Kevin', city: 'Tokyo' },
{ id: 3, name: 'Mike', city: 'Chicago'},
];

const mapping = x => ({
id: x.id,
city: x.city,
name: `Mr. ${x.name}`
});

const result = data.map(mapping);
console.log(result);

我們希望對 name property 加上 Mr.,其他 property 都必須保留。

最基本的寫法就是將原本的 property 都照抄一遍。

map000

Object.assign()


1
2
3
4
5
6
7
8
9
10
11
12
13
14
const data = [
{ id: 1, name: 'Sam', city: 'Taipei' },
{ id: 2, name: 'Kevin', city: 'Tokyo' },
{ id: 3, name: 'Mike', city: 'Chicago'},
];

const mapping = x => {
const obj = Object.assign({}, x);
obj.name = `Mr. ${x.name}`;
return obj;
};

const result = data.map(mapping);
console.log(result);

使用 ECMAScript 2015 的 Object.assign() 複製一份新的 object,修改 property 之後,再 return 傳回。

map001

Object Spread


1
2
3
4
5
6
7
8
9
10
11
12
13
const data = [
{ id: 1, name: 'Sam', city: 'Taipei' },
{ id: 2, name: 'Kevin', city: 'Tokyo' },
{ id: 3, name: 'Mike', city: 'Chicago'},
];

const mapping = x => ({
...x,
name: `Mr. ${x.name}`
});

const result = data.map(mapping);
console.log(result);

使用 ECMAScript 2015 的 Object Spread 將 x object 展開,再加上 name property,將會蓋掉原本的 name property。

map002

Conclusion


  • Object Spread 無疑是最漂亮的寫法,既直覺又優雅

Reference


MDN, Object.assign
MDN, Spread syntax

2018-12-15