在這裡,我們將學習使用 JavaScript 交換 JSON 元素的鍵和值。在 JavaScript 中,物件儲存鍵值對。因此,我們可以像交換兩個普通變數一樣交換鍵和值。
在本教學中,我們將學習使用 JavaScript 交換 JSON 元素的所有鍵值的不同方法。
我們可以使用 for 迴圈來遍歷 JSON 物件的鍵。之後,我們可以使用鍵從物件存取值。因此,我們可以交換物件中的每個鍵和值。
此外,我們需要建立一個新的空對象,並在交換後儲存該對象的鍵和值。
使用者可以依照以下語法使用 for 迴圈交換 JSON 元素中的鍵和值。
for (let key in object) { let value = object[key]; new_obj[value] = key; }
在上面的語法中,我們使用鍵從物件中存取其值,對於new_obj,我們使用值作為鍵,鍵作為值。
在下面的範例中,我們建立了包含唯一鍵值對的物件。此外,我們建立了空的 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()方法來交換JSON物件的所有鍵和值。
Object.keys(student_obj).forEach((objectKey) => { swapped_obj[ student_obj[objectKey] ] = objectKey; })
在上面的語法中,我們使用「student_obj[objectKey]」從物件中取得值,它作為 swapped_obj 物件的鍵。
在這個範例中,我們建立了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()方法來交換JSON元素的鍵和值。
const result = Object.entries(table).map( ([prop, propValue]) => { return [propValue, prop]; } ); let newObject = Object.fromEntries(result);
我們顛倒了上述語法中每個鍵和值對的順序。因此,鍵變成了值,而值變成了鍵。此外,我們使用 Object.fromEntries() 方法從鍵和值的條目建立一個物件。
在此範例中,我們定義了包含表格屬性的表格物件。當使用者點擊該按鈕時,它會呼叫 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中文網其他相關文章!