Javascript 对象字面量:{a, b, c} 到底是什么?

IT技术 javascript ecmascript-6
2021-02-06 15:35:10

我的问题最好通过这个 jsfiddle 给出,其代码如下:

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吗?

3个回答
var f = {a, b, c};

它随 ES6 (ECMAScript 2015) 一起提供,含义与以下内容完全相同:

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

它被称为 Object Literal Property Value Shorthands(或简称为属性值速记,速记属性)。

您还可以将速记与经典初始化结合起来:

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

有关更多信息,请参阅对象初始值设定项

它是ES6 中的对象初始化器属性简写

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

这是有效的,因为属性值与属性标识符具有相同的名称。这是最新的ECMAScript 6 草案 Rev 13对象初始化器第 11.1.5 节语法的新增内容当然,就像 ECMAScript 3 设置的限制一样,您不能使用保留字作为属性名称。

这样的速记不会显着改变您的代码,它只会让一切变得更甜蜜!

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.
}

请参阅兼容性表以获取对这些符号的支持。在非支持环境中,这些符号会导致语法错误。

这个速记符号很好地提供了对象匹配:

ECMAScript5 中,我们过去常常这样做:

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

可以用一行代码ECMAScript6中完成

var { op, lhs, rhs } = getData();
为什么这会如此有用以至于成为一种语言功能?人们似乎更常见的是直接使用文字、返回值等初始化对象,或者只是先创建对象,然后直接设置属性。创建具有相同名称的变量,实例化它们,然后最终像这样初始化对象似乎很不寻常……或者是吗?
2021-03-18 15:35:10
@Alex 这是“怪癖”还是“复杂”?您通常在许多代码库中发现的一个非常常见的事情是初始化一个对象,其中键与作为值{id: id, data: data, isSelected: isSelected}给出的变量相匹配。在将对象映射到本地对象然后返回时会发生很多情况。在大多数情况下,您不想稍微不同地命名您的东西{identifier: id, viewData: data, isElementSelected: isSelected },这正是您所谈论的“古怪”、“复杂”和“令人困惑”。
2021-03-18 15:35:10
@Panzercrisis 从 lambda 函数返回一个元组非常有用,例如(a, b) => {a, b}. 这至少是我在C#.
2021-03-29 15:35:10
@Panzercrisis 我认为,如果您将 a、b 和 c 想象为更复杂的数据结构并且 f 还包含其他复杂属性,那至少是有道理的。仍然不确定这是一个好主意,但我可以看到它很有用。
2021-04-02 15:35:10
@Panzercrisis 就个人而言,这似乎只会导致许多意外且难以发现的错误。与允许if(a = 1) {...}有效语法的方式大致相同
2021-04-03 15:35:10
var f = {a, b, c};          // <--- what exactly is this??

它使用新的 ECMAScript 2015 表示法在 JavaScript 中定义了一个对象:

根据Mozilla 开发者网络

“可以使用 new Object()、Object.create() 或使用文字符号(初始化符号)来初始化对象。对象初始化器是对象的零对或多对属性名称和关联值的列表,包含在大括号 ({})。”

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

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

相当于:

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

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