「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」。
解构赋值是对赋值运算符的扩展。针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
基本用法
对象解构
let { name, age } = { name:'张三', age:18 };
数组解构
let [name, age] = [ '张三', 18 ];
假如我们有一个对象，想要提取对象的每一个属性，普通的写法是这样
ES6解构允许我们这样做达到同样的效果
let { name, age } = user;
只要变量与属性同名，就能取到该属性的值，顺序不用一样。
如果是数组的话，则解构方式用的是中括号[]
数组需要注意的是，数组的元素是按次序排列的，变量的取值由它的位置决定；
变量名和属性名不一致
有的时候，变量名想自定义，并不想和对象的属性名一样，怎么办？可以这样写
let { name:userName, age:userAge } = user;
userName //user.name '张三'
userAge //user.age '18'
实际上，对象的解构赋值是下面形式的简写。
对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
默认值
对象默认值
对象的解构指定默认值。默认值生效的条件是，对象的属性值严格等于undefined。
数组默认值
当一个数组成员严格等于undefined，默认值才会生效。
- 默认值不生效（数组对应位置有值，包括null）
- 默认值生效（数组对应位置没有值，或者值为undefined）
默认值可以引用解构赋值的其他变量，前提是该变量已经声明。
记：值为null的时候，默认值不会生效
已经声明的变量用于解构赋值
如果变量已经声明过了，还能不能用来解构呢？比如
声明过的变量，可以用来解构，但是应该这样写
let x;
({x} = {x: 1}); //加一个括号
函数参数的解构
数组参数
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
对象参数
function move({x = 0, y = 0} = {}) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
对字符串解构
字符串也可以解构赋值
应用
交换变量
ES5值互换，我们通常会利用一个临时的第三个变量来实现，ES6直接使用解构就能实现同样效果了。
函数返回多个值（*）
正常情况，函数只能 return 一个值
如果想返回多个值，可以把它们放在数组或对象里返回，然后用解构赋值取值
函数参数的定义
当参数是无序时，可以这样写
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
参考资料：
ES6 in Action: Destructuring Assignment
🎨【点赞】【关注】不迷路，更多前端干货等你解锁
往期推荐
