本文我们介绍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!');

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

05-ES6语法：解构赋值相关推荐

ES6语法~解构赋值、箭头函数、class类继承及属性方法、map、set、symbol、rest、new.target、 Object.entries......
2015年6月17日 ECMAScript 6发布正式版本前面介绍基本语法, 后面为class用法及属性方法.set.symbol.rest等语法. 一.基本语法: 1. 定义变 ...
ES6语法---解构赋值
解构赋值概念按照一定的模式,从数组和对象中提取值,对变量进行赋值,就被称为解构. 目的是为了提高效率,使用起来更加方便. 以下的各个说明,我会类比着ES5去解释,希望能帮到小伙伴们. 数组解构正常 ...
ES6 的解构赋值前每次都创建一个对象吗？会加重 GC 的负担吗？
本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...
ES6常用解构赋值有哪几种？
ES6常用解构赋值有哪几种? a.数组的解构赋值 //数组解析赋值,模式匹配 {let [a, b, c] = [1, 2, 3];console.log("模式匹配");cons ...
ES6新语法--解构赋值
对象解构赋值 ※很重要 /*** 对象解构赋值:获取元素中属性的值,然后赋值给变量*///声明一个对象 let obj = {name:'chen',age:38,gender:'man',score ...
es6学习 -- 解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c ...
ES6中解构赋值深入解读
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 1.数组的解构赋值 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail ...
前端面试不用怕！一分钟带你了解es6的解构赋值
解构赋值(★★★)!!!!! ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构 <script>var stus=['李钟硕','刘诗诗','易烊千玺']//访问数 ...
ES6：解构赋值及对象方法
解构赋值对象解构起别名:通过:来进行取名 //对象解构赋值 var obj = { uname: "张三", age: 21, sex: "男" } // ...
es6 - 解构赋值
一我们为什么要使用解构在学习ES6新的特性解构赋值之前,我们先来看看为什么要使用解构,以前如果我们需要获取对象或者数组里面的数据,并且把它们存入数组,需要写很多代码.如下 const person ...

05-ES6语法：解构赋值