Rumah > Artikel > hujung hadapan web > Bagaimana untuk meratakan objek JavaScript menjadi objek satu kedalaman?

Bagaimana untuk meratakan objek JavaScript menjadi objek satu kedalaman?

PHPzke hadapan: 2023-08-24 10:29:071344semak imbas

如何将 JavaScript 对象压平为单深度对象？

Dalam JavaScript, objek boleh dibuat menggunakan pendakap kerinting {}. Ini dipanggil objek literal. Literal objek boleh mengandungi sifat dan kaedah.

Apakah itu meratakan?

Meratakan ialah proses mengurangkan objek kepada objek kedalaman tunggal. Dengan kata lain, semua sifat dan kaedah objek terkandung dalam objek kedalaman tunggal.

Bagaimana hendak meratakan objek?

Terdapat pelbagai cara untuk meratakan objek.

Gunakan untuk...dalam gelung

Gelung untuk...dalam boleh digunakan untuk mengulangi sifat sesuatu objek. Untuk setiap harta kita boleh menambahnya pada objek baharu.

Di bawah ialah coretan kod yang menggunakan gelung for...in untuk meratakan objek.

<!doctype html>
<html>
<head>
   <title>Example - flatten an object</title>
</head>
<body>
   <div id="result1">Original Object: </div>
   <div id="result2">Flatten Object: </div>
   <script>
      var obj = {
         "a": 1,
         "b": 2,
         "c": {
            "d": 3,
            "e": 4
         }
      };
      var newObj = {};
      for (var key in obj) {
         if (typeof obj[key] === "object") {
            for (var subKey in obj[key]) {
               newObj[subKey] = obj[key][subKey];
            }
         } else {
            newObj[key] = obj[key];
         }
      }
      document.getElementById("result1").innerHTML += JSON.stringify(obj)
      document.getElementById("result2").innerHTML += JSON.stringify(newObj)
      console.log(newObj);   </script>
</body>
</html>

Dalam kod di atas, kami mengisytiharkan objek literal bernama obj. Kemudian kami mengisytiharkan objek kosong literal bernama newObj. Kami menggunakan gelung for...in untuk mengulangi sifat obj. Untuk setiap atribut, kami menyemak sama ada nilai atribut ialah objek. Jika nilai harta ialah objek, maka kita sekali lagi menggunakan gelung for...in untuk melelaran ke atas sifat anak bagi nilai harta itu.

Untuk setiap subsifat, kami menambahkannya pada objek newObj dengan nama subsifat sebagai kunci. Jika nilai harta bukan objek, maka kami menambah harta itu pada objek newObj menggunakan nama harta sebagai kunci. Akhirnya, kami log newObj ke konsol.

Kebaikan meratakan

Meratakan objek mempunyai pelbagai faedah. Sebahagian daripada mereka adalah -

Akses mudah ke hartanah

Apabila objek diratakan, semua sifat dan kaedah terkandung dalam objek. Ini menjadikan akses kepada sifat dan kaedah mudah.

Mudah untuk memanipulasi data

Apabila objek diratakan, data terkandung dalam satu objek. Ini memudahkan untuk memanipulasi data.

Mudah untuk bersiri

Apabila objek diratakan, ia boleh disiri dengan mudah. Serialisasi ialah proses menukar objek ke dalam format yang boleh disimpan atau dihantar.

Kelemahan meratakan

Meratakan objek mempunyai beberapa kelemahan. Sebahagian daripada mereka adalah -

Lewahan data

Apabila objek diratakan, lebihan data mungkin berlaku. Lebihan data bermakna data yang sama disimpan di berbilang tempat.

Susah nak maintain

Apabila objek diratakan, ia boleh menjadi sukar untuk dikekalkan. Ini kerana semua sifat dan kaedah terkandung dalam objek.

Kesimpulan

Ringkasnya, meratakan ialah proses mengurangkan objek kepada objek kedalaman tunggal. Terdapat beberapa cara untuk meratakan objek. Beberapa faedah meratakan objek ialah kemudahan mengakses sifat, kemudahan memanipulasi data dan kemudahan bersiri. Objek rata mempunyai kekurangan seperti redundansi data dan kesukaran dalam penyelenggaraan.

Atas ialah kandungan terperinci Bagaimana untuk meratakan objek JavaScript menjadi objek satu kedalaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript for 循环对象 for...in

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimanakah ES6 (ES2015) berkembang dan membawa ciri baharu kepada JavaScript moden?Artikel seterusnya：Bagaimanakah ES6 (ES2015) berkembang dan membawa ciri baharu kepada JavaScript moden?

Artikel berkaitan

Lihat lagi