如何在 JavaScript 中反轉物件?
反轉表示以相反的順序列印值。用技術術語來說,我們可以說假設我們取了一個數組物件。該物件以鍵值對的形式取值,並以值鍵對的形式列印值。
_.invert() 函式屬於 underscore.js,這是一個提供通用函式的 JavaScript 庫。
它用於複製一個物件,其中物件鍵被轉換為值,物件被轉換為鍵。這意味著物件的 [鍵,值] 被反轉了。
語法
以下是_.invert() 函式的語法:
_.invert(object)
物件 - 物件是陣列的鍵值對。
返回值 - 它以相反的順序 [值,鍵] 返回物件的 [鍵,值]。
示例 1
在以下示例中,我們建立了一個名為 obj 的物件,將 obj 變數傳遞給_.invert() 函式,並以值-鍵對的形式返回該值。
<!DOCTYPE html> <html> <head> <script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> </head> <body> <script type="text/javascript"> var obj = { Company: "TurorialsPoint", Address: "Hyderabad", Contact: "+917654980321", Email: "xyz123@gmail.com", }; document.write(JSON.stringify(_.invert(obj))); </script> </body> </html>
示例 2
在以下示例中,我們將名為 obj 的物件傳遞給_.invert() 函式,並將其轉換為字串以在頁面上顯示返回資料。
<!DOCTYPE html> <html> <head> <script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> </head> <body> <script type="text/javascript"> var obj = { num1: "91", num2: "82", num3: "52", num4: "19", }; var number = JSON.stringify(_.invert(obj)); document.write(number); </script> </body> </html>
示例 3
讓我們再看一個_.invert() 函式的示例:
<!DOCTYPE html> <html> <head> <script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> </head> <body> <script type="text/javascript"> var detail = JSON.stringify( _.invert({ name: "JP ANNA", age: 324, salary: 220000 }) ); document.write(detail); </script> </body> </html>
示例 4:使用箭頭函式(=>)
在本例中,我們將討論箭頭函式的使用。在這種情況下,我們將使用=> 箭頭函式來反轉物件的鍵/值對。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <scripttype="text/javascript"src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script> <title>Invert an object</title> <div id="invert"></div> </head> <body> <script type="text/javascript"> let obj = { name: "Alice", age: 21, role: "Full stack developer", }; let invertObj = (obj) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [value, key])); document.getElementById("invert").innerHTML = JSON.stringify( invertObj(obj) ); </script> </body> </html>
示例 5:使用 reverse() 方法
在本例中,我們將使用reverse() 方法在 JavaScript 中反轉物件。此方法用於反轉物件的鍵/值對。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <scripttype="text/javascript"src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script> <title>Invert an object</title> <div id="invert"></div> </head> <body> <script type="text/javascript"> let obj = { name: "Alice", age: 21, role: "Full stack developer", }; function invertObj(obj) { let invert_obj = {}; reverse_obj = Object.keys(obj).reverse(); reverse_obj.forEach(function (x) { invert_obj[x] = obj[x]; }); return invert_obj; } rev = invertObj(obj); document.getElementById("invert").innerHTML = JSON.stringify(rev); </script> </body> </html>
廣告