☞☞ 个人主页欢迎访问 ☜☜
大家好，本人名叫苏日俪格，大家叫我 （格格） 就好，在上一章节中我们学到了let和const的用法，下面我们一起来继续学习解构赋值：
当我第一次听到这个东西的时候，心里冒出了无数的疑问，这个名字太奇怪了，但是我想说的是解构赋值非常有用
当我们定义多个变量的时候还要一个一个去命名和赋值，非常麻烦，如果用了解构赋值，像这样：
let [a,b,c] = [1,2,3];
console.log(a,b,c); // 1,2,3
正如你所看到的，它默认的把你右边赋的值都解出来分配给左边的变量，一一对应进行赋值
小白：这个看起来很好用，可是如果两侧不对称了呢？
格格：解构赋值意思就是说两侧的结构和格式都必须一模一样，再举个例子：
let [a,b,c] = [1,[2,3]];
console.log(a,b,c); // 1 [2, 3] undefined
两侧不一致就会导致像上面这样的结果，解决方式就是：
let [a,[b,c]] = [1,[2,3]];
console.log(a,b,c); // 1 2 3
数组还有一种玩法就是：
let [a,b,c='暂无数据'] = [1,2];
console.log(a,b,c); // 1 2 暂无数据
当然上面这种写法用处不大，但是在交换两个变量的值的时候，正常是还得找第三个变量打配合就行转换，现在不需要了：
let a = 1;
let b = 2;
[a,b] = [b,a];
console.log(a,b); // 2 1
以上这是数组的解构赋值，下面看一下json的解构赋值是怎样的：
let {name,age,job} = {
name: '苏日俪格',
age: 24,
job: 'web前端开发'
}
解构赋值一般用在和后台进行数据交互的时候，后台数据大多都是json形式的传递的，数据多的时候都是json嵌套json，以至于有很多，这时就可以用解构赋值全都解出来就可以了，不要谢我，记住我是雷锋～(￣▽￣～)(～￣▽￣)～
let json = {
name: '苏日俪格',
age: '24',
job: 'web前端开发'
}
let {name,age,job} = json;
console.log(name,age,job); // 苏日俪格 24 web前端开发
还有第二种写法：
let json = {
name: '苏日俪格',
age: '24',
job: 'web前端开发'
}
let {name:a,age:b,job:c} = json;
console.log(a,b,c); // 苏日俪格 24 web前端开发
从字面就能够理解，上面这种写法只是给每一个变量起了一个名字，但是如果起了名字之后，下面调用的时候里面的参数还是写的以前名字，那么就会报错is not defined
接下来给大家讲一个关于解构赋值的小小的应用：
function getPos(){
return {
l: 10,
t: 20
}
}
let {l, t} = getPos();
console.log(l,t); // 10 20
当然解构赋值也可以作为参数进行传递，用法都是一样的，保持一一对应即可。
讲到这里，给大家插一个小tip，在ES2017 6月发布的版本中新增了一个小可爱：
function show(a,b,c){
console.log(a,b,c); // 1 2 3
}
show(1,2,3,);
仔细看会发现我们在传值的时候，多传了一个逗号(,)，但是数据依然能够显示出来，这个看似没用，但是在与后台交互的时候，往往会因为多了个逗号而导致程序报错；不知道大家有没有做过微信小程序，里面有个配置文件app.json，是用来配置整个小程序所有的页面的，当我们想把另一个作为首页访问的话，还要特意去删掉那个多余的逗号，这个解决了我们遇到的问题。
关于解构赋值我们都已经了然于心，预知字符串模板如何，请听下回分解 （＾∀＾）/~~~
本文的所有内容均是一字一句敲上去的，希望大家阅读完本文可以有所收获，因为能力有限，掌握的知识也是不够全面，欢迎大家提出来一起分享！谢谢O(∩_∩)O~
欢迎来我的GitHub，喜欢的可以star，项目随意fork，支持转载但要下标注，同时恭候：我的博客 Resume
等一下( •́ .̫ •̀ )，我还有最后一句话：
这里虽然没有都市的繁华，
也没有山林的鸟语花香，
只有一片如水的宁静，
古人云：
既来之则安之，
既然来到了这里，
就可以静心休憩你的灵魂，
调养你疲惫的心，
再见...
网友评论