一、解构赋值

解构赋值：主要用来从数组和对象中提取值，对变量进行赋值。

• []：是专门解构数组使用的
• {}：是专门解构对象使用的

二、解构数组

2.1. 变量赋值

• ES6之前的写法：

let a1 = 1,
  b1 = 2;
console.log(a1, b1); // 1 2

let a2, b2;
a2 = 11;
b2 = 22;
console.log(a2, b2); // 11 22

let arr = ["jack", "rose"];
console.log(arr[0], arr[1]); // jack rose

• 解构赋值写法：

let [a1, b1] = [1, 2];
console.log(a1, b1); // 1 2

let a2, b2;
[a2, b2] = [11, 22];
console.log(a2, b2); // 11 22

let arr = ["jack", "rose"];
let [a3, b3] = arr;
console.log(a3, b3); // jack rose

2.2. 交换变量

• ES6之前的写法：

let a = 1,
  b = 2,
  c;
c = a;
a = b;
b = c;
console.log("a=" + a, "b=" + b); // a=2 b=1

• 解构赋值写法：

let a = 1,
  b = 2;
[a, b] = [b, a];
console.log("a=" + a, "b=" + b); // a=2 b=1

2.3. 默认值

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

let [a] = [];
let [x, y] = [1];
console.log(a); // undefined
console.log(x); // 1
console.log(y); // undefined

可以在表达式左边的数组中为任意对象预设默认值。
防止从数组中取出一个值为undefined的对象

let a, b, c, d;
[a = 5, b = 7] = [1];
[c, d] = [2];
console.log(a, b, c, d); // 1 7 2 undefined

当数组成员为null的时候，默认值就不会生效

let [x = 1] = [undefined];
console.log(x); // 1

let [y = 1] = [null];
console.log(y); // null

2.4. 不完全解构

• 等号左边的模式，只匹配一部分的等号右边的数组。
• 这种情况下，解构依然可以成功。

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

let [a, [b], c] = [1, [2, 3], 4];
console.log(a, b, c); // 1 2 4

2.5. 解构数组嵌套

let arr = [1, [[2,22], 3]];
let [a,[b,c]] = arr;
console.log(a, b, c); // 1 [2,22] 3

2.6. 与…运算符结合使用

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

let [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

三、解构对象

• 对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

• 如果变量与属性不同名，需要先匹配属性名，在定义变量。

• 左边定义的变量名与右边对象的属性名相同时

3.1. 普通解构

const person = { name: 'xiaozuoya', age: 28, sex: '男' };
let { name, sex,age } = person; // 对象的结构赋值

console.log(name); // 打印结果：xiaozuoya
console.log(sex); // 打印结果：男
console.log(age); // 打印结果：28

3.2. 解构别名

const person = { name: 'xiaozuoya', age: 28 };
let { name: myName, age: myAge } = person; // 对象的结构赋值

console.log(myName); // 打印结果：xiaozuoya
console.log(myAge); // 打印结果：28

console.log(name); // 打印报错：Uncaught ReferenceError: name is not defined
console.log(age); // 打印报错：Uncaught ReferenceError: age is not defined

上方的第 2 行代码中：（请牢记）

• 等号左边的属性名 name、age 是对应等号右边的属性名。
• 等号左边的 myName、myAge 是左边自定义的变量名。

3.3. 解构多余的变量处理

对象的结构赋值，是根据属性名进行一一对应来赋值的。可如果左边的数量大于右边的数量时（也就是变量的数量大于值的数量时），多余的变量要怎么处理呢？答案是：如果变量在一一对应时，没有找到对应的值，那么，多余的变量会被赋值为 undefined。

const person = { name: 'xiaozuoya' };
let { name, sex,age } = person; // 对象的结构赋值

console.log(name); // 打印结果：xiaozuoya
console.log(sex); // 打印结果：undefined
console.log(age); // 打印结果：undefined

3.4. 解构默认值

let {a = 3} = {};
console.log(a) // 3

let {b, c = 5} = {b: 1};
console.log(b, c) // 1 5

let {d: e = 3} = {};
console.log(e) // 3

let {f: g = 3} = {f: 5};
console.log(g) // 5

• 当对象成员为null的时候

let [x = 22] = {x: undefined};
console.log(x);	// 22

let [y = 1] = {y: null};
console.log(y); // null

3.5. 解构嵌套对象

与数组一样，解构也可以用于嵌套结构的对象。

let obj = {
  a: [
    'Hello',
    { y: 'JavaScript' }
  ]
};
let { a: [x, { y }] } = obj;
console.log(x, y); // Hello JavaScript

let obj = {
	a:{
		b:{
			x:1,
			y:2
		}
	}
}
let {a,a:{b},a:{b:{x,y}}} = obj;
console.log(a);	// {b: {…}}
console.log(b);	// {x: 1, y: 2}
console.log(x, y);	// 1 2

3.6. 圆括号的使用

如果变量 foo 在解构之前就已经定义了，此时你再去解构，就会出现问题。下面是错误的代码，编译会报错：

let foo = 'haha';
{ foo } = { foo: 'xzy' };
console.log(foo);

要解决报错，只要在解构的语句外边，加一个圆括号即可：

let foo = 'haha';
({ foo } = { foo: 'xzy' });
console.log(foo); //输出结果：xzy

四、解构字符串

字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。举例如下：

const [a, b, c, d] = 'hello';
console.log(a); //输出结果：h
console.log(b); //输出结果：e
console.log(c); //输出结果：l

console.log(typeof a); //输出结果：string

五、解构函数

5.1. 解构函数的参数

• 函数的参数也可以使用解构赋值。

function fn([x, y]){
  return x + y;
}
fn([1, 2]); // 3

• 函数参数的解构也可以使用默认值。

function fn({x = 8,y} = {}) {
  console.log(x,y);
  return [x, y];
}
fn(); 				// [8, undefined]
fn({}); 			// [8, undefined]
fn({x: 9}); 		// [9, undefined]
fn({x: 6, y: 4});	// [6, 4]

5.2. 解构函数返回值

• 当函数返回一个数组时，使用解构处理更方便

function fn() {
  return [1, 2];
}
let a, b;
[a, b] = fn();
console.log(a,b); // 1 2

• 忽略一个函数的某些返回值

function fn() {
  return [1, 2, 3];
}

let [, b, c] = fn();
console.log(b, c); // 2 3

• 忽略一个函数的全部返回值

function fn() {
  return [1, 2, 3];
}
[ , , ] = fn();

六、其他解构

当等号左边为对象，右边为 数值、布尔值、undefined和null时

let { a1: b1 } = 666;
console.log(b1); // undefined
let { a2: b2 } = true;
console.log(b2); // undefined
let { a3: b3 } = undefined;
console.log(b3); // 报错
let { a4: b4 } = null;
console.log(b4); // 报错