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

Menggunakan Pembolehubah sebagai Kekunci Objek dalam Literal JavaScript

Dalam JavaScript, adalah mungkin untuk mentakrifkan literal objek menggunakan pasangan nilai kunci. Walau bagaimanapun, apabila cuba menggunakan pembolehubah sebagai kunci, had tertentu wujud.

Pertimbangkan coretan kod berikut:

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

Kod ini berjaya mengemas kini sifat CSS "atas" sesuatu elemen . Walau bagaimanapun, apabila cuba menggunakan pembolehubah sebaliknya:

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

kod gagal. Sebabnya ialah literal objek memerlukan kunci untuk disertakan dalam petikan tunggal atau berganda, manakala nama pembolehubah tidak boleh.

ES5 dan Terdahulu:

Dalam ES5 dan versi terdahulu JavaScript, tidak ada cara mudah untuk menggunakan pembolehubah sebagai kunci objek secara langsung. Satu penyelesaian adalah untuk mencipta objek kosong literal dan kemudian menetapkan pembolehubah kepada kekunci yang dikehendaki:

var thetop = "top";

// Create the object literal
var aniArgs = {};

// Assign the variable property name with a value of 10
aniArgs[thetop] = 10; 

// Pass the resulting object to the animate method
<something>.stop().animate(
    aniArgs, 10  
);  

ES6 dan Kemudian:

ES6 memperkenalkan sintaks ComputedPropertyName, yang membenarkan penggunaan ungkapan pembolehubah sebagai kunci objek:

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

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

Sintaks ini membenarkan untuk kod yang lebih bersih dan ringkas, terutamanya apabila berurusan dengan kekunci objek dinamik. Ia disokong dalam versi moden semua penyemak imbas utama.

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