Objet Javascript littéral: qu'est-ce que {a, b, c} exactement?

La question que j'ai est mieux donnée au moyen de ce jsfiddle , dont le code est ci-dessous:

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

Quelle sorte de structure de données est f? Est-ce juste un raccourci pour d?

javascript ecmascript-6

— drmrbrewer
source

Le premier n'est en fait pas JSON.

— GolezTrol

Ce n'est pas le seul raccourci, il y en a encore quelques-uns dans ES6

— Kos

OK @GolezTrol ce n'est pas strictement JSON car les clés ne sont pas entre guillemets. Alors, comment appelleriez- vous exactement la dstructure de données dans mon message?

— drmrbrewer

Il est important de comprendre qu'aucune des versions n'est JSON valide. La façon de représenter les données sous forme de chaîne JSON serait{"a" : 1, "b" : "x", "c" : true }

— Benjamin Gruenbaum

@drmrbrewer C'est un objet littéral . ce n'est pas JSON car c'est du code javascript , tandis que JSON est un format de sérialisation. Par exemple var a = '{ "a" : "value"}'-> acontient une chaîne qui peut être désérialisée en un objet via JSON.parse.

— moonwave99

Réponses:

Il s'agit d'un raccourci de propriété Object Initializer dans ES6.

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

Cela fonctionne car la valeur de la propriété a le même nom que l'identificateur de propriété. Il s'agit d'un nouvel ajout à la syntaxe de Object Initialiser ( section 11.1.5 ) dans le dernier projet d'ECMAScript 6 Rev 13 . Et bien sûr, tout comme les limitations définies dans ECMAScript 3, vous ne pouvez pas utiliser un mot réservé comme nom de propriété.

Un tel raccourci ne changera pas radicalement votre code, cela ne fera que rendre tout un peu plus doux!

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

Veuillez consulter le tableau de compatibilité pour la prise en charge de ces notations. Dans les environnements non compatibles, ces notations entraîneront des erreurs de syntaxe.

Cette notation abrégée offre une correspondance d'objets assez bien:

Dans ECMAScript5, ce que nous faisions:

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

Peut être fait dans ECMAScript6 avec une seule ligne de code:

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

— néant
source

Pourquoi cela serait-il si utile pour devenir une fonctionnalité linguistique? Il semble qu'il serait beaucoup plus courant pour les gens d'initialiser l'objet directement avec des littéraux, de renvoyer des valeurs, etc., ou de simplement créer l'objet en premier, puis de définir directement les propriétés. Créer des variables avec les mêmes noms, les instancier, puis enfin initialiser l'objet comme ça semble tout simplement inhabituel ... ou est-ce le cas?

— Panzercrisis

@Panzercrisis Il semble que cela conduirait à beaucoup de bogues involontaires et difficiles à trouver, personnellement. À peu près de la même manière que le fait d'autoriser if(a = 1) {...}une syntaxe valide.

— Anthony Grist

@Panzercrisis Je pense que cela a au moins un sens si vous imaginez que a, b et c sont des structures de données plus complexes et f contenant également d'autres propriétés complexes. Je ne suis toujours pas sûr que ce soit une bonne idée, mais je pouvais voir cela utile.

— Josh Rumbut

@Panzercrisis il peut être très utile de renvoyer un tuple à partir d'une fonction lambda, quelque chose comme (a, b) => {a, b}. C'est du moins ainsi que j'ai utilisé la même fonctionnalité dans C#.

— Vincent van der Weele

@Alex comment est-ce une "bizarrerie" ou "complexe"? Une chose très courante que vous trouverez normalement dans de nombreuses bases de code est l'initialisation d'un objet où la clé correspond à la variable donnée comme valeur, {id: id, data: data, isSelected: isSelected}etc. Cela se produit souvent lors du mappage d'objets entrant dans des objets locaux puis revenant. Dans la majorité des cas, vous ne voulez pas nommer vos trucs légèrement différemment, {identifier: id, viewData: data, isElementSelected: isSelected }c'est exactement ce que vous parlez de "bizarre", "complexe" et "déroutant".

— VLAZ

var f = {a, b, c};

Il est venu avec ES6 (ECMAScript 2015) et signifie exactement la même chose que:

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

Il s'appelle Object Literal Property Value Shorthands (ou simplement propriété value shorthand, shorthand properties).

Vous pouvez également combiner des raccourcis avec une initialisation classique:

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

Pour plus d'informations, consultez Initialiseur d'objet .

— madox2
source

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

Il définit un objet en JavaScript en utilisant la nouvelle notation ECMAScript 2015:

Selon Mozilla Developer Network :

"Les objets peuvent être initialisés à l'aide de new Object (), Object.create (), ou en utilisant la notation littérale (notation d'initialisation). Un initialiseur d'objet est une liste de zéro ou plusieurs paires de noms de propriétés et de valeurs associées d'un objet, entre accolades ({})."

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

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

est équivalent à:

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

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

— MojoJojo
source