解構賦值是一種優雅的方式能夠將{}與[]的值讀出來

讀取陣列並 assign 到變數上

陣列的解構賦值用陣列去接

JavaScript
  • js
1
2
3
let foo = ['one', 'two', 'three'];
let [one, two, three] = foo;
console.log(one); // 'one'

物件的解構賦值

在ES6有支援物件的解構賦值，這就能用在更多的用途上。 例如這有點像 import module 的用法。
物件的解構賦值用物件去接

js
  • js
1
2
3
4
5
6
7
8
9
10
let myModule = {
  drawSquare: function drawSquare(length) { /* implementation */ },
  drawCircle: function drawCircle(radius) { /* implementation */ },
  drawText: function drawText(text) { /* implementation */ },
};

let {drawSquare, drawText} = myModule;

drawSquare(5);
drawText('hello');

傳入 function 的解構賦值

解構賦值也允許你傳入 function ，並且 function’s parameter 指定要讀取哪一個 properties。

function 參數的 property 名稱要與傳入物件的 property 名稱一致，否額會 undefined


js
  • js
1
2
3
4
5
6
7
8
let jane = { firstName: 'Jane', lastName: 'Doe'};
function sayName({firstName, lastName, middleName = 'N/A'}) {
  console.log(firstName);  // Jane
  console.log(lastName);   // Doe
  console.log(middleName); // N/A
}

sayName(jane)

陣列變數交換的用法

陣列可以用解構賦值的方式，交換陣列的值

js
  • js
1
2
3
4
5
6
let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

參考

angular-2-training-book MDN