Question

以下代码中唯一的区别是分号。

谁能告诉我结果为何不同？

key = 'value'    // "value"
{key}         // {key: "value"}
{key};        // semicolon is only diff,    "value"

Answer 1

这实际上与JavaScript或浏览器无关，而是与Chrome DevTools如何解析表达式有关。如果您在常规脚本中运行代码，则不会遇到此行为。我碰到了in this answer的原因。

这是正在发生的事情：

key = 'value'    // "value"

这将定义一个变量（在非严格模式下在全局范围内）并为其分配一个值。

 {key}         // {key: "value"}

这是一个块，Chrome devtools看到了这个wraps the object。它针对您的代码运行一个正则表达式，并专门检查它是否看起来像对象文字：

try {
  // Check if the code can be interpreted as an expression.
  parse('return ' + code + ';');

  // No syntax error! Does it work parenthesized?
  const wrappedCode = '(' + code + ')';
  parse(wrappedCode);

  return wrappedCode;
} catch (e) {
  return code;
}

这可以解释为将{key}转换为({key})，它是对象文字并且可以使用。

{key};        // semicolon is only diff,    "value"

另一方面，它的末尾有分号，因为上述代码将其转换为无效的JavaScript ({key};)，因此Chrome devtools中的预处理代码进入catch子句并返回原始代码。

这是a statement，而不是表达式。基本上像这样解析：

{
  key;
}

在JavaScript中，每个语句都有一个“秘密”值，您只是看到REPL提供给您的脚本的最后一个值的日志结果-在这种情况下为字符串。

Answer 2

我们在办公室的测试表明这是对控制台的怪癖。如果尝试在脚本中使用带有或不带有分号的此构造，或者对它进行评估或将其分配给变量，则所有结果都会在支持对象初始化程序的浏览器中产生对象{key: "value"}。

在Chrome中进行测试，我们会看到与您类似的结果。在Firefox中，无论分号如何，它都会生成一个对象。在IE中，无论您是否在末尾使用分号，它都会输出字符串。

还值得注意的是，使用这种符号{key}创建对象以产生{key: "value"}的方法在IE中不起作用。在Chrome和Firefox中，浏览器将推断出您的意思，并使用对象初始化器（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015）生成对象。IE将询问您您的生活状况，因为它不支持它们。

您可以使用以下脚本创建类似的情况，该脚本将在控制台中运行，并为您带来令人惊讶的结果，但在脚本中无效。只需尝试预期这将在控制台中输出什么！

key1 = 'key';
key2 = 'key2';
{ {key1, key2} }

长话短说，但是，不要依赖真实脚本中的这种行为。使用标准符号定义对象（如果您是IE浏览器，则使用对象初始化程序）。

为什么分号会影响es6中的对象初始化？

2 个答案: