ECMAScript 之 Array Destructuring

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

Version

ECMAScript 2015

Basic

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，想分別指定到 a 、 b 與 c 變數，ECMAScript 5 寫法必須要 3 行。

const data = [1, 2, 3];

const [a, b, c] = data;

console.log(a, b, c);

ECMAScript 2015 將 a 、 b 與 c 直接寫在 [] 內， data array 會依照順序直接分解到變數，只需 1 行。

Swapping Variable

let a = 1;
let b = 2;

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

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

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

let a = 1;
let b = 2;

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

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

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

Cloning Arra

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

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

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

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。

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

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

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

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() 。

Function Array Parameter

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 行。

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 刮起來。

const data = [1, 2, 3];

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

func(data);

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

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 行。

const data = ['RGB', [255, 0, 255]];

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

func(data);

ECMAScript 2015 也可直接分解 nested array。

Function Return Array

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 行。

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

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

console.log(a, b, c);

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

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

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

console.log(a, c);

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

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

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

console.log(a, c);

若 function 回傳的 array，想部分也分解成 array，可搭配 ... Spread Operator。

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

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