Javascript 对象文字: { a，b，c }到底是什么？

我的问题最好通过 这把小提琴提出，代码如下:

var a = 1, b = 'x', c = true;


var d = {a: a, b: b, c: c}; // <--- object literal
var e = [a, b, c];          // <--- array
var f = {a, b, c};          // <--- what exactly is this??


// these all give the same output:
alert(d.a  + ', ' + d.b +  ', ' + d.c );
alert(e[0] + ', ' + e[1] + ', ' + e[2]);
alert(f.a  + ', ' + f.b +  ', ' + f.c );

什么样的数据结构是 f? 它只是 d的简写吗？

7235 次浏览
小开 
var f = {a, b, c};

It came with ES6 (ECMAScript 2015) and means exactly the same as:

var f = {a: a, b: b, c: c};

It is called Object Literal Property Value Shorthands (or simply property value shorthand, shorthand properties).

You can also combine shorthands with classical initialization:

var f = {a: 1, b, c};

For more information see Object initializer.

小开
最佳答案

It is an Object Initializer Property Shorthand in ES6.

var f = {a, b, c, d:1}; // Will be equal to {a:a, b:b, c:c, d:1}

This works because the property value has the same name as the property identifier. This a new addition to the syntax of Object Initialiser (section 11.1.5) in the latest ECMAScript 6 draft Rev 13. And of course, just like the limitations set from ECMAScript 3, you can’t use a reserved word as your property name.

Such a shorthand won’t dramatically change your code, it only makes everything a little bit sweeter!

function createCar(name, brand, speed) {
return { type: 'Car', name: name, brand: brand, speed: speed };
}


// With the new shorthand form
function createSweetCar(name, brand, speed) {
return { type: 'Car', name, brand, speed }; // Yes it looks sweet.
}

Please see the compatibility table for support for these notations. In non-supporting environments, these notations will lead to syntax errors.

This shorthand notation offers object matching pretty nicely:

In ECMAScript5 what we used to do:

var tmp = getData();
var op  = tmp.op;
var lhs = tmp.lhs;
var rhs = tmp.rhs;

Can be done in ECMAScript6 with a single line of code:

var { op, lhs, rhs } = getData();
小开 
var f = {a, b, c};          // <--- what exactly is this??

It defines an object in JavaScript using the new ECMAScript 2015 notation:

As per Mozilla Developer Network:

"Objects can be initialized using new Object(), Object.create(), or using the literal notation (initializer notation). An object initializer is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({})." 

var a = "foo",
b = 42,
c = {};


// Shorthand property names (ES6)
var o = { a, b, c };

is equivalent to:

var a = "foo",
b = 42,
c = {};


var o = {
a: a,
b: b,
c: c
};

提交答案