Bagaimanakah Saya Boleh Menggunakan Pembolehubah sebagai Kunci dalam Literal Objek JavaScript?

Penugasan Nilai Kunci Dinamik dalam Literal Objek JavaScript

Walaupun penggunaannya meluas dalam animasi, JavaScript menimbulkan cabaran apabila ia melibatkan penggunaan pembolehubah sebagai kunci dalam literal objek. Manakala sintaks seperti ".stop().animate({ 'top' : 10 }, 10);" dengan lancar memberikan nilai kepada kunci yang disertakan dalam petikan, cuba menggunakan pembolehubah sebagai kunci, seperti dalam "var thetop = 'top'; .stop().animate({ thetop : 10 }, 10);", menemui kegagalan .

Punca Disebalik Percanggahan

{ thetop : 10 } membentuk sintaks literal objek yang sah. Kod tersebut mengarahkan JavaScript untuk mencipta objek dengan sifat yang dipanggil thetop, memberikannya nilai 10. Terutama sekali, kedua-dua { thetop : 10 } dan { "thetop" : 10 } menghasilkan struktur objek yang sama.

Mengatasi Had dalam ES5 dan Sebelumnya

Sebelum ES6, memanfaatkan pembolehubah sebagai nama harta dalam literal objek adalah mustahil. Penyelesaian melibatkan mencipta objek literal terlebih dahulu, diikuti dengan memberikan nilai kepada sifatnya menggunakan pembolehubah sebagai kunci, dicontohkan sebagai:

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

ES6 dan Kemunculan Nama Harta Berkomputer

ES6 merevolusikan landskap ini dengan memperkenalkan ComputedPropertyNames dalam sintaks literal objek. Kemajuan ini membolehkan pengekodan serupa dengan:

var thetop = "top", obj = { [thetop]: 10 };
console.log(obj.top); // -> 10

Sintaks yang dimodenkan ini memberi kuasa kepada pembangun untuk menggunakan pembolehubah dengan lancar sebagai nama sifat dalam literal objek merentas versi kontemporari penyemak imbas arus perdana.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Pembolehubah sebagai Kunci dalam Literal Objek JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!