Буквальний об’єкт Javascript: що саме таке {a, b, c}?


88

Моє запитання найкраще задати за допомогою цього 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?


25
Перший насправді не є JSON.
GolezTrol


1
Добре @GolezTrol, це не суто JSON, оскільки клавіші не містять подвійних лапок. Тож як би ви назвали dструктуру даних у моєму дописі?
drmrbrewer

6
Важливо розуміти, що жодна з версій не є дійсним JSON. Спосіб представити дані як рядок JSON{"a" : 1, "b" : "x", "c" : true }
Бенджамін Груенбаум

14
@drmrbrewer Це об’єктний літерал . це не JSON, оскільки це код JavaScript , тоді як JSON - це формат серіалізації. Наприклад var a = '{ "a" : "value"}'-> aмістить рядок, який можна десеріалізувати до об'єкта через JSON.parse.
moonwave99

Відповіді:


71

Це скорочення властивостей об’єкта ініціалізації в ES6.

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

Це працює, оскільки значення властивості має те саме ім’я, що і ідентифікатор властивості. Це нове доповнення до синтаксису Object Initialiser ( розділ 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 = getData();
var op  = tmp.op;
var lhs = tmp.lhs;
var rhs = tmp.rhs;

Це можна зробити в ECMAScript6 за допомогою одного рядка коду:

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

10
Чому це було б так корисно, щоб стати мовною особливістю? Здається, набагато частіше було б, щоб люди або ініціалізували об’єкт безпосередньо літералами, повертали значення та подібні, або просто спочатку створювали об’єкт, а потім встановлювали властивості безпосередньо. Створення змінних з однаковими іменами, створення їх екземплярів, а потім остаточна ініціалізація об’єкта, подібного до цього, просто здається незвичним ... чи ні?
Panzercrisis

3
@Panzercrisis Здається, що це просто призведе до багатьох ненавмисних і важко знайти помилок особисто. Приблизно так само, if(a = 1) {...}як це робить дозволяючи як дійсний синтаксис.
Ентоні Грист,

1
@Panzercrisis Я думаю, що це принаймні має сенс, якщо ви уявляєте, що a, b і c як більш складні структури даних, а f також містять інші складні властивості. Досі не впевнений, що це чудова ідея, але я бачив, що це корисно.
Джош Румбут

1
@Panzercrisis може бути дуже корисно повернути кортеж з лямбда-функції, щось на зразок (a, b) => {a, b}. Принаймні так я використовував ту саму функцію в C#.
Вінсент ван дер Веель,

2
@Alex, як це "химерність" чи "комплекс"? Дуже поширена річ, яку ви зазвичай зустрічаєте у багатьох кодових базах, - це ініціалізація об’єкта, де ключ відповідає змінній, заданій як значення, {id: id, data: data, isSelected: isSelected}і т. Д. Багато трапляється при відображенні об’єктів, що надходять у локальні, а потім повертаються назад. У більшості випадків ви не хочете називати свої речі дещо інакше {identifier: id, viewData: data, isElementSelected: isSelected }- це саме те "химерне", "складне" та "заплутане", про яке ви говорите.
ВЛАЗ

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

Він поставляється з ES6 (ECMAScript 2015) і означає абсолютно те саме, що:

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

Це називається Скороченими літературними властивостями об’єкта (або просто скороченнями значення властивостей, скороченими властивостями).

Ви також можете поєднати скорочення з класичною ініціалізацією:

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

Для отримання додаткової інформації див. Ініціалізатор об’єктів .


12
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
};
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.