![Vue.js 3.0从入门到精通(视频教学版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/154/44510154/b_44510154.jpg)
上QQ阅读APP看书,第一时间看更新
3.7 增强的对象文本
ES6添加了一系列功能来增强对象文本,从而使得处理对象更加轻松。
1.通过变量进行对象初始化
在ES5中,对象的属性通常是由具有相同名称的变量创建的。例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P44_164875.jpg?sign=1738985051-bCvtD8Xq8LduWvZMyFV89tT1GIzKdAxw-0-379f0968427d7ab00588eb8b84e231e1)
在ES6中,简化如下:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P44_164876.jpg?sign=1738985051-HC6yWt2z2w0G4Q1yZAz0KZRE3sAtgrh7-0-b8228a1971cea0fa36fb3ac12079c22c)
2.简化定义对象方法
在ES5中,定义对象的方法需要function语句。例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P44_164877.jpg?sign=1738985051-iTSt8jFXKZpqXMmf8IokhgZetecNw6To-0-f1793e5432c784f09ac9c69b288bba55)
在ES6中,定义对象的方法简化如下:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P44_165330.jpg?sign=1738985051-o8VsQYmrNhymZblbTGm2pP1k2waN95y8-0-da27d48f96df40bc21e6c73cd07ec1b8)
这里不能使用ES6箭头函数(=>),因为该方法需要一个名称。如果直接命名每个方法,则可以使用=>箭头函数。例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P45_164879.jpg?sign=1738985051-mYc8qCE7cwPPAATgG0FZ3gR509Yx5Sfp-0-73e273370f4a7c33da6941efccddc2fb)
3.动态属性键
在ES5中,虽然可以在创建对象之后添加变量,但是不能使用变量作为键名称。例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P45_164880.jpg?sign=1738985051-AeZiIGeNZHJdgYwiJmUrpt6RhRgbR8cX-0-410113e000d43ec83d880059d4da28dd)
通过在方括号[]内放置表达式,可以在ES6中动态分配对象键。例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P45_164881.jpg?sign=1738985051-SnPrm1jy9d1Oeg9Q2ibBA484DK1g5peX-0-6dac7abd8c32774d6c70325d0a31b7c1)
4.解构对象属性中的变量
在ES5中,可以将对象的属性值提取到另一个变量中。例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P45_164882.jpg?sign=1738985051-xqJbgQ5gWgLiumJct1J8Hpagd0aqAp67-0-f5ed2f8b672c3e7af49b477819a1cb83)
在ES6中,通过解构可以创建与等效对象属性同名的变量。例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P45_164883.jpg?sign=1738985051-YKKECWJMNxo7XWMfU2OdIpquhPXhufr6-0-e04849f5bf7b2e691eb83a64e545e6e7)