what is “解构”？
ES6提出的“解构”是什么？
在js中，万物均是对象，字符串、数组、对象、函数都是对象，所谓“解构”，也就是将上述数据结构进行解析的过程，使提取其中的数据变得更加容易、方便、快捷。
首先，我们来看一个例子，在以前的JS版本中，我们要从对象或数组中获取里面数据，需要存入本地变量，书写许多类似代码，例如：
let obj = {
name:"掘金",
webSite:"www.juejin.com"
}
// 从obj对象中获取数据
let name = obj.name, webSite = obj.webSite
上述代码看起来看简单，但我们想象一下，如果需要大量变量需要处理，必须要逐个赋值，那工作量就大了很多，且枯燥！
对象解构
ES6提供了新的对象解构语法，例如上述例子用解构语法表示为：
let obj = {
name:"掘金",
webSite:"www.juejin.com"
}
// obj对象解构
let { name, webSite} = obj
console.log(name) // => "掘金"
console.log(webSite) // => "www.juejin.com"
看起来是不是精简了代码？
name与 webSite不仅声明了同名本地变量，也读取了obj这个对象的相应属性值，上面示例用于了变量声明。
对象解构也适用于变量赋值时，例如：
let obj = {
name: "掘金",
webSite: "www.juejin.com"
}
// obj对象解构
({ name,webSite } = obj)
console.log(name) // => "掘金"
console.log(webSite) // => "www.juejin.com"
注意，解构赋值时，需要用圆括号()来包括解构解构赋值语句，否则暴露的花括号会被识别成代码块语句出错，圆括号()括起来的内容解释为表达式，从而完成赋值。
如果使用解构赋值时，命名的本地变量在对象中找不到同名的属性，那么该变量值为undefined，下述代码定义了一个不能匹配obj属性的sex，所以它的值为undefined。
let obj = {
name: "掘金",
webSite: "www.juejin.com"
}
// obj对象解构
let {
name,
webSite,
sex
} = obj
console.log(name) // => "掘金"
console.log(webSite) // => "www.juejin.com"
console.log(sex) // => undefined
以上，均使用的对象属性名作为变量名，那么如果不打算使用同名变量的话，我们可以使用下面方法将变量名重命名：
let obj = {
name: "掘金",
webSite: "www.juejin.com"
}
// obj对象解构
let {
name: webName,
webSite: webPage
} = obj
console.log(webName) // => "掘金"
console.log(webPage) // => "www.juejin.com"
对象如果有嵌套对象或数组，可采用下面方式，例如：
let obj = {
name: "掘金",
webSite: "www.juejin.com",
category: [
"沸点", "课程", "直播", "活动", "商城", "APP", "插件"
],
webInfo: {
address: "北京",
tel: "010-88887777"
}
}
// obj对象解构
let {
webInfo,
category
} = obj
console.log(webInfo.address) // => "北京"
console.log(webInfo.tel) // => "010-88887777"
for (var i = 0; i < category.length; i++) {
console.log(category[i]);
}
数组解构
数组解构语法类似对象解构，以掘金网站栏目分类为例：
let category = ["沸点", "课程", "直播", "活动", "商城", "APP", "插件"];
// 数组category的解构
let [favoriteCat1, favoriteCat2, favoriteCat3] = category
console.log(favoriteCat1, favoriteCat2, favoriteCat3); // => "沸点 课程 直播"
同对象解构同样可以在赋值表达式中使用数组解构：
let category = ["沸点", "课程", "直播", "活动", "商城", "APP", "插件"];
// 数组category的解构
[favoriteCat1, favoriteCat2, favoriteCat3] = category
console.log(favoriteCat1, favoriteCat2, favoriteCat3); // => "沸点 课程 直播"
需要注意的时，数组解构不需要外层的圆括号()。
数组解构，可以轻松的交换两个变量值：
let webName = "掘金",
newWebName = "新掘金";
[webName, newWebName] = [newWebName, webName]
console.log(webName); // => "新掘金"
console.log(newWebName); // => "掘金"
与对象解构一样，当数组下标成员不存在时，其值也会定义成undefined。
let category = ["沸点", "课程"];
// 数组category的解构
[favoriteCat1, favoriteCat2, favoriteCat3] = category
console.log(favoriteCat3); // => undefined
在解构语法中，允许给添加默认值，当数组下标成员不存在或值为undefined时，该默认值就赋值给变量。
let category = ["沸点", "课程"];
// 数组category的解构
[favoriteCat1, favoriteCat2, favoriteCat3 = "活动"] = category
console.log(favoriteCat3); // => "活动"
同对象解构赋值，嵌套数组的解构赋值也采取类似的方式，下例中favoriteCat2被解析成了["商城", "APP"]这个数组。
let category = ["沸点", ["商城", "APP"], "课程"];
// 数组category的解构
[favoriteCat1, favoriteCat2] = category
console.log(favoriteCat2); // => "(2) ["商城", "APP"]"
ES6中新增了...的剩余项扩展运算符，在数组里可以利用它来实现将数组的剩余成员赋值给变量，请看以下范例：
let category = ["沸点", "课程", "直播", "活动", "商城", "APP", "插件"];
// 数组category的解构
[favoriteCat1, favoriteCat2, ...favoriteCat3] = category
console.log(favoriteCat1); // => "沸点"
console.log(favoriteCat2); // => "课程"
console.log(favoriteCat3); // => (5) ["直播", "活动", "商城", "APP", "插件"]
favoriteCat1对应了category[0]，favoriteCat2对应category[1]，而其余的5个成员则通过...一并赋值给了favoriteCat3。
基于上例所示，...运算符亦可运用到复制数组上：
let category = ["沸点", "课程", "直播", "活动", "商城", "APP", "插件"];
[...newCategory] = category;
console.log(newCategory); // => (7) ["沸点", "课程", "直播", "活动", "商城", "APP", "插件"]
函数参数解构
解构有一个很重要的作用就是函数参数解构：
let category = ["沸点", "课程"];
function myLikeCat([cat1, cat2]) {
return `我喜欢掘金的两个栏目是${cat1}和${cat2}。`
}
console.log(myLikeCat(category)); // => "我喜欢掘金的两个栏目是沸点和课程。"
函数参数解构时，也可以使用默认值：
function myLikeCat({
cat1 = "沸点",
cat2 = "课程"
} = {}) {
return `我喜欢掘金的两个栏目是${cat1}和${cat2}。`
}
console.log(myLikeCat({
cat1: "商城"
})); // => "我喜欢掘金的两个栏目是商城和课程。"
字符串的解构
字符串解构相对比较简单，下例把“我爱掘金”四个汉字对应赋值给love四个变量。
const [l, o, v, e] = '我爱掘金';
console.log(l); // => 我
console.log(o); // => 爱
console.log(v); // => 掘
console.log(e); // => 金
总结
解构赋值主要帮助我们在获取对象或数组成员是更加方便、快捷，主要应用交换变量值、函数返回多个值、函数参数默认值、提取JSON数据、加载指定模块方法上。快快掌握这个语法吧，提高开发效率~~~
我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。
