如何使用 JavaScript 交換 JSON 元素的鍵和值？-js教程-PHP中文網

使用for迴圈

文法

範例 3

使用 Object.keys() 和 forEach() 方法

使用Object.entries()和map()方法

首頁

web前端

js教程

如何使用 JavaScript 交換 JSON 元素的鍵和值？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 23, 2023 pm 10:41 PM

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

在這裡，我們將學習使用 JavaScript 交換 JSON 元素的鍵和值。在 JavaScript 中，物件儲存鍵值對。因此，我們可以像交換兩個普通變數一樣交換鍵和值。

在本教學中，我們將學習使用 JavaScript 交換 JSON 元素的所有鍵值的不同方法。

使用for迴圈

我們可以使用 for 迴圈來遍歷 JSON 物件的鍵。之後，我們可以使用鍵從物件存取值。因此，我們可以交換物件中的每個鍵和值。

此外，我們需要建立一個新的空對象，並在交換後儲存該對象的鍵和值。

文法

使用者可以依照以下語法使用 for 迴圈交換 JSON 元素中的鍵和值。

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

登入後複製

在上面的語法中，我們使用鍵從物件中存取其值，對於new_obj，我們使用值作為鍵，鍵作為值。

範例 1

在下面的範例中，我們建立了包含唯一鍵值對的物件。此外，我們建立了空的 new_obj 物件來儲存交換後的鍵和值。之後，我們使用 for 迴圈來迭代物件的鍵。在 for 迴圈中，我們從 JSON 元素存取特定鍵的值。

我們將物件中的鍵和值加入到 new_obj 物件中，但我們使用值作為鍵，使用鍵作為要交換的值。在輸出中，使用者可以觀察到被交換的 new_obj 的鍵值對。

<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>

登入後複製

使用 Object.keys() 和 forEach() 方法

我們可以使用Object.keys()方法以陣列格式取得物件的鍵。之後，我們可以使用 forEach() 方法來迭代鍵數組。

在遍歷所有鍵時，我們可以存取特定鍵的值並將其用作新物件的鍵。

文法

使用者可以依照下面的語法使用Object.keys()和forEach()方法來交換JSON物件的所有鍵和值。

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

登入後複製

在上面的語法中，我們使用「student_obj[objectKey]」從物件中取得值，它作為 swapped_obj 物件的鍵。

範例 2

在這個範例中，我們建立了student_obj對象，它包含了student的各種屬性及其值。之後，我們使用 Object.entries() 和 forEach() 方法交換物件的所有鍵和值並將其儲存到 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>

登入後複製

使用Object.entries()和map()方法

我們可以使用Object.entries()方法以陣列格式取得物件的所有鍵和值。交換舊的鍵值對後，我們可以使用map()方法來映射新的鍵值對。

我們可以使用陣列解構屬性來交換每個鍵和值對。

文法

使用者可以依照下面的語法使用Object.entries()和map()方法來交換JSON元素的鍵和值。

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

登入後複製

我們顛倒了上述語法中每個鍵和值對的順序。因此，鍵變成了值，而值變成了鍵。此外，我們使用 Object.fromEntries() 方法從鍵和值的條目建立一個物件。

範例 3

在此範例中，我們定義了包含表格屬性的表格物件。當使用者點擊該按鈕時，它會呼叫 swapKeyValues() 函數。

在 swapKeyValues() 函數中，我們交換物件的每個鍵和值對並將它們儲存在 FinalObject 陣列中。之後，我們使用Object.fromEntries()方法將finalObject數組轉換為JSON對象，並將其儲存在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>

登入後複製

我們學習了三種交換 JSON 元素的鍵和值的方法。另外，我們可以使用 array.reduce() 方法和 Object.entries() 方法來交換物件的鍵和值。

以上是如何使用 JavaScript 交換 JSON 元素的鍵和值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7845

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1241

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。