Literał obiektu JavaScript: czym dokładnie jest {a, b, c}?

88

Pytanie, które mam, najlepiej zadać za pomocą tego jsfiddle , którego kod jest poniżej:

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 );

Co to jest struktura danych f? Czy to tylko skrót d?

javascript ecmascript-6 drmrbrewer
źródło
25
Pierwsza w rzeczywistości nie jest JSON.
GolezTrol
8
To nie jedyne skróty, jest ich jeszcze kilka w ES6
Kos
1
OK @GolezTrol to nie jest ściśle JSON, ponieważ klucze nie są w cudzysłowach. Więc co dokładnie będzie zadzwonić do dstruktury danych w moim poście?
drmrbrewer
6
Ważne jest, aby zrozumieć, że żadna z wersji nie ma prawidłowego formatu JSON. Sposobem na przedstawienie danych jako ciąg JSON byłby{"a" : 1, "b" : "x", "c" : true }
Benjamin Gruenbaum,
14
@drmrbrewer To jest literał obiektu . nie jest to JSON, ponieważ jest to kod javascript , podczas gdy JSON jest formatem serializacji. Na przykład var a = '{ "a" : "value"}'-> aprzechowuje ciąg, który można deserializować do obiektu za pośrednictwem JSON.parse.
moonwave99

Odpowiedzi:

71

Jest to skrót właściwości inicjalizatora obiektu w ES6.

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

To działa, ponieważ wartość właściwości ma taką samą nazwę jak identyfikator właściwości. Jest to nowy dodatek do składni inicjalizatora obiektu ( sekcja 11.1.5 ) w najnowszej wersji roboczej ECMAScript 6 w wersji 13 . I oczywiście, podobnie jak w przypadku ograniczeń określonych w ECMAScript 3, nie możesz używać zastrzeżonego słowa jako nazwy swojej właściwości.

Taka skrótowość nie zmieni radykalnie twojego kodu, a tylko sprawi, że wszystko będzie trochę słodsze!

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.
}

Zapoznaj się z tabelą zgodności, aby uzyskać informacje o obsłudze tych notacji. W środowiskach nieobsługujących te notacje będą prowadzić do błędów składniowych.

Ta skrócona notacja oferuje całkiem dobre dopasowanie obiektów:

W ECMAScript5 co zwykliśmy robić:

var tmp = getData();
var op  = tmp.op;
var lhs = tmp.lhs;
var rhs = tmp.rhs;

Można to zrobić w ECMAScript6 za pomocą jednej linii kodu:

var { op, lhs, rhs } = getData();
unieważnić
źródło
10
Dlaczego miałoby to być tak przydatne, aby stać się funkcją językową? Wydaje się, że o wiele bardziej powszechne byłoby, gdyby ludzie albo inicjowali obiekt bezpośrednio za pomocą literałów, zwracali wartości itp., Albo po prostu tworzyli obiekt najpierw, a następnie bezpośrednio ustawiali właściwości. Tworzenie zmiennych o tych samych nazwach, tworzenie ich instancji, a następnie ostateczna inicjalizacja obiektu w ten sposób wydaje się po prostu niezwykłe ... czy też nie?
Panzercrisis
3
@Panzercrisis Wygląda na to, że doprowadziłoby to do wielu niezamierzonych i trudnych do znalezienia błędów osobiście. Dokładnie tak samo, if(a = 1) {...}jak dopuszczenie prawidłowej składni.
Anthony Grist
1
@Panzercrisis Myślę, że przynajmniej ma to sens, jeśli wyobrazisz sobie, że a, b i c są bardziej złożonymi strukturami danych if zawierają również inne złożone właściwości. Nadal nie jestem pewien, czy to świetny pomysł, ale widziałem, że jest to przydatne.
Josh Rumbut
1
@Panzercrisis bardzo przydatne może być zwrócenie krotki z funkcji lambda, na przykład (a, b) => {a, b}. Tak przynajmniej używałem tej samej funkcji w C#.
Vincent van der Weele
2
@Alex, dlaczego to „dziwactwo” lub „skomplikowanie”? Bardzo powszechną rzeczą, którą normalnie można znaleźć w wielu bazach kodu, jest inicjalizacja obiektu, w którym klucz pasuje do zmiennej podanej jako wartość {id: id, data: data, isSelected: isSelected}itp. Dzieje się często podczas mapowania obiektów przychodzących na lokalne iz powrotem. W większości przypadków nie chcesz nazywać swoich rzeczy nieco inaczej, {identifier: id, viewData: data, isElementSelected: isSelected }jest to dokładnie to, o czym mówisz „dziwaczne”, „złożone” i „zagmatwane”.
VLAZ
77 
var f = {a, b, c};

Przyszedł z ES6 (ECMAScript 2015) i oznacza dokładnie to samo, co:

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

Nazywa się to skrótami wartości właściwości literału obiektu (lub po prostu skrótem wartości właściwości, skrótowymi właściwościami).

Możesz także łączyć skróty z klasyczną inicjalizacją:

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

Aby uzyskać więcej informacji, zobacz inicjator obiektu .

madox2
źródło
12 
var f = {a, b, c};          // <--- what exactly is this??

Definiuje obiekt w JavaScript przy użyciu nowej notacji ECMAScript 2015:

Zgodnie z Mozilla Developer Network :

„Obiekty można zainicjować za pomocą funkcji new Object (), Object.create () lub przy użyciu notacji literału (notacji inicjalizatora). Inicjator obiektu to lista zawierająca zero lub więcej par nazw właściwości i powiązanych wartości obiektu, ujęta w nawiasy klamrowe ({})." 

var a = "foo", 
    b = 42, 
    c = {};

// Shorthand property names (ES6)
var o = { a, b, c };

jest równa:

var a = "foo", 
    b = 42,
    c = {};

var o = { 
  a: a,
  b: b,
  c: c
};
MojoJojo
źródło