不知不觉,就用了后现代的解构等词汇~但在ES6的环境当中,它是有确切所指的【不知不觉,又想起拉康的能指和所指】。
对象字面量简写
main.js中
new Vue({
router,
store,
i18n,
......
}).$mount('#app')
如果按ES5的写法,那至少得写成
new Vue({
'router': router,
'store': store,
'i18n': i18n,
......
}).$mount('#app')
在ES6中如果你的对象属性名和当前作用域中的变量名相同,那么没有必须要书写两次。ES6的对象会自动的帮你完成键到值的赋值。
当然,如果属性名和变量名不一样,那么仍然可以使用'routerCustom': router这样的语法来自定义属性名。
对象解构赋值
bootstrap.js中
function bootstrap({router, store, i18n, message}) {
// 设置应用配置
setAppOptions({router, store, i18n})
......
}
routerUtil.js中的setAppOptions函数的定义
//应用配置
let appOptions = {
router: undefined,
i18n: undefined,
store: undefined
}
/**
* 设置应用配置
* @param options
*/
function setAppOptions(options) {
const {router, store, i18n} = options
appOptions.router = router
appOptions.store = store
appOptions.i18n = i18n
}
ES6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称之为解构(Destructuring)。
调用setAppOptions时,传递的是一个字面量简写的对象{router, store, i18n}。
而setAppOptions, 将接收到的options对象,通过解构(const {router, store, i18n} = options),快速的将值赋给了router, store, i18n这三个变量。