- Vue.js 3.0从入门到精通(视频教学版)
- 李小威编著
- 327字
- 2022-07-27 18:37:38
3.7 增强的对象文本
ES6添加了一系列功能来增强对象文本,从而使得处理对象更加轻松。
1.通过变量进行对象初始化
在ES5中,对象的属性通常是由具有相同名称的变量创建的。例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P44_164875.jpg?sign=1739181819-A5X0rXZzrkSYZKuIgih0BvjJqYb1eSgc-0-bbe2824589e9f58becd8f2e0844922da)
在ES6中,简化如下:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P44_164876.jpg?sign=1739181819-VJsU9WHDHsHQBzRwEaXfIlNxArRY7vTM-0-b6ef01289f87a423f79d888a7db739e4)
2.简化定义对象方法
在ES5中,定义对象的方法需要function语句。例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P44_164877.jpg?sign=1739181819-g82THL4HZmv43MKlaiICPx3QQtuc5Kqd-0-3b6586640ff9c76da70d556e8c7a6f1f)
在ES6中,定义对象的方法简化如下:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P44_165330.jpg?sign=1739181819-IiedLaBzi69W8dJ49qzwTBSzCGhlQdRY-0-0d512b501dc70dc7774959823bdfac47)
这里不能使用ES6箭头函数(=>),因为该方法需要一个名称。如果直接命名每个方法,则可以使用=>箭头函数。例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P45_164879.jpg?sign=1739181819-3Wa3rZMTXLpv71zDsj8DDYW03skFf5o2-0-af0a26c58a008f816b1231eb376ed90b)
3.动态属性键
在ES5中,虽然可以在创建对象之后添加变量,但是不能使用变量作为键名称。例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P45_164880.jpg?sign=1739181819-RkQEsT54w9KRGCEeM9JHHklnZpsIdTa3-0-19ea85a92ea8d1edd9ec7ace5a39f68f)
通过在方括号[]内放置表达式,可以在ES6中动态分配对象键。例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P45_164881.jpg?sign=1739181819-nVKZj0ills5dIXfLzJmCSf5HJwQnvIqO-0-36cfa83202175d22d543ee91e6f30745)
4.解构对象属性中的变量
在ES5中,可以将对象的属性值提取到另一个变量中。例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P45_164882.jpg?sign=1739181819-wpwgWjA1obLyhMduf0nWWqKBH5qled8r-0-9ba6afe179dbeb70d37e4b18e1faee30)
在ES6中,通过解构可以创建与等效对象属性同名的变量。例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P45_164883.jpg?sign=1739181819-5USVl4HSZK2cprQFX48M7oqiNy4jlOKl-0-14e1ef054d6454fb60d4ef5ceca4092b)