ES6對象的結構指派

ES6 對象的解構指派

對象的結構和數組有一個重要的不同,數組的元素時按照次序排序的,變量的取值是由它的位置決定的,而對象的屬性沒有次序,變量必須和屬性同名才能取到正确的值

let { bar, foo } = {foo: 'a', bar: 'b'};
// foo = 'a'
// bar = 'b'

let { ccc } = {foo: 'a', bar: 'b'};
// ccc = undefined
           

如果變量名和屬性名不一緻

var {foo: baz} = {foo: 'a', bar: 'b'};
//  baz = 'a'

let  obj  = {  first : 'hello', last: ' world' };
let  {  first:  f ,  last:  l  }  = obj;
// f = ' hello'
// l = ' world'
           

注意:

//  foo 是比對模式,baz才是變量,真正指派的是變量baz,而不是模式foo
let  {  foo :  baz  } = {  foo : 'aaa', bar: 'bbb' };
// baz =  'aaa'
// foo   error:  foo  is  not  defined
           

1.嵌套對象的結構指派

// p是模式,不是變量,p不會被指派
let obj = {
  p: [ 'Hello', {y: 'World'} ]
}

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

// p也可以作為變量指派
let obj = {
  p: [ 'Hello', {y: 'World'} ]
}
let {p, p: [x, { y }]} = obj;
// x = "Hello"
// y = "World"
// p = [ 'Hello', {y: 'World'} ]
           

案例1:

var node = {
  loc: { start: { line: 1, column: 5 } }
}

var { loc, loc: { start }, loc: { start: { line }}} = node;
console.log('我是loc:', loc);
console.log('我是start:', start);
console.log('我是line:', line);
// 我是loc: { start: { line: 1, column: 5 } }
// 我是start: { line: 1, column: 5 }
// 我是line: 1
           

注意: 隻有line是變量,loc和start都是模式,不是變量

案例2: 嵌套指派

let obj = {};
let arr = [];

({ foo: obj.prop, bar: arr[0]} = { foo: 123, bar: true})

console.log('我是obj', obj);
console.log('我是arr', arr);

// 我是obj { prop: 123 }
// 我是arr [ true ]
           

2.指定預設值

var { x = 10 } = {};
// x = 10

var {x, y = 20} = {x: 1};
// x = 1
// y = 20

var { x: y = 30 } = {};
// y = 30

var { x: y = 40 } = { x: 50 };
// y = 50

           

預設值生效條件: 對象的屬性值嚴格等于undefined

var { x = 3 } = { x: undefined };
// x = 3

// x的屬性值等于null, 不嚴格等于undefined,預設值不生效
var { x = 5 } = { x: null };
// x = null
           

結構失敗:

// 如果結構失敗,變量的值等于undefined
let { foo } = { baz: 'baz'};
// foo = undefined

// 報錯
let  {foo:  {bar}}  =  {baz : ' baz' } ;
// 原因: 等号左邊對象的foo屬性對應的是一個子對象,該子對象的bar屬性在結構時會報錯, 此時foo是undefined,再取子屬性就會報錯

//報錯
let temp = { baz: 'baz' };
// temp.foo.bar 報錯
           

錯誤寫法

// 錯誤寫法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

// 因為javaScript引擎會将{x}了解成一個代碼塊,進而發生文法錯誤,
// 隻有不将大括号寫在行首,避免javascript将其解釋為代碼塊,才能解決這個問題
// 正确的寫法
({x} = { x: 1});
           

現有的對象的解構指派

// 将Math對象的對數,正弦,餘弦三個方法指派給對應的變量
let {log, sin, cos} = Math;
           

數組本質是特殊的對象,是以對數組進行對象屬性結構

let arr = [1, 2, 3];
let {0: first, [arr.length - 1]: last} = arr;
// first = 1
// last = 3