本文主要是介绍了结构赋值的内容，每每看到解构赋值的内容，都会略有了解，但是很少有机会去学习解构赋值的所有知识，那么就让我带你把解构赋值的知识
一网打尽（我全都要~）
本文主要参考 ES6 标准入门（阮一峰）
一、数组的解构赋值
基本用法
// 为变量赋值
let [a,b,c] = [1,2,3];
a // 1
b // 2
c // 3
————————————————————————————
// 使用嵌套数组进行解构赋值
let [foo,[[bar],baz]] = [1,[[2],3]];
foo // 1
bar // 2
baz // 3
————————————————————————————
// 结构不成功的情况
let [foo] = [];
let [bar,foo] = [1];
// 以上两种情况foo的值都会等于undefined
不完全解构
即等号左边的模式只匹配等号右边数组的一部分。这种情况下，解构依然可以成功。
// 不完全解构
let [x,y,z] = [1,2,3];
x // 1
y // 2
报错的情况
如果等号的右边不是数组（或者严格地说，不是可遍历的结构，那么将会报错）
// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
// 报错的原因是因为等号右边的值，本身或者转为对象后不具备Iterator接口
事实上，只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值，如Set结构，Generator函数等。
默认值
// 解构赋值允许指定默认值
let [foo = true] = [];
foo // true
[x,y = 'b'] = ['a'];
// x= 'a',y = 'b'
——————————————————————————————————————
/* ES6内部判断一个位置是否有值是根据‘===’判断的，如果一个数组成员不严格等于undefined
，默认值是不会生效的。*/
let [x=1]=[null];
x // null
// 如果一个数组成员是null，默认值就不会生效。
——————————————————————————————————————
// 默认值可以引用解构赋值的其他变量，但变量必须已经声明。
let [x = 1, y = x] = []; // x=1;y=1
let [x = 1, y = x] = [2]; // x=2;y=2
二、 对象的解构赋值
基本用法
let {x , y} = {x:"aaa",y:"bbb"};
x // "aaa"
y // "bbb"
对象的解构与数组有一个重要的不同。在数组中，变量的取值由它的位置决定，在对象中，变量必须与属性同名。
// 如果变量名与属性名不一致，必须写成下面这样。
let {x:z} = {x:"aaa",y:"bbb"};
z // "aaa"
/* 这种写法要注意：变量的声明和赋值是一体的，对于let和const而言，变量不能重新声明，
所以一旦复制的变量以前声明过，就会报错*/
let foo;
let {foo}={foo:1};
/* 因为JavaScript引擎会将{foo}理解成一个代码块从而发生语法错误，故报错，解决方法
就是不讲大括号写在行首*/
({foo}={foo:1})
默认值
// 对象的解构也可以指定默认值
let {x = 3} = {};
x // 3
let {x,y =5} = {x:1};
x // 1
y // 5
三、 字符串的解构赋值
字符串也可以解构赋值，这是因为字符串被转换成了一个类似数组的对象。
基本用法
const [a,b,c,d,e,f] = 'juejin';
a // 'j'
b // 'u'
c // 'e'
d // 'j'
e // 'i'
f // 'n'
————————————————————————————————————
// 还可以对字符串的length进行解构赋值
let {length: len} = 'juejin';
len // 6
四 、 数值和布尔值的解构赋值
解构赋值时，如果等号右边是数值或布尔值，则会先转为对象。
基本用法
let {toString:s} = 123;
s === Number.prototyupe.toString // true
/* 解构赋值的规则是，只要等号右边的值不是对象，就先将其转为对象
由于undefined和null无法转为对象，所以会报错。*/
五、 函数参数的解构赋值
函数的参数也可以解构赋值。
基本用法
function add([x,y]){
return x + y;
}
add([1,2]) // 3
// 上面的代码中，函数add的参数实际上不是一个数组，而是通过解构赋值得到的变量x和y。
默认值
函数参数的解构也可以使用默认值。
function move({x = 0, y = 0}) = {
return [x,y];
}
move({x:3,y:8}); // [3,8]
move(); // [0,0]
// 如果解构赋值失败，则x和y等于默认值。
六、 解构赋值的用途
敲黑板啦~学会的知识要会用才行哦。变量的解构赋值用途有很多，下面列举几个主要的。
交换变量的值
[x,y] = [y,x]
// 相比之前的写法，不用写临时变量啦，确实方便不少~
从函数返回多个值
// 返回一个数组
function example() {
return [1,2,3];
}
let [a,b,c] = example();
提取JSON数据
解构赋值对提取JSON对象中的数据尤其有用。
let jsonData = {
id:43,
status:"OK",
data:["loveyou","juejin"]
}
let {id,status,data:string} = jsonData;
console.log(id,status,string);
// 43 "OK" ["loveyou", "juejin"]
遍历Map结构
Map结构原生支持Iterator接口，配合变量的解构赋值，获取键名和键值非常方便。
let map = new Map();
map.set('first','loveyou')
map.set('first','juejin')
// 获取键名
for (let [key] of map){
//...
}
// 获取键值
for (let [,value] of map){
//...
}
最后
⚽本文总结了解构赋值的语法以及用途~
⚾如果这篇文章对你有帮助的话，麻烦点赞收藏哟~
🏀GitHub 博客地址: github.com/Awu1227 。
🏉笔者还有其他专栏，欢迎阅读~
🎱Vue从放弃到入门
🏐玩转CSS之美
