ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)
解构赋值出现的契机：
let obj = {
a: 1,
b: 2
}
// 取值
let a = obj.a
let b = obj.b
问题核心：
每次取值既要确定对象属性名，还得重新定义一个变量占用多一行，代码行数和重复的声明a，使得代码不够简洁，能否通过左边变量名，匹配到右边的属性名从而取得对应的值，ES6解构语法核心就基于这样的模式匹配思想
上面的问题解构方案:
let obj = {
a: 1,
b: 2
}
// 取值
let {a, b} = obj
// a=1 b=2
很明显看到，我们无需在右侧显式声明取值属性名，完全依据右边结构进行对应取值，非常优雅
应用场景：
1、对象声明解构
let obj = {
a: 1,
b: 2
}
// 取值
let {a, b} = obj
// a=1 b=2
2、对象赋值解构
let a, b
let obj = {
a: 1,
b: 2
}
// 取值
({a, b} = obj)
// 更常见的场景是变量c d被声明到全局,这种情况在vue很常见，数据被提前声明到data选项，数据访问一般都是this.xxxdata,此时就很有用了
({a:c, b:d} = obj)
3、变量交换
[x,y] = [y,x]
4、数组解构
let [first,] = arr//获取
let [first, ...rest] = arr//获取第一个，以及剩余参数
5、函数对象实参解构
function buildAnimal({accessory = "", animal = "cat", color = 'rainbow', hairType = 'straight'} = {})
{...}
我们经常定义许多对象和数组，然后有组织地从中提取相关的信息片段。在ES6中添加了可以简化这种任务的新特性：解构。解构是一种打破数据结构，将其拆分为更小部分的过程。
1、解构赋值可以轻松获取对象或者数组中的数据
var jsonData = {
data: "111",
data2: ["test","test2"],
};
2、解构复制可以交换变量
var a=1,b=2,c=3,d=4; [a,b,c,d]=[d,c,b,a]; console.log(a,b,c,d);
结果： a=4，b=3，c=2，d=1
赋值的过程需要保证两边的数据格式匹配
[a,b,c,d]=[d,c,b,];
d的值将为underfinded
3.对象的解构赋值
let {obj, obj2 } = { obj: "666", obj2: "888" };
console.log(obj,obj2)
本文最后编辑 2019-07-23 11:18:56
原文链接：https://www.qiquanji.com/post/7823.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知