在這裡，我們將學習使用 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中文網其他相關文章！
