Bagaimana untuk Mencipta Objek JavaScript dengan Nama Harta Dinamik?

Mencipta Objek dengan Nama Harta Dinamik

Dalam JavaScript, objek biasanya ditakrifkan menggunakan pasangan nilai kunci literal. Walau bagaimanapun, terdapat keadaan di mana anda mungkin menghadapi senario di mana nama harta adalah dinamik atau tidak diketahui pada masa penciptaan objek. Ini boleh dicapai melalui penggunaan notasi kurungan.

Masalah:

Pertimbangkan coretan kod berikut:

var KEYS = {} ;

KEYS.PHONE_TYPE = 'phone-type';
KEYS.AGENT_TYPE = 'agent-type';

var myAppConfig = {
    ...
    iconMap : { 
        KEYS.PHONE_TYPE : 'icon-phone', 
        KEYS.AGENT_TYPE : 'icon-headphones'
    };
    ...
};

Kod ini gagal dengan ralat "Dijangka ':' dan sebaliknya melihat '.'." Ini kerana anda cuba mengakses objek KEYS sebagai harta objek myAppConfig menggunakan notasi titik (.). Untuk menangani isu ini, anda perlu menggunakan notasi kurungan [] untuk mengakses sifat secara dinamik.

Penyelesaian:

Menggunakan ES6 (atau transpiler seperti Babel/browserify), anda boleh memulakan objek dengan nama sifat dinamik menggunakan notasi kurungan, seperti yang ditunjukkan di bawah:

iconMap : { 
    [KEYS.PHONE_TYPE] : 'icon-phone', 
    [KEYS.AGENT_TYPE] : 'icon-headphones'
};

Dalam ini kod, kurungan [] di sekeliling sifat KEYS membolehkan anda menentukan nama sifat secara dinamik berdasarkan nilai yang disimpan dalam objek KEYS. Akibatnya, sifat iconMap bagi objek myAppConfig akan mengandungi pemetaan nilai yang dikehendaki:

{
    'phone-type' : 'icon-phone',
    'agent-type' : 'icon-headphones'
}

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Objek JavaScript dengan Nama Harta Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!