Литерал объекта Javascript: что такое {a, b, c}?

Question

Вопрос, который у меня есть, лучше всего задать с помощью этого 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?

Answer 1

Это сокращение свойства инициализатора объекта в ES6.

var f = {a, b, c, d:1}; // Will be equal to {a:a, b:b, c:c, d:1}

Это работает, потому что значение свойства имеет то же имя, что и идентификатор свойства. Это новое дополнение к синтаксису Object Initializer ( раздел 11.1.5) в последней версии ECMAScript 6 Rev 13. И, конечно, как и ограничения, установленные в 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 = getDate();
var op  = tmp.op;
var lhs = tmp.lhs;
var rhs = tmp.rhs;

Может быть сделано в ECMAScript6 с помощью одной строки кода:

var { op, lhs, rhs } = getData();

Answer 2

var f = {a, b, c};

Он поставляется с ES6 (ECMAScript 2015) и означает точно так же, как:

var f = {a: a, b: b, c: c};

Он называется Сокращением значения свойства литерала объекта (или просто сокращением значения свойства, сокращением свойств).

Вы также можете комбинировать сокращения с классической инициализацией:

var f = {a: 1, b, c};

Для получения дополнительной информации см. Инициализатор объекта.

Answer 3

var f = {a, b, c};          // <--- what exactly is this??

Он определяет объект в JavaScript с использованием новой записи ECMAScript 2015:

Согласно сети разработчиков Mozilla:

"Объекты могут быть инициализированы с использованием 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
};