ES6允许按照一定的模式,从数组或对象中提取值,并对变量进行赋值。等式右边的必须是可迭代对象,否则就会报错。
例如 let [q, w, e] = [1, 2,3], 左右需要对应,如果左边长度大于右边长度,则解构不成功,左边为获取值的变量为undifined。如果右边长度大,则解构成功,
解构是允许赋予默认值,例如
let [a, b =1] = ['a'] b //1
es6中使用严格相等的运算符,如果一个位置上没值即严格等于undefined(null不算)才会使用默认值,例如:
let [x=1] = [2] x //2
对象的解构
对象的解构是没有次序的,变量必须要跟属性同名,才能取到值:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 let {aa, bb} = {bb:1, aa :2}; 2 aa // 2 3 bb //1 4 5 let {foo} = {bar :2}; 6 foo // undifined
实际上,对象的解构赋值的内部机制实现找到同名的属性,然后赋值给对应的变量,即冒号左面的匹配模式,右面的是变量或值,例如:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 let {foo:foo, bar:bar} = {foo:'hello', bar:'world!'}; 2 foo // hello 3 bar // world 4 5 let {foo:bar} = {foo:'hello', bar:'world!'}; 6 bar // hello 7 foo // foo is not defined
但是需要注意,如果等式左面的是嵌套对象,有面找不到与左面匹配的属性,就会报错:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
let {z:{c}} = {c:1}; // Cannot destructure property `v` of 'undefined' or 'null'
对象解构也有默认值,与数组的解构一样,为严格模式下等于undifined
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 let {x=2} = {}; 2 x // 2 3 let{x:y=2} = {x:3}; 4 y //3
对象解构应用数组
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 let arr = [1, 2, 3]; 2 let {0:first, [arr.length-1]:last} = arr; 3 first // 1 4 ast //3