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

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

Version


ECMAScript 2015

Basic Assignment


1
2
3
4
5
6
7
const data = [1, 2, 3];

const a = data[0];
const b = data[1];
const c = data[2];

console.log(a, b, c);

data array 有 3 個 element,想分別指定到 abc 變數,ECMAScript 5 寫法必須要 3 行。

1
2
3
4
5
const data = [1, 2, 3];

const [a, b, c] = data;

console.log(a, b, c);

ECMAScript 2015 將 abc 直接寫在 [] 內,data array 會依照順序直接分解到變數,只需 1 行。

array000

Swapping Variable


1
2
3
4
5
6
7
8
9
let a = 1;
let b = 2;

let temp = a;
a = b;
b = temp;

console.log(a);
console.log(b);

若要兩個變數內容交換,在 ECMAScript 5 會另外建立 temp 暫存變數,需要 3 行。

1
2
3
4
5
6
7
let a = 1;
let b = 2;

[b, a] = [a, b];

console.log(a);
console.log(b);

ECMAScript 2015 將變數寫在 [] 直接交換,只要 1 行,可讀性非常高。

array014

Cloning Arra


1
2
3
4
5
const data0 = [1, 2, 3];
const data1 = data0;

console.log(data1);
console.log(data0 === data1);

若要複製 array,直覺會使用 =,但 array 並非 primitive,而是 object,因此只是將 reference 加以複製,所以 data0data1 仍然指向同一個 [1, 2, 3] array,而不是真的複製 array。

array002

1
2
3
4
5
const data0 = [1, 2, 3];
const data1 = data0.slice();

console.log(data1);
console.log(data0 === data1);

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

array003

1
2
3
4
5
const data0 = [1, 2, 3];
const data1 = data0.concat();

console.log(data1);
console.log(data0 === data1);

ECMAScript 5 也可以使用 Array.prototype.concat() 複製一個新 array,與 slice() 結果相同。

array004

1
2
3
4
5
const data0 = [1, 2, 3];
const [...data1] = data0;

console.log(data1);
console.log(data0 === data1);

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

array001

Function Parameter


1
2
3
4
5
6
7
8
9
10
11
const data = [1, 2, 3];

const func = function(args) {
const a = args[0];
const b = args[1];
const c = args[2];

console.log(a, b, c);
};

func(data);

若 parameter 為 array,在 ECMAScript 5 會使用 array index 一一的指定給變數,需要 3 行。

1
2
3
4
5
const data = [1, 2, 3];

const func = ([a, b, c]) => console.log(a, b, c);

func(data);

在 ECMAScript 2015 可在 parameter 使用 Array Destructuring,直接將 array parameter 分解成變數。

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

array006

1
2
3
4
5
const data = [1, 2, 3];

const func = ([a, b, c, d = 4]) => console.log(a, b, c, d);

func(data);

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

array007

1
2
3
4
5
6
7
8
9
10
11
12
13
const data = ['RGB', [255, 0, 255]];

const func = function(args) {
const name = args[0];
const red = args[1][0];
const green = args[1][1];
const blue = args[1][2];

console.log(name, red, green, blue);

};

func(data);

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

1
2
3
4
5
const data = ['RGB', [255, 0, 255]];

const func = ([name, [red, green, blue]]) => console.log(name, red, green, blue);

func(data);

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

array012

Function Return Array


1
2
3
4
5
6
7
8
9
10
const func = function() {
return [1, 2, 3];
};

const result = func();
const a = result[0];
const b = result[1];
const c = result[2];

console.log(a, b, c);

若要讓 function 回傳多值,在 ECMAScript 5 正規解法就是回傳 array,呼叫端接到 array 後,再使用 array index 一一指定給變數,需要 3 行。

1
2
3
4
5
const func = () => [1, 2, 3];

const [a, b, c] = func();

console.log(a, b, c);

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

array009

1
2
3
4
5
const func = () => [1, 2, 3];

const [a, , c] = func();

console.log(a, c);

若並不想分解 function 所傳回的所有 array,可以在 ,, 之間空著,會自行忽略分解之。

array010

1
2
3
4
5
const func = () => [1, 2, 3];

const [a, ...c] = func();

console.log(a, c);

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

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

array011

Conclusion


  • Array Destructuring 的基本精神就是 一個蘿蔔一個坑,ECMAScript 2015 會自動將 array 的 element 分解到變數
  • Swapping Variable 算是 Array Destructuring 很巧妙的應用
  • Array Destructuring 配合 Spread Operator,可以取代原本 slice()concat() 才能複製 array
  • Array Destructuring 配合 function parameter 特別好用,可以直接在 parameter list 中就分解 parameter,還可搭配 default value
  • Array Destructuring 可將 function 回傳的 array 直接分解到變數

Reference


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

2018-12-23