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

时间:2019-04-25 17:59:57

标签: javascript ecmascript-6

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

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

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

2 个答案:

答案 0 :(得分:2)

这实际上与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提供给您的脚本的最后一个值的日志结果-在这种情况下为字符串。

答案 1 :(得分:-1)

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