Oggetto letterale Javascript: che cos'è esattamente {a, b, c}?

La domanda che ho è meglio dare tramite questo jsfiddle , il cui codice è di seguito:

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

Che tipo di struttura dati è f? È solo una scorciatoia per d?

javascript ecmascript-6

— drmrbrewer
fonte

Il primo in realtà non è JSON.

— GolezTrol

Non è l'unica scorciatoia, ce ne sono altre in ES6

— Kos

OK @GolezTrol non è strettamente JSON perché le chiavi non sono tra virgolette. Così che cosa esattamente potrebbe chiamare la dstruttura di dati nel mio post?

— drmrbrewer

È importante capire che nessuna delle versioni è JSON valida. Il modo per rappresentare i dati come una stringa JSON sarebbe{"a" : 1, "b" : "x", "c" : true }

— Benjamin Gruenbaum

@drmrbrewer È un oggetto letterale . non è JSON perché è codice javascript , mentre JSON è un formato di serializzazione. Ad esempio var a = '{ "a" : "value"}'-> acontiene una stringa che può essere deserializzata in un oggetto tramite JSON.parse.

— moonwave99

Risposte:

È una scorciatoia della proprietà inizializzatore di oggetti in ES6.

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

Questo funziona perché il valore della proprietà ha lo stesso nome dell'identificatore della proprietà. Questa è una nuova aggiunta alla sintassi di Object Initialiser ( sezione 11.1.5 ) nell'ultima bozza di ECMAScript 6 Rev 13 . E ovviamente, proprio come le limitazioni impostate da ECMAScript 3, non puoi usare una parola riservata come nome della tua proprietà.

Una tale scorciatoia non cambierà drasticamente il tuo codice, ma rende tutto solo un po 'più dolce!

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

Consultare la tabella di compatibilità per il supporto di queste notazioni. In ambienti non di supporto, queste notazioni porteranno a errori di sintassi.

Questa notazione abbreviata offre abbastanza bene la corrispondenza degli oggetti:

In ECMAScript5 cosa facevamo:

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

Può essere eseguito in ECMAScript6 con una singola riga di codice:

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

— vuoto
fonte

Perché sarebbe così utile da diventare una funzionalità linguistica? Sembra che sarebbe molto più comune per le persone inizializzare l'oggetto direttamente con valori letterali, valori di ritorno e così via, o semplicemente creare prima l'oggetto, quindi impostare direttamente le proprietà. Creare variabili con lo stesso nome, istanziarle e infine inizializzare l'oggetto in questo modo sembra insolito ... o no?

— Panzercrisis

@Panzercrisis Sembra che porterebbe solo a molti bug indesiderati e difficili da trovare, personalmente. Più o meno allo stesso modo in cui consente if(a = 1) {...}la sintassi valida.

— Anthony Grist

@Panzercrisis Penso che abbia almeno senso se immagini che a, bec come strutture di dati più complesse ef che contengono anche altre proprietà complesse. Non sono ancora sicuro che sia un'ottima idea, ma ho potuto vedere che è utile.

— Josh Rumbut

@Panzercrisis può essere molto utile restituire una tupla da una funzione lambda, qualcosa di simile (a, b) => {a, b}. Questo è almeno il modo in cui ho usato la stessa funzione in C#.

— Vincent van der Weele

@Alex come è questo un "capriccio" o "complesso"? Una cosa molto comune che normalmente si trova in molte basi di codice è l'inizializzazione di un oggetto in cui la chiave corrisponde alla variabile data come valore, {id: id, data: data, isSelected: isSelected}ecc. Succede spesso quando si mappano oggetti in arrivo su quelli locali e poi indietro. Nella maggior parte dei casi non vuoi dare un nome alle tue cose in modo leggermente diverso {identifier: id, viewData: data, isElementSelected: isSelected }è esattamente quello di cui stai parlando "bizzarro", "complesso" e "confuso".

— VLAZ

var f = {a, b, c};

È stato fornito con ES6 (ECMAScript 2015) e significa esattamente lo stesso di:

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

Si chiama Object Literal Property Value Shorthands (o semplicemente proprietà abbreviazione valore, proprietà abbreviazione).

Puoi anche combinare le scorciatoie con l'inizializzazione classica:

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

Per ulteriori informazioni, vedere Inizializzatore di oggetti .

— madox2
fonte

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

Definisce un oggetto in JavaScript utilizzando la nuova notazione ECMAScript 2015:

Secondo Mozilla Developer Network :

"Gli oggetti possono essere inizializzati utilizzando new Object (), Object.create () o utilizzando la notazione letterale (notazione inizializzatore). Un inizializzatore di oggetto è un elenco di zero o più coppie di nomi di proprietà e valori associati di un oggetto, racchiuso tra parentesi graffe ({})."

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

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

è equivalente a:

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

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

— MojoJojo
fonte