如何使用 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 物件,其中包含學生的各種屬性及其值。之後,我們使用 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
在此示例中,我們定義了包含表格屬性的 table 物件。當用戶單擊按鈕時,它將呼叫 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() 方法結合使用來交換物件的鍵和值。
資料結構
網路
關係型資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP