ES6 1、变量的解构赋值

---

---

ES6 变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值

1、基础用法

let [a, b, c] = [1, 2, 3];
//以上代码表示，可以从数组中提取值，按照对应位置，对变量赋值。
console.log(a, b, c); // 1 2 3

2、使用嵌套数组进行解构

let [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo); // 1
console.log(bar); // 2
console.log(baz); // 3

let [, , third] = ["foo", "bar", "baz"];
console.log(third);// "baz"

let [xs, , ys] = [1, 2, 3];
console.log(xs);  // 1
console.log(ys);  // 3

let [head, ...tail] = [1, 2, 3, 4];	//此处的..表示>>>复制和合并数组
console.log(head);  // 1
console.log(tail);  // [2, 3, 4]

let [x, y, ...z] = ['a']; //如果解构不成功，变量的值就等于undefined。
console.log(x); // "a"
console.log(y); // undefined
console.log(z); // []

3、另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功

let [xw, yw] = [1, 2, 3];
console.log(xw); // 1
console.log(yw) // 2

let [as, [bs], ds] = [1, [2, 3], 4.];
console.log(as)  // 1
console.log(bs)  // 2
console.log(ds)  // 4

//上面两个例子，都属于不完全解构，但是可以成功。

4、如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错

let [foos] = 1;//* is not iterable  * 是不可迭代的
let [foo1] = false;
let [foo2] = NaN;
let [foo3] = undefined;
let [foo4] = null;
let [foo5] = {};
/*
	上面的语句都会报错，因为等号右边的值，要么转为对象以后不具备 Iterator 接口（前五个表达式），要么本身就不具备 Iterator 接口（最后一个表达式）。
*/

5、 解构赋值允许指定默认值

let [foo = true] = [];
foo // true

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

let [x1, y1 = 'b'] = ['a', undefined]; 
// x1='a', y1='b'

// 注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

let [x2 = 1] = [undefined];
//	x2=1
let [x3 = 1] = [null];
//	x3=null

// 上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。

// 如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

function f() {
    console.log('aaa');
}
let [x4 = f()] = [1]; 
//	x4=1

// 上面代码中，因为x4能取到值（右侧有值），所以函数f根本不会执行。上面的代码其实等价于下面的代码。
let x4;
if ([1][0] === undefined) {
    x5 = f();
} else {
    x5 = [1][0];
}

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

let [x6 = 1, y6 = x6] = [];     // x6=1; y6=1
let [x7 = 1, y7 = x7] = [2];    // x7=2; y7=2
let [x8 = 1, y8 = x8] = [1, 2]; // x8=1; y8=2
let [x9 = y9, y9 = 1] = [];     // ReferenceError: y9 is not defined

// 上面最后一个表达式之所以会报错，是因为x9用y9做默认值时，y还没有声明。类似于以下代码
let x9=y9 //report errors
let y9=1

小结

提示：文章内容主要参考阮一峰《ECMAScript 6 入门》，更多详细内容可以去看阮老师的文章，这里做常用内容的讲解
阮一峰>>>《ECMAScript 6 入门》