变量解构

数组的解构赋值

如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错。事实上，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

ps: 等号右边如果是字符串也可以正常解构

let [foo] = "Hello";  
foo // 'H'

Set结构可以解构

{
  let [a, b, c] = new Set(['a', 'b', 'c']);
  console.log(a);
  console.log(b);
  console.log(c);
  console.log('--------------分割线------------');
}

默认值

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。
如果默认值是一个表达式，那么这个表达式是 惰性求值的，即只有在用到的时候，才会求值。

{
  let [foo, baz = 'baz...'] = ['foo'];
  console.log(foo);
  console.log(baz);
  let [a, b = 'I am default...'] = ['Hello', undefined];
  console.log(a, b); //Hello I am default...
  let [c, d = 'ddd'] = ['Great', null];
  console.log(c, d); //Great null
  console.log('--------------分割线------------');
}

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

{
    let [x = 1, y = x] = [];     // x=1; y=1
    let [x = 1, y = x] = [2];    // x=2; y=2
    let [x = 1, y = x] = [1, 2]; // x=1; y=2
    let [x = y, y = 1] = [];     // ReferenceError
}

对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定 ；而 对象的属性没有次序，变量必须与属性同名 ，才能取到正确的值。

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

如果变量名与属性名不一致，必须写成下面这样

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'

这实际上说明，对象的解构赋值是下面形式的简写

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的属性值变量。真正被赋值的是后者属性值变量，而不是前者属性名。

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

嵌套解构

  let obj = {
    p: [
      {
        greet: 'Hello'
      },
      'Nice to meet you...'
    ]
  };

  let {p: [{ greet: hello }, greeting] } = obj;
  console.log(hello); /// 'Hello'
  console.log(greeting); // 'Nice to meet you...'

嵌套赋值的例子。

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

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

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

对象的解构也可以指定默认值。默认值生效的条件是，对象的属性值严格等于undefined。

let {x = 3} = {};
x // 3

let {x, y = 5} = {x: 1};
x // 1
y // 5

let {x: y = 3} = {};
y // 3

let {x: y = 3} = {x: 5};
y // 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

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

let {x = 3} = {x: null};
x // null

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

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

//正确的写法
let x;
({x} = {x: 1});

let a,b,c;
({x:a,y:b,c} = {x:'a',y:'b',c:'c'});
a // 'a'
b // 'b'
c // 'c'

上面代码的写法会报错，因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。
解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。 由于 undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

函数参数解构赋值 & 默认值

{
  let foo = ({ x = 0, y = 0 } = {}) => {
    console.log( x + y);
  };

  foo({ x: 4, y: 6 });  //10
  foo({ x: 4 }); // 4
  foo({}); // 0
  foo(); // 0
}

注意，下面的写法会得到不一样的结果。

let move = ({x, y} = { x: 0, y: 0 }) => {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]