善用 Object Destructuring 會讓 Code 可讀性更高

ECMAScript 2015 提供了很有創意的 Object Destructuring,原本需要好幾行才能完成的 code,只需要一行就能解決。

Version


ECMAScript 2015

Basic Assignment


1
2
3
4
5
6
7
8
9
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};

const firstName = obj.firstName;
const lastName = obj.lastName;

console.log(firstName, lastName);

objfirstNamelastName 兩個 property,想建立兩個變數也是 firstNamelastName,ECMAScript 5 寫法必須要 2 行。

1
2
3
4
5
6
7
8
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};

const { firstName, lastName } = obj;

console.log(firstName, lastName);

ECMAScript 2015 將變數名稱直接寫在 object literal 內,object 會依照變數名稱去尋找 object 的 property key,直接分解到變數,只需 1 行。

object000

1
2
3
4
5
6
7
8
9
10
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};

let firstName = '';
let lastName = '';
({ firstName, lastName } = obj);

console.log(firstName, lastName);

也可以先宣告變數,在由 Object Destructuring 分解,不過這種寫法時,必須加上 (),因為 {}= 左側時,會被誤認為 block 而非 Object Literal,導致語法錯誤。

object001

New Variable Name


1
2
3
4
5
6
7
8
9
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};

const givenName = obj.firstName;
const familyName = obj.lastName;

console.log(givenName, familyName);

若變數名稱與 object 的 property key 不同,在 ECMAScript 5 必須要 2 行。

1
2
3
4
5
6
7
8
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};

const { firstName: givenName, lastName: familyName } = obj;

console.log(givenName, familyName);

在 ECMAScript 2015 的 Object Destruction 分解成變數時,預設變數名稱與 property key 相同,若要改變變數名稱,可加上 :,並在 : 右側加上新的變數名稱。

object002

Cloning Object


1
2
3
4
5
6
7
8
9
const obj1 = {
firstName: 'Sam',
lastName: 'Xiao',
};

const obj2 = obj1;

console.log(obj2);
console.log(obj2 === obj1);

若要複製 object,直覺會使用 =,但這只是將 reference 加以複製,所以 obj1obj2 指向同一個 object,而不是真的複製 object。

object012

1
2
3
4
5
6
7
8
const obj1 = {
firstName: 'Sam',
lastName: 'Xiao',
};
const obj2 = Object.assign({}, obj1);

console.log(obj2);
console.log(obj2 === obj1);

ECMAScript 5 可使用 Object.assign() 將 object 加以複製,assign() 是真的回傳一個新的 object,而非指向同一個 object。

object013

1
2
3
4
5
6
7
8
9
const obj1 = {
firstName: 'Sam',
lastName: 'Xiao',
};

const {...obj2} = obj1;

console.log(obj2);
console.log(obj2 === obj1);

ECMAScript 2015 則有新的寫法,Object Destructuring 配合 ... spread operator,其結果等同於 ECMAScript 5 的 Object.assign()

object014

Function Parameter


1
2
3
4
5
6
7
8
9
10
11
12
13
14
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};

const func = function(args) {
const firstName = args.firstName;
const lastName = args.lastName;

console.log(firstName, lastName);

};

func(obj);

若 parameter 為 object,在 ECMAScript 會使用 . 的方式存取 property key,需要 2 行。

1
2
3
4
5
6
7
8
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};

const func = ({ firstName, lastName }) => console.log(firstName, lastName);

func(obj);

在 ECMAScript 2015 可在 parameter 使用 Object Destructuring,直接在 parameter list 分解成變數。

雖然只是一個 object,但若使用 Arrow Function 時,仍須加上 () 將 array 刮起來。

object004

1
2
3
4
5
6
7
8
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};

const func = ({ firstName, lastName, age = 20 }) => console.log(firstName, lastName, age);

func(obj);

若想提供 default value 也行,在 = 之後提供 default value 即可。

object005

1
2
3
4
5
6
7
8
9
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};

const func = ({ firstName: givenName, lastName: familyName, age = 20 }) =>
console.log(givenName, familyName, age);

func(obj);

若想同時改變 parameter 名稱,並提供 default value,也可以同時寫在 parameter list。

object006

1
2
3
4
5
6
7
8
9
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};

const func = ({ firstName = 'John', lastName = 'Doe', age = 20 } = {}) =>
console.log(firstName, lastName, age);

func();

若 object 是 optional parameter,可加上 =,並在右側加上 {}

object007

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};

const func = (args = {}) => {
const {
firstName = 'John',
lastName = 'Doe',
age = 20,
} = args;

console.log(firstName, lastName, age);
};

func();

若要分解的 parameter 太多,通通寫在 parameter list 導致可讀性不佳,其實可考慮在 parameter list 只寫 optional parameter,而 Object Destructuring 與 default value 寫在 function body。

object008

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const obj = {
id: 1,
name: 'Sam',
scores: {
math: 90,
english: 80,
},
};

const func = function(args) {
const id = args.id;
const name = args.name;
const math = args.scores.math;
const english = args.scores.english;

console.log(id, name, math, english);
};


func(obj);

若 parameter 為 nested object,在 ECMAScript 5 必須一一分解變數,需要 4 行。

1
2
3
4
5
6
7
8
9
10
11
12
13
const obj = {
id: 1,
name: 'Sam',
scores: {
math: 90,
english: 80,
},
};

const func = ({ id, name, scores: { math, english }}) =>
console.log(id, name, math, english);

func(obj);

ECMAScript 2015 也可直接在 parameter list 分解 nested object。

object009

Function Return Object


1
2
3
4
5
6
7
8
9
10
11
12
const func = function() {
return {
firstName: 'Sam',
lastName: 'Xiao',
};
};

const result = func();
const firstName = result.firstName;
const lastName = result.lastName;

console.log(firstName, lastName);

若 function 回傳 object,要將 object 每個 property 指定到變數,在 ECMAScript 會使用 . 的方式存取 property key,需要 2 行。

1
2
3
4
5
6
7
8
const func = () => ({
firstName: 'Sam',
lastName: 'Xiao',
});

const { firstName, lastName } = func();

console.log(firstName, lastName);

在 ECMAScript 2015 可使用 Object Destructuring 接收 function 回傳的 object,會自動分解成變數。

object010

1
2
3
4
5
6
7
8
const func = () => ({
firstName: 'Sam',
lastName: 'Xiao',
});

const { firstName } = func();

console.log(firstName);

若並不想分解 function 所傳回的全部 property,可在 {} 寫要分解的變數即可。

object011

1
2
3
4
5
6
7
8
9
10
11
const func = () => ({
firstName: 'Sam',
lastName: 'Xiao',
age: 20,
gender: 'Male',
});

const { firstName, lastName, ...info } = func();

console.log(firstName, lastName);
console.log(info);

若 function 回傳的 object,想部分也分解成 object,可搭配 ... rest operator。

但這種寫法必須寫在 Object Destructuring 的最後才行

Conclusion


  • Object Destructing 的基本精神就是 一個蘿蔔一個坑,ECMAScript 2015 會自動將 object 的 property 分解到變數
  • : 左側為 property key,右側為新的變數名稱,可搭配 = 設定 default value
  • Object Destruncturing 配合 Spread Operator,可以取代原本 Object.assign() 才能複製 object
  • Object Destructuring 配合 function parameter 特別好用,可以直接在 parameter list 中就分解 parameter,還可搭配 default value
  • Object Destructuring 可將 function 回傳的 object 直接分解到變數

Reference


MDN, Destructuring assignment
Glad Chinda, ES6 Destructuring: The Complete Guide

2018-12-23