ES6 物件和陣列解構小記

suydCao發表於2018-12-05
物件陣列

陣列結構是按照陣列索引來結構賦值的。 物件是按照屬性名來結構賦值的。

1.陣列：

let [x, y = 'b'] = ['a'];  // 1.可以有預設值
x // a
y // b
let [a, [b], d] = [1, [2, 3], 4];  // 2.不完全解構
a // 1
b // 2
d // 4

let [foo] = 1; // 報錯，某種資料結構具有 Iterator 介面，都可以採用陣列形式的解構賦值。1不具備Iterator介面。

2.物件：
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
first // error: first is not defined
物件的解構賦值的內部機制，是先找到同名屬性，然後再賦給對應的變數。真正被賦值的是後者，而不是前者。

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};
let { p: [x, { y }] } = obj;  //此處{y} 其實是{y : y}
x // "Hello"
y // "World"
// 此時p是模式，不是變數，因此不會被賦值。

// 結構 p 
let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

// 巢狀型別的解構賦值
const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};
let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

複製程式碼

相關文章