Pertanyaan Objek Javascript literal: apa sebenarnya {a, b, c}?


Pertanyaan yang saya miliki paling baik diberikan melalui jsfiddle ini, kode yang 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 datanya f? Apakah itu hanya singkatan untuk d?


75
2017-12-22 11:22


asal


Jawaban:


Ini adalah Object Initializer Singkatan Properti 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 merupakan tambahan baru untuk sintaks Object Initialiser (bagian 11.1.5) paling lambat ECMAScript 6 draft Rev 13. Dan tentu saja, seperti batasan yang ditetapkan dari ECMAScript 3, Anda tidak dapat menggunakan kata cadangan 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 yang tidak mendukung, notasi ini akan mengarah ke kesalahan sintaks.

Notasi singkat ini menawarkan objek yang cukup cocok:

Di ECMAScript5 apa yang biasa kita lakukan:

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

Bisa dilakukan di ECMAScript6 dengan satu baris kode:

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

58
2017-12-22 11:24



var f = {a, b, c};

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

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

Ini disebut Object Literal Property Value Shorthands (atau hanya singkatan nilai properti, properti shorthand).

Anda juga dapat menggabungkan singkatan dengan inisialisasi klasik:

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

Untuk informasi lebih lanjut, lihat Penginisialisasi objek.


75
2017-12-22 11:23



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 Objek baru (), Object.create (), atau menggunakan notasi literal (notasi initializer). Penginisialisasi objek adalah daftar nol atau lebih pasangan nama properti dan nilai-nilai yang terkait dari suatu objek, yang 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
};

12
2017-12-22 11:30