本文我们介绍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!');上面的代码也能成功被执行，并且在控制台输出对应的内容，如下图：
