返回列表 回复 发帖

[JavaScript] ES6中对象属性初始值的简写

在ES5及更早的版本中,对象字面量只是简单的键值对集合,这意味着初始化属性值时会有一些重复:
  1. function person(name, age, job) {
  2.     return {
  3.         name: name,
  4.         age: age,
  5.         job: job
  6.     }
  7. }
复制代码
person()函数创建了一个对象,这个对象的属性名和函数的参数相同,在返回的结果中name、age和job分别重复了两遍,只是其中一个是对象属性的名称,另外一个是对象属性赋值的变量。

在ES6中,当一个对象的属性名和本地变量同名时,不必再写冒号:和值,简单地只写属性名即可:
  1. function person(name, age, job) {
  2.     return {
  3.         name,
  4.         age,
  5.         job
  6.     }
  7. }
复制代码
当对象字面量里只有一个属性的名称时,JavaScript引擎会在可访问的作用域中查找其同名的变量;如果找到,则该变量的值就会被赋值给对象字面量里的同名属性。比如在上面的示例代码中,对象的字面量的属性name被赋值为局部变量name的值。
对象方法简写

在ES6中,除了对象的属性可以简写之外,对象中的方法也可以简写。在ES5中,如果为对象添加方法,必须通过指定名称并完整定义函数来实现,比如:
  1. var person = {
  2.     name: 'w3cplus',
  3.     sayName: function() {
  4.         console.log(this.name)
  5.     }
  6. }
复制代码
在ES6中,通过省略冒号:和function关键词,使对象中的语法变得更加简洁。所以上面的示例可以修改成:
  1. var person = {
  2.     name: 'w3cplus',
  3.     sayName() {
  4.         console.log(this.name)
  5.     }
  6. }
复制代码
在这个示例中,person对象中创建一个sayName()方法,该属性被赋值为一个匿名函数表达式,它拥有在ES5中定义的对象方法所具有的全部特性。二者唯一的区别是,简写方法可以使用super关键词。
返回列表