[ES6] 09. Destructuring Assignment -- 2

Read More: http://es6.ruanyifeng.com/#docs/destructuring

 

Array

“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值:

Exp 1:

var [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail);  // [2, 3, 4]

Exp 2:

var [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

 

如果解构不成功，变量的值就等于undefined:

var [foo] = false;  
console.log(foo); // undefined

var [foo] = [false];
console.log(foo); // false

 

另一种情况是不完全解构:

var [x, y] = [1, 2, 3]; 
console.log(x); // 1
console.log(y); // 2

 

解构只能用于数组或对象, 对undefined或null进行解构，会报错:

// 报错
var [foo] = undefined;
var [foo] = null;

 

解构赋值允许指定默认值:

[x, y='b'] = ['a'] // x='a', y='b'

 

Object

var o = {
  p: [
    "Hello",
    { y: "World" }
  ]
};

var { p: [x, { y }] } = o;
x // "Hello"
y // "World"

 

如果要将一个已经声明的变量用于解构赋值，必须非常小心:

// 错误的写法

var x;
{x} = {x:1};
// SyntaxError: syntax error

上面代码的写法会报错，因为JavaScript引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免JavaScript将其解释为代码块，才能解决这个问题。

// 正确的写法

({x}) = {x:1};
// 或者
({x} = {x:1});