Bagaimanakah Saya Menetapkan Nama Harta Secara Dinamik dalam Literal Objek JavaScript?

Memahami Gelagat Literal Objek dalam JavaScript

Apabila bekerja dengan literal objek dalam JavaScript, pembangun mungkin menghadapi situasi di mana mentakrifkan nama sifat secara dinamik adalah wajar. Walau bagaimanapun, ini boleh menyebabkan kekeliruan jika tingkah laku yang dimaksudkan tidak difahami.

Pertimbangkan contoh yang disediakan:

<something>.stop().animate(
    { 'top' : 10 }, 10
);

Dalam kes ini, kod berjaya memberikan sifat 'atas' kepada nilai 10 dalam literal objek. Ini kerana nama sifat dilampirkan dalam petikan tunggal, menunjukkan rentetan literal sebagai kunci sifat.

Sebaliknya, apabila menggunakan pembolehubah sebagai nama sifat:

var thetop = 'top';
<something>.stop().animate(
    { thetop : 10 }, 10
);

Kod gagal kerana JavaScript tidak menyokong nama sifat yang dijana secara dinamik untuk literal objek dengan cara ini. Sebelum ES5, satu-satunya cara untuk mencapai ini adalah dengan membina objek literal secara manual dengan memberikan nilai kepada nama sifat pembolehubah:

var thetop = "top";
var aniArgs = {};
aniArgs[thetop] = 10;
<something>.stop().animate(
    aniArgs, 10
);

Walau bagaimanapun, dengan pengenalan ES6, pembangun kini mempunyai akses kepada Computed Nama Harta untuk literal objek. Menggunakan sintaks baharu ini, nama sifat boleh ditentukan secara dinamik sebagai ungkapan yang disertakan dalam kurungan segi empat sama:

var thetop = "top";
var obj = { [thetop]: 10 };

console.log(obj.top); // -> 10

Sintaks ini membolehkan pembangun mencipta literal objek dengan nama sifat yang ditetapkan secara dinamik, sama seperti contoh asal dengan rentetan literal sebagai kunci harta.

Atas ialah kandungan terperinci Bagaimanakah Saya Menetapkan Nama Harta Secara Dinamik dalam Literal Objek JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!