Bagaimana untuk menukar kunci dan nilai elemen JSON menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk menukar kunci dan nilai elemen JSON menggunakan JavaScript?

WBOY

Lepaskan： 2023-08-23 22:41:05

ke hadapan

755 orang telah melayarinya

如何使用 JavaScript 交换 JSON 元素的键和值？

Di sini kita akan belajar menukar kunci dan nilai elemen JSON menggunakan JavaScript. Dalam JavaScript, objek menyimpan pasangan nilai kunci. Oleh itu, kita boleh menukar kunci dan nilai sama seperti kita menukar dua pembolehubah biasa.

Dalam tutorial ini, kita akan mempelajari cara yang berbeza untuk menukar semua nilai utama elemen JSON menggunakan JavaScript.

Gunakan gelung untuk

Kita boleh menggunakan gelung for untuk mengulangi kekunci objek JSON. Selepas itu kita boleh mengakses nilai dari objek menggunakan kekunci. Oleh itu, kita boleh menukar setiap kunci dan nilai dalam objek.

Selain itu, kita perlu mencipta objek kosong baharu dan menyimpan kekunci dan nilai objek itu selepas bertukar.

Tatabahasa

Pengguna boleh menggunakan gelung for untuk menukar kunci dan nilai dalam elemen JSON mengikut sintaks berikut.

for (let key in object) {
   let value = object[key];
   new_obj[value] = key;
}

Salin selepas log masuk

Dalam sintaks di atas, kami menggunakan kunci untuk mengakses nilainya daripada objek, untuk new_obj kami menggunakan nilai sebagai kunci dan kunci sebagai nilai.

Contoh 1

Dalam contoh di bawah, kami mencipta objek yang mengandungi pasangan nilai kunci yang unik. Selain itu, kami mencipta objek new_obj kosong untuk menyimpan kunci dan nilai yang ditukar. Selepas itu, kami menggunakan gelung for untuk mengulangi kekunci objek. Dalam gelung for, kami mengakses nilai kunci tertentu daripada elemen JSON.

Kami menambah kunci dan nilai dari objek ke objek new_obj, tetapi kami menggunakan nilai sebagai kunci dan kunci sebagai nilai yang akan ditukar. Dalam output, pengguna boleh melihat bahawa pasangan nilai kunci new_obj ditukar.

<html>
<body>
   <h2>Using the <i> for loop </i> to swap keys and values of JSON elements</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let object = {
         "key1": true,
         "key2": 10,
         "key3": "hello",
         "key4": 40
      }
      let new_obj = {};
      for (let key in object) {
         let value = object[key];
         new_obj[value] = key;
      }
      output.innerHTML += "The old object is " + JSON.stringify(object) + "<br/>";
      output.innerHTML += "The new object after swapping the key and values is " + JSON.stringify(new_obj) + "<br/>";
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah Object.keys() dan forEach()

Kita boleh mendapatkan kunci objek dalam format tatasusunan menggunakan kaedah Object.keys(). Selepas itu, kita boleh menggunakan kaedah forEach() untuk mengulangi tatasusunan kunci.

Semasa mengulangi semua kekunci, kami boleh mengakses nilai kunci tertentu dan menggunakannya sebagai kunci objek baharu.

Tatabahasa

Pengguna boleh menggunakan kaedah Object.keys() dan forEach() mengikut sintaks di bawah untuk menukar semua kunci dan nilai objek JSON.

Object.keys(student_obj).forEach((objectKey) => {
   swapped_obj[ student_obj[objectKey] ] = objectKey;
})

Salin selepas log masuk

Dalam sintaks di atas, kami menggunakan "student_obj[objectKey]" untuk mendapatkan nilai daripada objek, yang berfungsi sebagai kunci objek swapped_obj.

Contoh 2

Dalam contoh ini, kami mencipta objek student_obj, yang mengandungi pelbagai atribut pelajar dan nilainya. Selepas itu, kami menukar semua kunci dan nilai objek menggunakan kaedah Object.entry() dan forEach() dan menyimpannya ke dalam objek swapped_obj.

<html>
<body>
   <h2>Using the <i> Object.keys() and forEach() methods </i> to swap keys and values of JSON elements.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let student_obj = {
         "name": "Shubham",
         "age": 22,
         "hobby": "Writing",
         "Above18": true,
         "id": "waewr34fg7y657"
      }
      let swapped_obj = {};
      Object.keys(student_obj).forEach((objectKey) => {
         let keyvalue = student_obj[objectKey];
         swapped_obj[keyvalue] = objectKey;
      })
      output.innerHTML += "The old object is " + JSON.stringify(student_obj) + "<br/>";
      output.innerHTML += "The new object after swapping the key and values is " + JSON.stringify(swapped_obj) + "<br/>";
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah Object.entry() dan map()

Kita boleh mendapatkan semua kunci dan nilai objek dalam format tatasusunan menggunakan kaedah Object.entry(). Selepas menukar pasangan nilai kunci lama, kita boleh menggunakan kaedah map() untuk memetakan pasangan nilai kunci baharu.

Kita boleh menggunakan sifat pemusnah tatasusunan untuk menukar setiap pasangan kunci dan nilai.

Tatabahasa

Pengguna boleh menggunakan kaedah Object.entry() dan map() mengikut sintaks berikut untuk menukar kunci dan nilai elemen JSON.

const result = Object.entries(table).map(
   ([prop, propValue]) => { return [propValue, prop]; }
);
let newObject = Object.fromEntries(result);

Salin selepas log masuk

Kami membalikkan susunan setiap pasangan kunci dan nilai dalam sintaks di atas. Jadi kunci menjadi nilai dan nilai menjadi kunci. Selain itu, kami mencipta objek daripada entri kunci dan nilai menggunakan kaedah Object.fromEntries().

Contoh 3

Dalam contoh ini, kami mentakrifkan objek jadual yang mengandungi sifat jadual. Apabila pengguna mengklik butang, ia memanggil fungsi swapKeyValues().

Dalam fungsi swapKeyValues(), kami menukar setiap pasangan kunci dan nilai objek dan menyimpannya dalam tatasusunan FinalObject. Selepas itu, kami menukar tatasusunan finalObject menjadi objek JSON menggunakan kaedah Object.fromEntries() dan menyimpannya dalam pembolehubah newObject

<html>
<body>
   <h2>Using the <i> Object.entries() and map() methods </i> to swap keys and values of JSON elements.</h2>
   <div id = "output"></div>
   <button onclick = "swapKeyValues()"> Swap Object key values</button>
   <script>
      let output = document.getElementById('output');
      let table = {
         "id": "1234",
         "color": "blue",
         "size": "6 feet",
         "legs": "6",
         "chairs": "8",
      }
      function swapKeyValues() {
         output.innerHTML += "The initial object is " + JSON.stringify(table) + "<br/>";
         let objectEntries = Object.entries(table);
         const finalObject = objectEntries.map(
            ([prop, propValue]) => { return [propValue, prop]; }
         );
         let newObject = Object.fromEntries(finalObject);
         output.innerHTML += "The new object after swapping the key and values is " + JSON.stringify(newObject) + "<br/>";
         return;
      }
   </script>
</body>
</html>

Salin selepas log masuk

Kami mempelajari tiga cara untuk menukar kunci dan nilai elemen JSON. Selain itu, kita boleh menggunakan kaedah array.reduce() dan kaedah Object.entry() untuk menukar kunci dan nilai objek.

Atas ialah kandungan terperinci Bagaimana untuk menukar kunci dan nilai elemen JSON menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!