【ES6】解构赋值（整理篇）

[laihuamin]

前言

上一篇文章整理的变量声明一块的，这一篇将对解构赋值一块的。

解构的概念

ES6规定了一种变量赋值的模式，从数组和对象中提取变量的值的方式，称为解构。

解构的基本用法

• 左边数量等于右边数量的情况

let [a, b, c] = [1, 2, 3];
a; // 1
b; // 2
c; // 3

这种情况应该是最好理解的，从数组中提取值，按照对应位置，对变量赋值。

• 左边数量大于右边数量的情况

let [bar, foo] = [1];
bar // 1
foo //undefined

如果出现这样的情况，属于解构不成功。那么不成功的部分，将被赋值为undefined。

• 左边数量小于右边数量的情况

let [x, y] = [1, 2, 3];
x // 1
y // 2

这种情况叫不完全解构。解构操作依然可以成功。也是提取对应位置上的值。

默认值的用法

因为在实际业务中，总不可能右边的数组长度不发生变化，但是你又希望解构出来不是一个undefined的话。就可以给那个值添加默认值

let [x = 1, y] = [];  // 1 undefined
let [x = 1, y] = [2, 3] // 2 3

当然，默认值也可以用变量来代替，但是代替的变量一定要申明且赋值的。

let [x = 1, y = x] = [];  // 1 1
let [x = 1, y = x] = [2]; // 2 2
let [x = 1, y = x] = [1, 2]; // 1 2
let [x = y, y = 1] = []; // 报错

对象的解构

上面的基本用法，我们只拿数组举例了，其实对象也是可以用解构的。

let {bar, foo} = {bar: 'bar'} // bar undefined

对象解构是按照键值匹配，而数组解构是按照位置匹配。其他很多特性和数组一样。

对象解构可以取到继承的属性

const obj1 = {};
const obj2 = { x: '1' };
Object.setPrototypeOf(obj1, obj2);

let {x} = obj1  // 1

obj1本身并不包含x属性，其属性是在它原型上的。所以对象的解构，可以从继承的原型上面取到值。

默认值

对于默认值这一块，想强调一点对象属性必须严格等于undefined，才会出发默认值

let {x = 1} = {x: undefined} // 1
let {y = 1} = {y: null} // null

上述例子中，null是不等于undefined，所以并不会触发默认值条件。

对象解构中的注意点

• 已经申明的变量用于解构赋值

// 错误的用法
let x;
{x} = {x: 1};  //报错

这种情况会发生报错，报错是因为js将{x}理解成了代码块，从而发生了语法错误。
如何解决呢？只要不讲{写在开始位置。

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

• 对数组进行对象解构

在js中数组就是一种特殊的对象。所以，我们也可以对一个数组，进行对象的解构。举个例子：

let arr = [1, 2, 3];
let {0: first, 1: second, 2: third} = arr; // 1 2 3

其他类型的赋值解构

字符串的赋值解构

当字符串被解构时，会将字符串处理成类数组对象。

let [a, b, c, d] = '12345'
a // 1
b // 2
c // 3
d // 4

数组和布尔值的解构

这一块极少用到，想了解的可以自己google搜索。

函数参数的解构

这一块在业务中用到的是最多的。函数参数很多时，没有办法做到一一对应，那么解构便是一种很好的途径。

function add({a, b, c, d, e}) {
    return a + b + c + d + e;
}
add({a: 1, c: 3, b: 2, d: 4, e: 5}); // 15

并不需要在乎参数的先后顺序，只需要参数的名字一一对应，而且还能给参数设定默认值。

解构的其他用途

交换变量值

以前交换变量值，需要第三个中间变量来帮忙，但是有了解构之后就很简单了。

let x = 1;
let y = 2;

[x, y] = [y, x];

加载模块时

import {x, y} from 'xxx';

这里也是用到了解构，可以让你引入的部分更加明确。

总结

解构其实还是有迹可循的，需要掌握还得花点时间。下一篇文章将会整理Symbol相关的知识点。