JavaScript ES6中的简写语法总结与使用技巧(6)

var { metadata: { gender: characterGender } } = character

在ES5 中，当你调用一个未曾声明的值时，你会得到undefined:

console.log(character.boots)
// <- undefined
console.log(character['boots'])
// <- undefined

使用解构，情况也是类似的，如果你在左边声明了一个右边对象中不存在的属性，你也会得到undefined.

var { boots } = character
console.log(boots)
// <- undefined

对于多层解构，如下述代码中，boots并不存在于character中，这时程序会抛出异常，这就好比你你调用undefined或者null的属性时会出现异常。

var { boots: { size } } = character
// <- Exception
var { missing } = null
// <- Exception

解构其实就是一种语法糖，看以下代码，你肯定就能很快理解为什么会抛出异常了。

var nothing = null
var missing = nothing.missing
// <- Exception

解构也可以添加默认值，如果右侧不存在对应的值，默认值就会生效，添加的默认值可以是数值，字符串，函数，对象，也可以是某一个已经存在的变量：

var { boots = { size: 10 } } = character
console.log(boots)
// <- { size: 10 }

对于多层的解构，同样可以使用默认值

var { metadata: { enemy = 'Satan' } } = character
console.log(enemy)
// <- 'Satan'

默认值和别名也可以一起使用，不过需要注意的是别名要放在前面，默认值添加给别名：

var { boots: footwear = { size: 10 } } = character

对象解构同样支持计算属性名，但是这时候你必须要添加别名，这是因为计算属性名允许任何类似的表达式，不添加别名，浏览器解析时会有问题，使用如下：

var { ['boo' + 'ts']: characterBoots } = character
console.log(characterBoots)
// <- true

还是那句话，我们也不是任何情况下都应该使用解构，语句characterBoots = character[type]看起来比{ [type]: characterBoots } = character语义更清晰，但是当你需要提取对象中的子对象时，解构就很简洁方便了。

我们再看看在数组中该如何使用解构。

数组解构

数组解构的语法和对象解构是类似的。区别在于，数组解构我们使用中括号而非花括号，下面的代码中，通过结构，我们在数组coordinates中提出了变量 x,y 。 你不需要使用x = coordinates[0]这样的语法了，数组解构不使用索引值，但却让你的代码更加清晰。