Pregunta Literal del objeto Javascript: ¿qué es exactamente {a, b, c}?


La pregunta que tengo se da mejor por medio de este jsfiddle, cuyo código está 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 forma abreviada de d?


75
2017-12-22 11:22


origen


Respuestas:


Es un Inicializador de Objetos Taquigrafía Propiedad 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 propiedad. Esta es una nueva adición a la sintaxis de Inicializador de objetos (sección 11.1.5) en la última ECMAScript 6 borrador Rev 13. Y, por supuesto, al igual que las limitaciones establecidas en ECMAScript 3, no puede usar una palabra reservada como nombre de su propiedad.

Tal taquigrafía no cambiará drásticamente su código, ¡solo hace 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 anotaciones. En entornos no compatibles, estas anotaciones generarán errores de sintaxis.

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

En ECMAScript5 lo que solíamos hacer:

var tmp = getDate();
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();

58
2017-12-22 11:24



var f = {a, b, c};

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

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

Se llama Mantas cortas de valor literal de propiedad de objeto (o simplemente taquigrafía de valor de propiedad, propiedades abreviadas).

También puede combinar los shorthands con la inicialización clásica:

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

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


75
2017-12-22 11:23



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

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

Según Red de desarrolladores Mozilla:

"Los objetos se pueden inicializar utilizando Object (), Object.create () nuevos o usando la notación literal (notación del inicializador). Un inicializador de objetos es una lista de cero o más pares de nombres de propiedad y valores asociados de un objeto, incluido en 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
};

12
2017-12-22 11:30