Почему точка с запятой влияет на инициализацию объекта в es6?

Question

Единственная разница в следующем коде - точка с запятой.

Может кто-нибудь сказать мне, почему результат отличается?

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

Answer 1

Это на самом деле не связано с JavaScript или браузерами, а именно с тем, как Chrome DevTools анализирует выражения.Если вы выполняете свой код в обычном скрипте, вы не столкнетесь с таким поведением.Я немного наткнулся на то, почему в этом ответе .

Вот что происходит:

key = 'value'    // "value"

это определяет переменную (в глобальной области в нестрогомmode) и присваивает ему значение.

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

Это блок, devtools Chrome видит это и оборачивает объект .Он запускает регулярное выражение для вашего кода и специально проверяет, выглядит ли он как литерал объекта:

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"

С другой стороны, в конце точка с запятой, так как приведенный выше код преобразует его в ({key};), который является недопустимым JavaScript, код предварительной обработки в Chrome devtools вводится в catch и возвращает исходный код.

Это оператор , а не выражение.По сути анализируется как:

{
  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).