Mengapa JavaScript Tidak Membenarkan Kekunci Objek Dinamik dalam Literal Objek Secara Terus?

JavaScript Object Key dari Variable Conundrum

Apabila menggunakan literal objek dalam JavaScript, anda mungkin menghadapi tingkah laku yang pelik apabila menetapkan pembolehubah kepada dinamik kunci hartanah tidak berfungsi. Pertimbangkan dua coretan kod ini:

<something>.stop().animate({ 'top': 10 }, 10); // Works
var thetop = 'top';
<something>.stop().animate({ thetop: 10 }, 10); // Doesn't work

Mengapa Percanggahan?

Coretan pertama berjaya menetapkan sifat "atas" objek, menggunakan tatatanda titik. Walau bagaimanapun, coretan kedua gagal kerana JavaScript tidak membenarkan penggunaan pembolehubah untuk mentakrifkan nama sifat objek dinamik secara langsung dalam literal objek.

Penyelesaian dalam ES5 dan Terdahulu

Untuk menetapkan dinamik nama harta daripada pembolehubah dalam ES5 dan lebih awal, anda mesti membina objek literal secara manual:

var thetop = "top";
var aniArgs = {};
aniArgs[thetop] = 10; // Assign value to variable property name
<something>.stop().animate(aniArgs, 10);

Penyelesaian dalam ES6 dan Kemudian

ES6 memperkenalkan "ComputedPropertyName" dalam tatabahasa literal objek, membolehkan penetapan nama sifat dinamik daripada pembolehubah secara langsung:

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

Sintaks ini disokong dalam versi terkini major pelayar.

Atas ialah kandungan terperinci Mengapa JavaScript Tidak Membenarkan Kekunci Objek Dinamik dalam Literal Objek Secara Terus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!