cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mencipta nilai dan objek dinamik dalam JavaScript?

Bagaimana untuk mencipta nilai dan objek dinamik dalam JavaScript?

WBOY
WBOYke hadapan
2023-09-20 10:57:04681semak imbas

如何在 JavaScript 中创建动态值和对象？

Nilai dinamik ialah nilai yang kami tetapkan kepada pembolehubah dinamik. Pembolehubah dinamik ialah pembolehubah yang dikodkan keras dalam kod tanpa nama tertentu, dan alamatnya ditentukan semasa kod sedang dijalankan. Nama "dinamik" merujuk kepada nilai yang boleh dimanipulasi dan diubah.

Di sini kita akan melihat cara mencipta nilai dinamik (juga sebahagian daripada nilai objek) dalam JavaScript dan menukar nama pembolehubah dinamik tanpa mengakses kumpulan pada masa hadapan. Ini bermakna kita mengisytiharkan pembolehubah dan kemudian kita menggunakan pembolehubah yang sama sebagai salah satu kunci dalam objek dan pada masa hadapan jika kita perlu menukar nama pembolehubah kita boleh menukarnya tanpa mengakses objek.

Untuk menyelesaikan tugas di atas, kami hanya menetapkan nama pembolehubah dalam objek menggunakan kurungan segi empat sama [ ] seperti yang ditunjukkan di bawah -

Sintaks

Berikut ialah sintaks untuk mencipta nilai dinamik dan objek - 

const key = 'KeyName';
const obj = { [key] : 'value'};
di sini

key dan value ialah pasangan nilai kunci yang digunakan untuk mencipta objek, "obj" dan keyName > ialah nilai kunci.

Algoritma

  • Langkah 1 - Tentukan kekunci yang digunakan untuk mencipta objek.

  • Langkah 2 - Cipta objek dan gunakan kekunci yang ditakrifkan di atas.

  • Langkah 3 - Sapukan JSON.stringify() pada objek yang dibuat di atas untuk memaparkan objek.

Contoh 1

Kita boleh menggunakan program HTML berikut untuk melihat pengisytiharan pembolehubah dinamik. 

<!DOCTYPE html>
<html>
<body>
   <h2> JavaScript Dynamic values </h2>
   <div id = "result"> </div>
   <script>
      const key1 = "Haircolour";
      const key2 = "Eyecolour";
      const person = {
         f_name : "Rohan",
         l_name :"Joshi",
         [key1] : "Black",
         [key2] : "Brown"
      };

      // Converting the object value to show its value in html
      str = JSON.stringify(person);
      document.getElementById("result").innerHTML = str;

      // To print value of object in console
      console.log(person);
   </script>
</body>
</html>

Jadi, dalam kod di atas, kita dapat melihat bahawa kita telah mengisytiharkan dua kekunci f_name dan l_name dalam objek tanpa menggunakan pendakap kerinting [] dan kami menggunakan pendakap kerinting untuk pembolehubah key1 dan key2 kerana kedua-dua ini Setiap satu adalah nilai dinamik .

Dalam output, kita dapat melihat bahawa nama pembolehubah key1 ialah Eyecolour dan nilai key2 variable ialah Haircolour.

Contoh 2

Berikut ialah kod lain yang akan memberi lebih banyak penerangan tentang cara menukar nama pembolehubah dinamik tanpa mengakses objek. Di sini kita hanya menukar nama dua pembolehubah dinamik dalam kod. 

<!DOCTYPE html>
<html>
<body>
   <h2> JavaScript Dynamic values </h2>
   <div id = "result"> </div>
   <script>
      const key1 = "Haircolour";
      const key2 = "Eyecolour";
      const person = {
         f_name : "Rohan",
         l_name :"Joshi",
         [key1] : "Black",
         [key2] : "Brown"
      };

      // Converting the object value to show its value in html
      str = JSON.stringify(person);
      document.getElementById("result").innerHTML = str;

      // To print value of object in console
      console.log(person);
   </script>
</body>
</html>

Dalam output kita dapat melihat bahawa nilai dua pembolehubah key1 dan key2 kekal sama tetapi nama mereka ditukar tanpa mengakses objek, jadi ini adalah cara kita mencipta nilai dinamik dalam JavaScript dan objek.

Atas ialah kandungan terperinci Bagaimana untuk mencipta nilai dan objek dinamik dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript json html 对象 算法
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk mendapatkan faktor skala objek Imej menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk mendapatkan faktor skala objek Imej menggunakan FabricJS?

Artikel berkaitan

Lihat lagi