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

Bagaimana untuk mencipta nilai dan objek dinamik dalam JavaScript?

WBOY
Lepaskan: 2023-09-20 10:57:04
ke hadapan
721 orang telah melayarinya

如何在 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'};
Salin selepas log masuk
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>
Salin selepas log masuk
Salin selepas log masuk

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>
Salin selepas log masuk
Salin selepas log masuk
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!

sumber:tutorialspoint.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan