Javascript 对象字面量：{a, b, c} 究竟是什么？答案

【问题标题】：Javascript object literal: what exactly is {a, b, c}?Javascript 对象字面量：{a, b, c} 究竟是什么？
【发布时间】：2022-11-25 18:08:43
【问题描述】：

我的问题最好通过this 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 的简写吗？

【问题讨论】：

第一个实际上不是 JSON。
That's not the only shorthand, there are a few more in ES6
好的@GolezTrol 它不是严格意义上的 JSON，因为键不在双引号中。那么究竟是什么将你在我的帖子中调用了d数据结构？
重要的是要了解所有版本都不是有效的 JSON。将数据表示为 JSON 字符串的方式是 {"a" : 1, "b" : "x", "c" : true }
好的，我已经编辑了我的帖子，谢谢。

标签： javascript ecmascript-6

【解决方案1】：

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

有关详细信息，请参阅Object initializer。

【讨论】：

【解决方案2】：

它是 ES6 中的对象初始化器Property Shorthand。

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

这是可行的，因为属性值与属性标识符具有相同的名称。这是语法的新添加对象初始化器(section 11.1.5) 在最新的ECMAScript 6 draft Rev 13。当然，就像 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();

【讨论】：

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

【解决方案3】：

var f = {a, b, c};          // <--- what exactly is this??

它使用新的 ECMAScript 2015 符号在 JavaScript 中定义一个对象：

根据Mozilla Developer Network：

“可以使用 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
};

【讨论】：