{x:1} 是什么以及为什么它返回 1 🤷‍♂️

最近，我发现，当你在相应的浏览器开发工具（Chrome 和 Firefox）中输入时，会出现一些奇怪的行为。{x:1}

Firefox 的回归让我很惊讶1。我原本期待着和 Chrome 一样的响应，即{x:1}格式良好，并包含所有常见的原型内容。

经过一番挖掘，我想我终于明白发生了什么。

让我们一步一步地回顾一下。

首先要明确的{x:1}是，JSON 格式实际上并非 JSON，因为 JSON 中的键需要用双引号括起来。（而且 JSON 格式本身也不被视为有效的 JavaScript 代码）

从技术上讲，我们从不在 JavaScript 中处理 JSON，除非它是字符串文字，'{ "x" : 1 }'我们将它输入到其中JSON.parse或其他什么情况。

程序员主要处理诸如这样的对象文字const obj = {x:1}。

但{x:1}它本身并不是一个对象字面量。事实上，它是完全不同的东西。

如果你剖析一下，{x:1}你会发现外部实际上是一个块语句。

块语句（或其他语言中的复合语句）用于对零个或多个语句进行分组。

你内心有一个所谓的标签语句

带标签的语句非常少见，而且用处不大。它的作用有点像GOTOcontinue 。但你只能使用或命令跳转到标签break。

loop1:
for (let i = 0; i < 5; i++) {
  if (i === 1) {
    continue loop1;
  }
  str = str + i;
}

您可以在示例中看到{x:1}，x是标签名称，1是语句。在 Web 控制台中输入的语句将被直接返回。

这就是为什么1当您{x:1}在控制台中输入时 Firefox 会打印的原因。

如果您深入研究 MDN，您会偶然发现有关对象文字的这个警告。

好吧，我们通过艰难的方式和绕道学到了这一点。

但是，为什么{x:1}在输入 Google Chrome 开发者工具时，它会执行 99.9% 的开发人员所期望的操作呢？

答案可以在实际的 Web 控制台的源代码中找到。

Chrome 假设大多数开发人员打算将对象文字输入到 Web 控制台中，因此它会做一些小技巧。

它又{}被()javascript分组运算符包裹。

分组运算符由一对括号括住表达式或子表达式组成，用于覆盖正常的运算符优先级，以便优先级较低的表达式可以在优先级较高的表达式之前进行求值。顾名思义，它将括号内的内容分组。

所以最终 chrome 执行的是({x:1})。出于某种原因，我仍然不完全清楚这一点（请在评论中指点我！），它将块语句中的标记语句转换为对象文字。

使用 Firefox，您只需手动执行此操作。

我希望您像我一样喜欢这次调查，并请务必在 Twitter 上关注我@h43z以了解更多有趣的内容。