ES6+ | 对象属性与方法简写

若有疑问，欢迎评论，我会尽快回复。

对象字面量

在JavaScript中，对象字面量是创建对象的一种方式，形式如下：

let a = 3
let obj = {
    a: a,
    b: 'b',
    func: function () {
        console.log(this.a,this.b)
    }
}

在ES6之前，对象字面量的属性与方法必须用严格的键值对形式定义。
而ES6提供了简化写法。

简写

在ES6中，上述代码可以简写为如下形式：

let a = 3
let obj = {
    a,
    b:'b',
    func(){
        console.log(this.a, this.b)    // 3  b
    }
}

属性简写

如果对象字面量的属性由外部变量引入，且键名与变量名相同，值不变，则可以只写键名。

let a = 3
let obj = {
	a
}

方法简写

对象字面量的方法可简写为xxx(){}的形式。

注意

尽管简写后，与类中定义方法相同，但对象字面量中的属性方法间仍需用逗号隔开。

let obj = {
    func(){
        console.log('hello')   
    }
}

应用

对象简写减少了重复代码，故其在基于对象的MVVM框架中被广泛应用。
以vue为例，大家感受一下：

import HomeHeader from "./pages/header";
import HomeSwiper from "./pages/swiper";
import HomeCategory from "./pages/category";
export default {
  components: {
    HomeHeader,
    HomeSwiper,
    HomeCategory,
  },
  data() {
    return {
   //...
    };
  },
  methods: {
    getHttp() {
    //...
    }
  },
  mounted() {
	//...
  },
  activated() {
 	//...
    }
  }
};

坑点

1. 在MVVM框架中，引擎需识别某些关键属性的固定键名以正常运行，若使用自定名称的对象简化，会导致错误。
   具体案例可参考vue 路由引入错误 Error in render function: “TypeError: Cannot read property ‘matched’ of undefined”