05-ES6语法：解构赋值

本文我们介绍ES6中解构赋值。ES6的解构赋值语法是一种JS表达式。解构赋值语法是一种JS表达式，通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。

下面我们具体来看看解构赋值是什么？以及是如何使用的？

下面是简单的屏幕分享，不爱看文字的同道中人可以看视频。-_-

一、获取对象属性值

在JS中如何去获取对象的属性值呢？我们还是先看ES6之前的代码是如何实现的。无非是通过点(.)语法或者下标([])的方式来获取对象的属性值，代码分别如下。

通过点语法(.)获取对象的属性值。

const user = { userName: "光脚丫思考", blog: "https://blog.csdn.net/gjysk" } console.info(user.userName); console.info(user.blog); 

控制台输出的内容如下图所示：

通过下标([])方式获取对象属性值的代码如下：

const user = { userName: "光脚丫思考", blog: "https://blog.csdn.net/gjysk" } console.info(user["userName"]); console.info(user["blog"]);

可以看到，下标中的字符串，实际上就是属性的名称。这种语法更适合于我们不清楚具体的属性名，或者属性名是动态的情况下。如果属性名本身已经很明确了，还是点语法更简洁些。

当然了，如果与ES6语法比较起来，上面两种玩法都还是显的就没有那么简洁了。接下来，我们看看ES6是如何来获取对象的属性值的？

const user = { userName: "光脚丫思考", blog: "https://blog.csdn.net/gjysk" } const {userName, blog} = user; console.info(userName); console.info(blog);

上述代码演示了如何通过ES6语法的解构赋值来快速地获取属性值。示例中创建与对象属性名同名的变量，并将对象中同名的属性值分配给新创建的同名变量，大大地减少了许多重复的代码。

至此，我们大概演示了解构赋值最基本的用法：获取对象的属性值。是不是让代码变地更加的简洁，更加的优雅了。

二、获取嵌套对象的属性值

前面我们所看到的示例代码都只是从一个简单的对象中获取属性值，那如果属性值本身就是一个对象，而这个对象的属性值要如何获取呢？解构赋值能做到吗？如何编写代码呢？

const user = { userName: "光脚丫思考", blog: "https://blog.csdn.net/gjysk", details: { nickName: "光脚丫思考", address: "中国北京", signature: "勿以善小而不为，勿以恶小而为之" } } const { userName, blog, details: { signature } } = user; console.info(userName); console.info(blog); console.info(signature);

输出的结果如下图所示：

上面的示例还是比较简单了些，如果是更深入的对象嵌套怎么办呢？上面的方法还能有效果吗？我们试一试。

const user = { userName: "光脚丫思考", blog: "https://blog.csdn.net/gjysk", details: { nickName: "光脚丫思考", address: { domicileAddress: "户籍地", abodePlace: "居住地" }, signature: "勿以善小而不为，勿以恶小而为之" } } const { userName, blog, details: { signature, address: { domicileAddress, abodePlace } } } = user; console.info(userName); console.info(blog); console.info(signature); console.info(domicileAddress); console.info(abodePlace);

输出结果如下图所示：

可以看到，深层次的嵌套的对象也是可以通过解构赋值来获取属性值的，再深层次的也是可以正常获取的，有兴趣小伙伴们可以自己动手尝试下。

三、设置默认值

如果我们预期某个属性是会包含属性值的，但是由于某种原因最后没有包含属性值，比如某些状态值为空的情况下，解构赋值是否可以设置一个默认值呢？答案是肯定的。示例如下：

const user = { userName: "光脚丫思考", blog: "https://blog.csdn.net/gjysk", status: "online" } const { userName, blog, status } = user; console.info(userName); console.info(blog); console.info(status);

如上的代码所示，按照我们的预期，正常情况下status会返回一个值，表示当前用户的登录状态，代码输出结果如下：

输出的内容一切如常。但是，在某种特殊或意外的情况下，比如后端写接口的大侠忘记返回这个状态的值了，除了让后端的大侠正确的补充上这个状态值以外，我们还可以给它设置一个默认值，比如默认值离线状态offline。代码如下：

const user = { userName: "光脚丫思考", blog: "https://blog.csdn.net/gjysk", status: undefined } const { userName, blog, status = "offline" } = user; console.info(userName); console.info(blog); console.info(status);

请留意user.status属性值是undefined了，我们假定后端返回的结果出现了这样的情况，但是在我们解构赋值的代码中增加了一个offline的默认值，控制台上的输出结果如下：

可以看到，在没有获取到相应属性值的情况下，使用了解构赋值中的默认值。

另外一种情况就是直接就没有这个属性，缺少这个属性，设置默认值的办法同样好使，示例代码如下：

const user = { userName: "光脚丫思考", blog: "https://blog.csdn.net/gjysk", } const { userName, blog, status = "offline" } = user; console.info(userName); console.info(blog); console.info(status);

请注意上面的user已经没有包含status属性了，输出的结果仍然包含了解构赋值中设定的默认值。

漂亮！无论是返回的属性值为undefined，还是直接把这个属性值干没了，解构赋值设置的默认值都很好使，具体的使用场景大家自行挖掘和体会。

在使用默认值的时候，应该注意区分undefined和null，只要undefined的时候才会使用设置的默认值，null是不会使用默认值的。如下代码所示：

const user = {     userName: "光脚丫思考",     blog: "https://blog.csdn.net/gjysk",     address: undefined,     signature: null, } const { userName, blog, address = "中国北京", signature = "默认签名信息" } = user; console.info(`userName=${userName}`); console.info(`blog=${blog}`); console.info(`address=${address}`); console.info(`signature=${signature}`);

请留意address属性值为undefined，而signature则为null，输出的结果如下图所示：

可以看到address使用的是设置的默认值，而signature的值则继续保留为null了。

四、使用别名

另外一个使用解构赋值必须得面临的一个问题：变量命名冲突的问题，该如何解决呢？

前面的那些示例代码中，解构赋值中的变量名和对象中的属性名是完全一致的，如果已经定义了同名的变量该怎么办呢？岂不是会发生命名冲突的情况。此时，使用别名就能很好的解决这个问题了。示例代码如下：

const user = { userName: "光脚丫思考", blog: "https://blog.csdn.net/gjysk", } const { userName: name, blog: url } = user; console.info(name); console.info(url);

在上面的代码中，我们将user.userName的属性值赋值给了name变量，将user.blog的属性值赋值给了url变量。通过别名的方式，就不需要强制要求解构赋值中的变量名和对象中的属性名

完全一致了，这就大大地增加了灵活性，也能很好的解决命名冲突的问题。

五、定义新变量

解构赋值还可以基于对象的属性值创建新的变量，还是先来看一个示例：

const user = { userName: "光脚丫思考", blog: "https://blog.csdn.net/gjysk", } const { userName, blog, message = `我是${userName}，我的博客地址是：${blog}` } = user; console.info(userName); console.info(blog); console.info(message);

请留意上面的代码，解构赋值中的message变量并非user对象的某个属性名称，而是由变量userName和blog拼接到一起的字符串变量。

这里使用到了ES6的字符串的方式拼接的字符串，如果还不太了解这个技术的，可以移步到我的另外一篇博文《03-ES6语法：模板字面量(Template Literals)》。

上述代码的输出结果如下图所示：

需要特别强调一点的是，新定义的变量message中使用到的userName和blog并非user中的属性名，而是解构赋值中定义的userName和blog，这2个变量接收了user对象中同名的属性值。

因此，如果我们把解构赋值中的userName和blog移除掉的话，代码就废掉了。

const user = {     userName: "光脚丫思考",     blog: "https://blog.csdn.net/gjysk", } const { message = `我是${userName}，我的博客地址是：${blog}` } = user; console.info(message);

上述代码在控制台中直接报错了，错误如下：

如果使用别名的方式就能更加说明这一点了。

const user = { userName: "光脚丫思考", blog: "https://blog.csdn.net/gjysk", } const { userName: name, blog: url, message = `我是${name}，我的博客地址是：${url}` } = user; console.info(name); console.info(url); console.info(message);

上述的代码中，新定义的变量message中拼接的变量名称就是别名，而并非user对象中的属性名，表明它所使用的是解构赋值中定义的变量名，而并非对象中的属性名。

六、动态名称属性

在实际的开发过程中，我们通常会通过接口API来获取数据，而这些数据不仅仅内容是动态的，甚至对象的属性键名也是动态的，再或者我们一开始连属性的名称都可能不知道。这样的属性值要如何获取呢？如果不使用解构赋值，可以通过下标[]的方式来获取属性值，那解构赋值又是如何做到的呢？请看示例。

const user = { userName: "光脚丫思考", blog: "https://blog.csdn.net/gjysk", }; function getValue(data, key) { const { [key]: value } = data; return value; } let userName = getValue(user, "userName"); let blog = getValue(user, "blog"); console.info(userName); console.info(blog);

重点放到getValue(data,key) 函数上，其中最为重要的代码如下：

const { [key]: value } = data;

可以看到，解构赋值代码也是通过下标[]的方式来获取对象的属性值的，下标中key的内容就是属性的名称。

有了这项技术，基本上属性的名称可以成为动态的，可以通过参数来传递，无论是明确的属性名，还是后续动态传递过来的属性名，都能轻松的从特定对象中获取该属性的属性值。

七、函数中的解构赋值

1、解构赋值传参

使用对象解构赋值将属性值作为参数传递给函数。

const user = { userName: "光脚丫思考", blog: "https://blog.csdn.net/gjysk", }; function display({userName, blog}) { let message = `大家好，我是${userName}，我的博客地址是：${blog}`; console.info(message); } display(user);

请特别留意函数的参数定义，使用的就是解构赋值的语法，而在调用的时候，直接传递对象就行。输出的结果如下图所示：

2、解构赋值返回结果

如果函数返回一个对象，可以将属性值直接解构为变量，如下代码所示：

function getUSer() { const user = { userName: "光脚丫思考", blog: "https://blog.csdn.net/gjysk", }; return user; } const { userName, blog } = getUSer(); let message = `大家好，我是${userName}，我的博客地址是：${blog}`; console.info(message);

其实这种使用方法也不难理解，本质上来说仍然是从对象中解构赋值，因为，函数返回的就是一个对象，这和我们在函数外面创建的对象没什么不同。

上述代码的输出结果如下图所示：

八、循环中的解构赋值

接下来我们再看看在循环中如何使用解构赋值。示例代码如下：

let users = [ { userName: "光脚丫思考1", blog: "https://blog.csdn.net/gjysk", }, { userName: "光脚丫思考2", blog: "https://blog.csdn.net/gjysk", }, { userName: "光脚丫思考3", blog: "https://blog.csdn.net/gjysk", }, ]; for (user of users) { const { userName, blog } = user; let message = `大家好，我是${userName}，我的博客地址是：${blog}`; console.info(message); }

上面的代码中，我们在for循环的内部使用了解构赋值语法，成功的从每个user对象中获取到了userName和blog的数据。输出结果如下所示：

也算是最基本的玩法了，下面的方式则更加的简洁一些。

for ({ userName, blog } of users) {     let message = `大家好，我是${userName}，我的博客地址是：${blog}`;     console.info(message); }

在for循环的{}中不包含解构赋值的代码，而是直接放到了()中，输出的结果和前面的代码是一样的。

九、数组解构

先来看一个简单的数组解构赋值的代码，如下：

let [a, b] = [1, 2]; console.info(a); console.info(b);

上面代码在控制台的输出结果如下图所示：

就像上面的示例一样，数组解构赋值的过程中，只要把每个解构的部分一一对应起来，就可以层层解构赋值。比如下面的代码：

let [a, [b], d] = [1, [2, 3], 4]; console.info(a); console.info(b); console.info(d);

请留意[b]这个语句，它对应的是实际数组中的[2,3]，因此这个语法解析的便是[2,3]中的元素，因此获得的应该是2这个数值，如下图所示：

我们把上述的代码稍微做点改变，输出的结果就会大不一样。代码如下：

let [a, b, d] = [1, [2, 3], 4]; console.info(a); console.info(b); console.info(d);

输出的结果则如下图所示：

可以看到这次的变量b输出的就是[2,3]这个数组了。

十、字符串解构

字符串本身也是一个对象，可以作为对象进行解构赋值。比如下面的代码：

let { length } = 'Welcome you!'; console.info(length);

上述代码实际上解构赋值的是字符串的length属性。

字符串可以当成一个数组解构赋值。如下代码：

let [a, b, c] = "Welcome you!"; console.info(a); console.info(b); console.info(c);

输出的结果如下图所示：

 十一、解构规则

ES6的解构赋值遵循一个规则：要左右两边的模式相同，就可以进行合法赋值。如下面的示例代码：

let [a, b, c] = [1, 2, 3]; let [d, [[e], f]] = [1, [[2], 3]];

如果解构不成功，变量值等于undefined，比如下面的代码：

let [a, b] = [1]; console.info(a); console.info(b);

上述代码输出的结果如下图所示：

十二、其他解构

通过解构赋值，我们可以很容易的把对象的方法赋值给变量。比如下面的代码：

const { log } = console; log('Welcome you!');

上面的代码中，我们将console.log()函数解构赋值给了log变量，然后就可以直接通过log变量来调用console.log()了。

定义别名的语法在这种情况下同样的适用。代码如下：

const { log:mylog } = console; mylog('Welcome you!');

上面的代码也能成功被执行，并且在控制台输出对应的内容，如下图：