大家好，本人名叫苏日俪格，大家叫我 （格格） 就好，在上一章节中我们学到了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，支持转载但要下标注，同时恭候：我的博客

等一下( •́ .̫ •̀ )，我还有最后一句话：

这里虽然没有都市的繁华，

也没有山林的鸟语花香，

只有一片如水的宁静，

古人云：

既来之则安之，

既然来到了这里，

就可以静心休憩你的灵魂，

调养你疲惫的心，

再见…