ES6解构赋值(数组和对象)

参考链接
1.数组的结构赋值
数组的结构赋值按照对应的顺序进行解构

let [a,b,c] = [1,2,3]//a:1;b:2;c:3
同样也可以使用嵌套数组进行解构
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];//从这里可以清楚的看到数组解构赋值是按顺序匹配的;
third // "baz"
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
数组解构赋值里有解构不成功和不完全解构
解构不成功:let [foo] = [];
					let [bar, foo] = [1];//foo都是undefined,当等号右边
					对应的位置时空或undefined时,左边变量得到的结果就是undefined.
不完全解构:let [x, y] = [1, 2, 3];
					x // 1
					y // 2
					let [a, [b], d] = [1, [2, 3], 4];
					a // 1
					b // 2
					d // 4
		从这两个例子里可以分析到不完全解构就是左边的变量少于右边的值.
		数组解构赋值报错的情况:
		// 报错
		let [foo] = 1;
		let [foo] = false;
		let [foo] = NaN;
		let [foo] = undefined;
		let [foo] = null;
		//上面的5个的理解是等号右边不是数组或类数组形式
		let [foo] = {};//这里的解释还请看参考链接, Iterator 这个不了解.
		let [x, y, z] = new Set(['a', 'b', 'c']);//Set这种数据结构也可以赋值
		x // "a";y//"b";z//"c"
		左侧变量带默认值情况
		let [foo = true] = [];
		foo // true
		let [x, y = 'b'] = ['a']; // x='a', y='b'
		let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
		//当等号右侧的对应位置时空值或者是undefined时,
		左侧的变量最终取值就是默认值
		
		默认值可以引用解构赋值的其他变量，但该变量必须已经声明
		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: y is not defined
		//如果用变量做默认值,该变量需要是已声明的,否则报错

2.对象的解构赋值
对象解构赋值是按照key值匹配来给它们对应的value值赋值

let { foo, bar } = { foo: "aaa", bar: "bbb" };
//这里就等于let { foo:foo, bar:bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

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: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
这里报错是因为,对象的结构赋值把foo称为匹配的模式,baz是变量,
而解构赋值的对象是变量,因而报错
//*********************
对象嵌套解构赋值的例子:
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}
上面代码有三次解构赋值，分别是对loc、start、line三个属性的解构赋值。
注意，最后一次对line属性的解构赋值之中，只有line是变量，loc和start都是模式，
不是变量。
let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
obj // {prop:123}
arr // [true]
//参考文档中有很多例子,但是个人觉得看懂这两个就差不多了
对象的解构赋值带默认值的规则与数组的 差不多,就不再赘述.
下面就只摘一些不同的地方
// 报错
let {foo: {bar}} = {baz: 'baz'};
这里报错的解释是,嵌套的子对象的父属性不存在,就会报错,即这里的foo是undefined
因此在undefined上取子属性就报错(前面也说到过foo是模式,模式是不会赋值的)

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