ES6系列之解构赋值

上一篇我们谈到es6在变量声明这一块的小改动，忘记的小伙伴们可以戳这里复习：变量声明

今天来探讨一个新问题：

之前在我们开发的过程中，难免会碰到这样的情况：

后端传给我们一串数据，然后我们需要对这个数据进行处理。

如果是这样的一个数据：

let obj = {
    username:'webpilot',
    userid:12831,
    profession:'webDeveloper',
    region:'beijing'
}

然后我们需要用变量去保存这些数据，那么我们可能会这么操作：

let username = obj.username,
    userid = obj.userid,
    profession = obj.profession,
    region = obj.region;

这么做能取到值，这没问题，不过我们需要思考一个问题，现在这个对象里面只有四个键值对。

这么处理起来也不算麻烦，但是如果哪一天对象里面有100个键值对，怎么办呢？

这种极端的情况不是没有，当然我们可以通过一些其他的手段进行规避，这不在今天的讨论之列。

一、什么是解构赋值？

所以当我们有很多个键值对的时候，这么去取值就显得有点笨拙了。

所以es6提出来了一个新的东西，叫解构赋值，就是用来处理这件事情的。

那么有了解构赋值之后，上面的需求我们可以这么操作：

let obj = {
    username:'webpilot',
    userid:12831,
    profession:'webDeveloper',
    region:'beijing'
}//同样还是这个数据
 
let {username,userid,profession,region} = obj;
 
console.log(username);//webpilot

可以看到在这段代码里面我们直接在let关键字后面用花括号包起来一堆变量，然后直接让它们等于obj。

其实这个操作就是从obj里面取出前面花括号里面变量所对应的值，并且对应的赋值给花括号里面的对象。

这就是所谓的解构赋值了。

先声明变量，然后再解构赋值怎么操作？

当然在这里有一种情况比较特殊，刚才我们是在声明变量的同时给这个变量赋值。

那如果我原本就已经声明好变量了，然后在后面的代码中需要让这个变量等于对象里面的某一项，用结构赋值的话怎么做呢？

来看一下，这其实是一个小技巧：

let obj = {
    username:'webpilot',
    userid:12831,
    profession:'webDeveloper',
    region:'beijing'
}//同样还是这个数据
 
let username = '';//这个变量已经提前声明好了
{username} = obj;//在这里想要让变量等于对象中的某一项，那这么操作是会报错的。这里涉及到块级作用域的问题，username外面的大括号是一个块级作用域，所以会出问题
 
//解决方法
({username} = obj);//把他们用括号包起来，当做一个整体就可以了

解构赋值的时候，我想用别的名字怎么办？

还有一种情况，那就是我结构赋值的时候，不想用对象里面的名字，觉得它太长了，或者其他什么原因我想给解构出来的变量换一个名字，怎么办呢？

看操作：

let obj = {
    username:'webpilot',
    userid:12831,
    profession:'webDeveloper',
    region:'beijing'
}
 
//还是上面的数据，现在我想取其中的username的值，但是我觉得username太长了，我想给它换一个变量名称解构出来。那么这时候我们可以这么操作
 
let {username:n} = obj;
console.log(n);//webpilot

可以注意到在解构赋值的时候是以键名对键值的方式去写的变量：{username:n} 这里其实就是关键。

这看着像是一个对象中的键名和键值，不过在解构赋值中它所代表的意思是 ：

从obj中取出"username"这个值，并且把这个值赋给新声明的变量"n".

所以在这里要注意的是：

新声明的变量是“n” 而不是别的，在后面用的时候也只能用“n”这个变量。

取值的时候，如果没有取到，希望赋给一个默认值？

在我们取值的过程当中呢，有些对象中可能没有这个值，那么这时候我们得到的就是undefined, 这时候程序就会出现一些问题；

那么在解构赋值中，我们有一个小方法可以解决这个问题，那就是在取值的时候，先给这个变量一个默认值。

如果取到了，就用对象里的值，如果没有取到，则用默认值。

看操作：

let obj = {
    username:'webpilot',
    userid:12831,
    profession:'webDeveloper',
    region:'beijing'
}
 
//还是上面的数据，现在我想取其中的abc的值，但是abc在对象中可能存在可能不存在，这时候我们应该给abc一个默认值来避免掉一些程序上的问题
 
let {abc=123} = obj;  //这一步就是在解构赋值的时候，直接给abc赋予了一个默认值 123 
console.log(abc);//123  // 现在obj中是没有abc这个值的，所以得到的就是默认值
 
let {username='name'} = obj;
console.log(username);// webpilot

从上面可以看到，对象obj中并没有abc这个值，如果我们按照之前的方法直接去取值，那么得到的毫无疑问就是undefined.

所以如果给它一个默认值，就能避免掉很多问题。

而如果我们用同样的设置默认值的方法去取对象中已经存在的值，那么这时候得到的值就是对象中的值了。

另外默认值的设置和上面别名的设置是可以同时使用的，也就是说我们可以写这样的代码：

let {username:abc=123} = obj;

以上我们说的都是对对象的解构赋值。

二、数组的解构赋值

数组也是可以被解构赋值的，不过在这里有几个不同点稍微提一下大家就明白了。

首先是解构赋值的时候，对象用的是 “{}” 而数组，同理推一下也应该知道要用 “[]” 中括号，

所以数组在解构赋值的时候是这样写的 ：

let arr = ['a','b','c','d','e','f','g'];
let [first,second,third] = arr;
console.log(first,second,third);//a b c

可以看到上面就成功赋值了，不过在这里还有一点不同：

对象的解构赋值是根据键名来查找值的，而数组的解构赋值是根据下标来查找值的。

这句话的意思是，上述代码中 first得到的值永远是数组arr中存的第一个值，而不管这个值是什么。

最后数组解构赋值的时候也可以用别名，也可以用默认值设置。以上就是ES6中的解构赋值啦~

---

摘至开课吧前端团队，阅读后颇有收获分享至此，希望对大家有所帮助~