如何在 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>

更新於:2022-12-06

3K+ 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告