Literal de objeto Javascript: o que exatamente é {a, b, c}?

A pergunta que tenho é melhor respondida por meio deste jsfiddle , cujo código está abaixo:

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

Que tipo de estrutura de dados é f? É apenas uma abreviação de d?

javascript ecmascript-6

— drmrbrewer
fonte

O primeiro realmente não é JSON.

— GolezTrol

Essa não é a única abreviatura, existem mais algumas em ES6

— Kos

OK @GolezTrol não é estritamente JSON porque as chaves não estão entre aspas duplas. Então o que exatamente iria chamar a destrutura de dados no meu post?

— drmrbrewer

É importante entender que nenhuma das versões é JSON válido. A maneira de representar os dados como uma string JSON seria{"a" : 1, "b" : "x", "c" : true }

— Benjamin Gruenbaum

@drmrbrewer É um objeto literal . não é JSON porque é um código javascript , enquanto JSON é um formato de serialização. Por exemplo var a = '{ "a" : "value"}'-> acontém uma string que pode ser desserializada para um objeto via JSON.parse.

— moonwave99

Respostas:

É uma abreviação de propriedade do inicializador de objeto no ES6.

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

Isso funciona porque o valor da propriedade tem o mesmo nome que o identificador da propriedade. Esta é uma nova adição à sintaxe do Object Initialiser ( seção 11.1.5 ) no último ECMAScript 6 draft Rev 13 . E, claro, assim como as limitações definidas no ECMAScript 3, você não pode usar uma palavra reservada como nome de propriedade.

Tal atalho não mudará drasticamente o seu código, apenas torna tudo um pouco mais agradável!

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 a tabela de compatibilidade para obter suporte para essas notações. Em ambientes sem suporte, essas notações levarão a erros de sintaxe.

Esta notação abreviada oferece uma correspondência de objetos muito bem:

Em ECMAScript5, o que costumávamos fazer:

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

Pode ser feito em ECMAScript6 com uma única linha de código:

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

— vazio
fonte

Por que isso seria tão útil a ponto de se tornar um recurso de linguagem? Parece que seria muito mais comum as pessoas inicializarem o objeto diretamente com literais, valores de retorno e outros, ou apenas criar o objeto primeiro e, em seguida, definir as propriedades diretamente. Criar variáveis com os mesmos nomes, instanciá-las e, finalmente, inicializar o objeto dessa maneira parece incomum ... ou não?

— Panzercrisis

@Panzercrisis Parece que isso levaria a muitos bugs indesejados e difíceis de encontrar, pessoalmente. Quase da mesma forma que permite if(a = 1) {...}uma sintaxe válida.

— Anthony Grist

@Panzercrisis Acho que pelo menos faz sentido se você imaginar que a, b e c são estruturas de dados mais complexas ef também contendo outras propriedades complexas. Ainda não tenho certeza se é uma ótima ideia, mas posso ver que isso está sendo útil.

— Josh Rumbut

@Panzercrisis pode ser muito útil retornar uma tupla de uma função lambda, algo como (a, b) => {a, b}. Foi assim que usei o mesmo recurso no C#.

— Vincent van der Weele

@Alex, como isso é uma "peculiaridade" ou "complexo"? Uma coisa muito comum que você normalmente encontrará em muitas bases de código é inicializar um objeto onde a chave corresponde à variável fornecida como valor {id: id, data: data, isSelected: isSelected}etc. Acontece muito ao mapear objetos que chegam aos locais e depois voltam. Na maioria dos casos, você não quer nomear suas coisas de maneira um pouco diferente, {identifier: id, viewData: data, isElementSelected: isSelected }é exatamente isso "peculiar", "complexo" e "confuso" de que você está falando.

— VLAZ

var f = {a, b, c};

Ele veio com ES6 (ECMAScript 2015) e significa exatamente o mesmo que:

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

É denominado Object Literal Property Value Shorthands (ou simplesmente shorthand de valor de propriedade, propriedades de shorthand).

Você também pode combinar atalhos com a inicialização clássica:

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

Para obter mais informações, consulte Inicializador de objeto .

— madox2
fonte

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

Ele define um objeto em JavaScript usando a nova notação ECMAScript 2015:

De acordo com a Mozilla Developer Network :

"Os objetos podem ser inicializados usando new Object (), Object.create () ou usando a notação literal (notação de inicializador). Um inicializador de objeto é uma lista de zero ou mais pares de nomes de propriedade e valores associados de um objeto, entre colchetes ({}). "

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