Objeto literal de Javascript: ¿qué es exactamente {a, b, c}?

La pregunta que tengo se da mejor a través de este jsfiddle , cuyo código se encuentra a continuación:

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

¿Qué tipo de estructura de datos es f? ¿Es solo una abreviatura de d?

javascript ecmascript-6

— drmrbrewer
fuente

El primero en realidad no es JSON.

— GolezTrol

Esa no es la única taquigrafía, hay algunas más en ES6

— Kos

OK @GolezTrol no es estrictamente JSON porque las claves no están entre comillas dobles. Entonces, ¿cómo llamarías exactamente a la destructura de datos en mi publicación?

— drmrbrewer

Es importante comprender que ninguna de las versiones es JSON válido. La forma de representar los datos como una cadena JSON sería{"a" : 1, "b" : "x", "c" : true }

— Benjamin Gruenbaum

@drmrbrewer Es un objeto literal . no es JSON porque es código javascript , mientras que JSON es un formato de serialización. Por ejemplo var a = '{ "a" : "value"}'-> acontiene una cadena que se puede deserializar en un objeto a través de JSON.parse.

— moonwave99

Respuestas:

Es una abreviatura de propiedad del inicializador de objetos en ES6.

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

Esto funciona porque el valor de la propiedad tiene el mismo nombre que el identificador de la propiedad. Esta es una nueva adición a la sintaxis de Object Initialiser ( sección 11.1.5 ) en el último borrador de ECMAScript 6 Rev 13 . Y, por supuesto, al igual que las limitaciones establecidas en ECMAScript 3, no puede usar una palabra reservada como nombre de propiedad.

Esta taquigrafía no cambiará drásticamente su código, ¡solo hará que todo sea un poco más dulce!

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

Consulte la tabla de compatibilidad para obtener soporte para estas notaciones. En entornos no compatibles, estas notaciones darán lugar a errores de sintaxis.

Esta notación abreviada ofrece la coincidencia de objetos bastante bien:

En ECMAScript5 lo que solíamos hacer:

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

Se puede hacer en ECMAScript6 con una sola línea de código:

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

— vacío
fuente

¿Por qué sería esto tan útil como para convertirse en una característica del idioma? Parece que sería mucho más común que las personas inicialicen el objeto directamente con literales, devuelvan valores y demás, o simplemente creen el objeto primero y luego establezcan las propiedades directamente. Crear variables con los mismos nombres, instanciarlas y finalmente inicializar el objeto de esta manera parece inusual ... ¿o no?

— Panzercrisis

@Panzercrisis Parece que, personalmente, provocaría muchos errores no deseados y difíciles de encontrar. De la misma manera que lo hace permitir if(a = 1) {...}una sintaxis válida.

— Anthony Grist

@Panzercrisis Creo que al menos tiene sentido si imagina que a, byc como estructuras de datos más complejas yf que también contienen otras propiedades complejas. Todavía no estoy seguro de que sea una gran idea, pero veo que es útil.

— Josh Rumbut

@Panzercrisis puede ser muy útil devolver una tupla de una función lambda, algo como (a, b) => {a, b}. Al menos así es como usé la misma función en C#.

— Vincent van der Weele

@Alex, ¿cómo es esto una "peculiaridad" o "complejo"? Una cosa muy común que normalmente encontraría en muchas bases de código es inicializar un objeto donde la clave coincide con la variable dada como valor, {id: id, data: data, isSelected: isSelected}etc. Sucede mucho cuando se mapean objetos que llegan a los locales y luego regresan. En la mayoría de los casos, no desea nombrar sus cosas de manera ligeramente diferente, {identifier: id, viewData: data, isElementSelected: isSelected }es exactamente lo "peculiar", "complejo" y "confuso" de lo que está hablando.

— VLAZ

var f = {a, b, c};

Viene con ES6 (ECMAScript 2015) y significa exactamente lo mismo que:

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

Se denomina abreviatura de valor de propiedad literal de objeto (o simplemente abreviatura de valor de propiedad, propiedades abreviadas).

También puede combinar taquigrafía con inicialización clásica:

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

Para obtener más información, consulte Inicializador de objetos .

— madox2
fuente

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

Define un objeto en JavaScript utilizando la nueva notación ECMAScript 2015:

Según Mozilla Developer Network :

"Los objetos se pueden inicializar usando new Object (), Object.create (), o usando la notación literal (notación inicializadora). Un inicializador de objeto es una lista de cero o más pares de nombres de propiedad y valores asociados de un objeto, encerrados entre llaves ({}) ".

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

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

es equivalente a:

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

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

— Mojo Jojo
fuente