ES6 解構

第五章 解構：使數據訪問更便捷

對象解構

let node = {
  type: 'id',
  name: 'foo',
};

let {type, name} = node; // type === 'id', name === 'foo'
let {type: TYPE, name: NAME} = node; // TYPE === 'id', NAME === 'node'

預設值

可以在結構語句中添加預設值，使其覆蓋false like的值

let {type, name, value = '123'} = node;

嵌套對象解構

將對象拆解以獲取你想要的信息。

let {loc: {start}} = node; // 從node中提取node.loc.start，賦值給start

數組解構

使用數組字面量，且解構操作全部在數組內完成。

let colors = ['red', 'greed', 'blue'];

let [first, second] = colors; // first === 'red', second === 'green'
let [, , third] = colors; // third === 'blue'
let [, , , fourth = 'black'] = colors // 使用預設值,fourth === 'black'

數組的解構可以用來交換變數

let a = 1, b = 2;
[b, a] = [a, b];

不定元素

數組的解構可以使用擴展運算符...來分拆或組合數組。

let [first, ...rest] = colors; // rest = ['green', 'blue']
let mixed = [...colors, ...rest]; // mixed = ['red', 'green', 'blue', 'green', 'blue']

解構參數

在函數的參數表中，可以直接將某個參數對象的屬性通過解構的方式獲得，從而在函數中作為變數使用。

解構參數建議提供被解構對象的預設值{}，從而避免從undefined中去解構，產生報錯。

解構時，可以為每個解構的屬性提供預設值。