JavaScript ES6中的解构赋值

0.什么是解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。
没有解构赋值之前，将数组中的值分别赋给变量a、b、c需要使用数组下标取值：

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

有了解构赋值之后，将数组中的值分别赋给变量a、b、c不需要使用数组下标：

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

1.解构赋值的语法

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

2.数组的解构赋值

2.1 数组解构赋值的原理

1. 模式（结构）匹配
2. 索引值相同的完成赋值

例1：取出数组中的值1、5和3，分别赋值给a，b和c：

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

输出结果：

1 5 3

2.2 数组解构赋值的默认值

2.2.1 默认值的基本用法

例2：给a赋默认值1，b不设默认值。
const [a = 1, b] = [] 等价于：const [a = 1, b] = [undefined, undefined]

const [a = 1, b] = [];
console.log(a, b);

输出结果：

1 undefined

2.2.2 默认值的生效条件

当赋的对应值全等于undefined时，则取默认值。
例3：默认值生效

const [a = 1, b] = [, 2];
const [c = 3, d] = [undefined, 4];
console.log(a, b, c, d);

输出结果：

1 2 3 4

例4：默认值不生效
与a对应的值是1，不是undefined，故不取默认值。与c对应的值是null 不全等于 undefined，不取默认值。

const [a = 9, b] = [1,2];
const [c = 10, d] = [null,3];
console.log(a, b, c, d);

输出结果：

1 2 null 3

2.2.3 默认值表达式

默认值表达式是惰性求值的，只有当对应的值全等于undefined时，才执行默认值表达式。
例5：默认值表达式

const fun = () => console.log('执行了该语句。');
const [x = fun()] = [1];
console.log(x);

输出结果：

1

3.对象的解构赋值

3.1 对象解构赋值的原理

对象的解构赋值的原理

1. 模式（结构）匹配
2. 属性名相同的完成赋值

例6：取出对象中name, age, sex的值，分别赋值给name, age, sex：

const { sex, name, age } = { name: 'zhangsan', age: 18, sex: 'male' };
console.log(name, age, sex);

输出结果：

zhangsan 18 male

例7：在sex后面加冒号还可以起别名。

const { sex: gender, name, age } = { name: 'zhangsan', age: 18, sex: 'male' };
console.log(name, age, gender);   // zhangsan 18 male

3.2 对象解构赋值的默认值

对象解构赋值的默认值的生效条件和默认值表达式与数组解构赋值一致。
例8：对象解构赋值设置默认值
给sex设置默认值“female”：sex = ‘female’

const { sex = 'female', name, age } = { name: 'zhangsan', age: 18 };
console.log(name, age, sex);

输出结果：

zhangsan 18 female

需要注意的是，将一个已经声明的变量用于结构赋值，整个赋值需在圆括号中进行。

例9：声明一个变量age，并将其用于结构赋值。

let age = 20;
({ sex = 'female', name, age } = { name: 'zhangsan', age: 18 });
console.log(name, age, sex);

输出结果：

zhangsan 18 female