ES6解构

亲爱的小伙伴，你ES6的解构了解多少呢，下边就让我来分享一下自己对ES6解构的学习经验吧。

1.数组解构

1.1完全解构

对于数组的完全解构需要，等号两边匹配模式完全一致，即如下

 结果如下

如果两边匹配模式不一致，将有如下结果

1.2不完全解构

如下图中，d变量只解构出[4,5,6]中的4

1.3集合解构

对于结合解构 ，就是使用 “...”拓展运算符，将数组中还剩下未解构的元素，集合解构为一个数组

这里a将元素1解构后，数组中还剩下 2,3,4元素，他们会被解构为一个b数组

1.4默认值解构

所谓默认值解构，就是给用来解构的变量设置默认值，当被解构的元素不存在时，该变量的值就等于默认值

当解构的数组元有该元素时，解构的变量值等于数组元素值

等解构的数组元没有该元素时，解构的变量值等于设置的默认值

 

 

1.5默认值也可以是函数

这里将变量默认值设置为test函数的执行，被解构的数组元素不存在

输出的是这个函数的执行，之所以打印结构中有2 ，是因为test函数的返回值为2

1.6数组解构深拷贝

这里，使用arr变量，将数组a结构为一个arr数组，使用“===”运算符判断两个数组是否全等

打印结果为false，说明两者在数据类型和值都相同的情况下，引用地址不相同，所以数组的解构是值的传递，故数组的解构是深拷贝

2.对象解构

关于对象的解构，这里需要基本说明一下，如下图，以name为例，name是用于结构的变量名，a是对这个变量的重命名。这里需要注意的是，对象的属性没有次序，变量必须与属性同名，才能取到正确的值

2.1不给变量重命名

这里以name为例，这里的name相当于，name:name,它的名称就是name

最终打印结果如下

2.2给变量重命名

这里给name变量重命名为a，给age变量命名为b

2.3默认值解构

给解构变量命名的同时，为其设置默认值，当被解构的对象中没有该属性时，变量的值就为默认值

1.被解构对象有该属性值时

解构变量的值为属性值

2.被解构对象中没有该属性值时

解构变量的值为默认值

2.4嵌套解构

对于嵌套解构，就是混合有数组和对象的解构

这里对于a，b的值的分析，首先考虑最外层的解构是对象的解构；然后对象的属性值为数组，再进行数组的解构，数组中第一个值的解构就是a，第二个值是对象，再对对象进行解构，b的值就为“world”

 

3.字符串解构

3.1使用数组解构

普通解构

集合解构

​​​​​​​

3.2使用对象解构

这里是将字符串当成了String基本包装器类型，这里可以获取到包装器构造函数原型对象中的方法

​​​​​​​

4.数值解构

使用对象解构

这里是将数值当成了Number基本包装器类型，这里可以获取到包装器构造函数原型对象中的方法

 

 

5.布尔值解构

使用对象解构

这里是将布尔值当成了Boolean基本包装器类型，这里可以获取到包装器构造函数原型对象中的方法