[译]ECMAScript 6:对象字面量中的属性值简写

时间:2021-05-20 14:51:30

原文:http://ariya.ofilabs.com/2013/02/es6-and-object-literal-property-value-shorthand.html


使用字面量语法来构建对象是每个JavaScript开发者都非常熟悉的,尤其还因为这种写法和JSON的语法非常相似.在对象子面量中,每个对象属性可以由一个键值对或者由一对getter/setter组成,但这样的写法可能会发生变化.ECMAScript 6中新增的一种语法糖称为对象字面量中的属性值简写(object literal property value shorthand).

考虑下面的ECMAScript 5代码片段:

function createMonster(name, power) {
  return { type: 'Monster', name: name, power: power };
}
function createWitch(name) {
  return { type: 'Witch', name: name };
}

如果使用了新的属性简写形式,则上面的代码可以写成:

function createMonster(name, power) {
  return { type: 'Monster', name, power };
}
function createWitch(name) {
  return { type: 'Witch', name };
}

正如你所看到的,能这样使用有一个前提条件,那就是属性的名称必须要和代指属性的值的变量的名称相同.这是最新的ECMAScript 6草案Rev 13中的Object Initialiser(section 11.1.5)语法的一种形式.当然,和ECMAScript 3的限制一样,你不能使用保留字来作为属性名(译者注:这句话不理解,ES3中可以使用关键字作为属性名呀,比如{function:1}).

现实世界中的代码该如何使用这种简写形式?在Backbone.js中,我们可以使用下面这种形式的代码来代替以前的旧代码:

route: function(route, callback) {
  this.handlers.unshift({route, callback});
},

为了提高可读性,我们需要在构建对象之前使用临时变量.另外一个例子,一段QUnit代码可以简写成这样:

test = new Test({nameHtml, testName, expected, async,
  callback,module: config.currentModule,
  moduleTestEnvironment: config.currentModuleTestEnvironment,
  stack: sourceFromStacktrace(2)
});

这样的简写形式并不会很大程度的改变你的代码,只会让你的代码更加易读!