若有疑问,欢迎评论,我会尽快回复。
对象字面量
在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() {
//...
}
}
};
坑点
- 在MVVM框架中,引擎需识别某些关键属性的固定键名以正常运行,若使用自定名称的对象简化,会导致错误。
具体案例可参考vue 路由引入错误 Error in render function: “TypeError: Cannot read property ‘matched’ of undefined”