Vue Antd Admin源码中ES6的对象字面量简写和对象解构赋值

不知不觉,就用了后现代的解构等词汇~但在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这三个变量。

多学多看多思考,自然有所得~~

你可能感兴趣的:(Vue Antd Admin源码中ES6的对象字面量简写和对象解构赋值)