Literal objek Javascript: apa sebenarnya {a, b, c} itu?

88

Pertanyaan yang saya miliki paling baik diberikan melalui jsfiddle ini , kode yang ada di bawah ini:

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

Seperti apa struktur data itu f? Apakah ini hanya singkatan d?

javascript ecmascript-6 drmrbrewer
sumber
25
Yang pertama sebenarnya bukan JSON.
GolezTrol
8
Itu bukan satu-satunya singkatan, ada beberapa lagi di ES6
Kos
1
Oke @GolezTrol bukan hanya JSON karena kuncinya tidak dalam tanda kutip ganda. Jadi apa sebenarnya yang akan Anda sebut dstruktur data di posting saya?
drmrbrewer
6
Penting untuk dipahami bahwa tidak ada versi yang merupakan JSON yang valid. Cara untuk merepresentasikan data sebagai string JSON adalah{"a" : 1, "b" : "x", "c" : true }
Benjamin Gruenbaum
14
@drmrbrewer Ini adalah objek literal . itu bukan JSON karena ini adalah kode javascript , sedangkan JSON adalah format serialisasi. Misalnya var a = '{ "a" : "value"}'-> amenampung string yang dapat dideserialisasikan ke objek melalui JSON.parse.
moonwave99

Jawaban:

71

Ini adalah Singkatan Properti Penginisialisasi Objek di ES6.

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

Ini berfungsi karena nilai properti memiliki nama yang sama dengan pengenal properti. Ini adalah tambahan baru pada sintaks Penginisialisasi Objek ( bagian 11.1.5 ) di draf ECMAScript 6 terbaru Rev 13 . Dan tentu saja, seperti batasan yang ditetapkan dari ECMAScript 3, Anda tidak dapat menggunakan kata yang dipesan sebagai nama properti Anda.

Singkatan seperti itu tidak akan mengubah kode Anda secara dramatis, itu hanya membuat semuanya sedikit lebih manis!

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

Silakan lihat tabel kompatibilitas untuk dukungan untuk notasi ini. Di lingkungan non-pendukung, notasi ini akan menyebabkan kesalahan sintaks.

Notasi singkat ini menawarkan pencocokan objek dengan cukup baik:

Di ECMAScript5 apa yang biasa kami lakukan:

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

Dapat dilakukan di ECMAScript6 dengan satu baris kode:

var { op, lhs, rhs } = getData();
kosong
sumber
10
Mengapa ini sangat berguna untuk menjadi fitur bahasa? Sepertinya akan jauh lebih umum bagi orang untuk menginisialisasi objek secara langsung dengan literal, mengembalikan nilai, dan semacamnya, atau hanya membuat objek terlebih dahulu, lalu menyetel properti secara langsung. Membuat variabel dengan nama yang sama, membuat instance, dan akhirnya menginisialisasi objek seperti ini sepertinya tidak biasa ... atau benarkah?
Panzercrisis
3
@Panzercrisis Sepertinya itu hanya akan menyebabkan banyak bug yang tidak diinginkan dan sulit ditemukan, secara pribadi. Mirip dengan cara mengizinkan if(a = 1) {...}sebagai sintaks yang valid.
Anthony Grist
1
@Panzercrisis Menurut saya masuk akal jika Anda membayangkan bahwa a, b, dan c sebagai struktur data yang lebih kompleks dan f juga berisi properti kompleks lainnya. Masih tidak yakin itu ide yang bagus, tapi saya lihat itu berguna.
Josh Rumbut
1
@Panzercrisis akan sangat berguna untuk mengembalikan tupel dari fungsi lambda, seperti (a, b) => {a, b}. Setidaknya begitulah cara saya menggunakan fitur yang sama di C#.
Vincent van der Weele
2
@Alex bagaimana ini "keanehan" atau "kompleks"? Hal yang sangat umum yang biasanya Anda temukan di banyak basis kode adalah menginisialisasi objek di mana kuncinya cocok dengan variabel yang diberikan sebagai nilai, {id: id, data: data, isSelected: isSelected}dll. Sering terjadi saat memetakan objek yang masuk ke lokal lalu kembali. Dalam sebagian besar kasus, Anda tidak ingin memberi nama barang Anda sedikit berbeda {identifier: id, viewData: data, isElementSelected: isSelected }karena Anda sedang berbicara tentang "unik", "rumit", dan "membingungkan".
VLAZ
77 
var f = {a, b, c};

Itu datang dengan ES6 (ECMAScript 2015) dan artinya persis sama dengan:

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

Ini disebut Singkatan Nilai Properti Literal Objek (atau singkatan dari nilai properti, properti singkatan).

Anda juga dapat menggabungkan singkatan dengan inisialisasi klasik:

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

Untuk informasi lebih lanjut, lihat Penginisialisasi objek .

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

Ini mendefinisikan objek dalam JavaScript menggunakan notasi ECMAScript 2015 baru:

Sesuai Jaringan Pengembang Mozilla :

"Objek dapat diinisialisasi menggunakan Object baru (), Object.create (), atau menggunakan notasi literal (notasi penginisialisasi). Penginisialisasi objek adalah daftar nol atau lebih pasangan nama properti dan nilai terkait dari suatu objek, diapit oleh kurung kurawal ({})." 

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

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

setara dengan:

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

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