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

【问题标题】：Javascript object literal: what exactly is {a, b, c}?Javascript 对象字面量：{a, b, c} 到底是什么？
【发布时间】：2016-03-28 15:41:54
【问题描述】：

我的问题最好通过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
OK @GolezTrol 它不是严格的 JSON，因为键不在双引号中。那么在我的帖子中，您究竟会将称为d 数据结构吗？
重要的是要了解所有版本都不是有效的 JSON。将数据表示为 JSON 字符串的方式是 {"a" : 1, "b" : "x", "c" : true }
@drmrbrewer 这是一个object literal。它不是 JSON，因为它是 javascript 代码，而 JSON 是一种序列化格式。例如var a = '{ "a" : "value"}' -> a 包含一个可以通过JSON.parse 反序列化为对象的字符串。

标签： 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}

之所以有效，是因为属性值与属性标识符具有相同的名称。这是对最新 ECMAScript 6 draft Rev 13 中 Object Initialiser (section 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();

【讨论】：

为什么它会如此有用，以至于成为一种语言功能？人们似乎更常见的是直接使用文字、返回值等初始化对象，或者先创建对象，然后直接设置属性。创建具有相同名称的变量，实例化它们，然后最终像这样初始化对象似乎很不寻常......或者是这样吗？
@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
};

【讨论】：