首頁 >web前端 >js教程 >如何在JavaScript中將Map的鍵轉換為陣列？

如何在JavaScript中將Map的鍵轉換為陣列？

PHPz轉載: 2023-08-24 13:53:051939瀏覽

在 JavaScript 中將映射鍵轉換為陣列有不同的方法。您可以使用映射keys()方法來存取映射中的鍵，然後套用Arrayform()方法來建立所存取的鍵的陣列。您也可以應用擴充運算子而不是 Array form() 方法來建立鍵數組。

給你一個 javascript Map，任務是將 Map 的鍵轉換為陣列。這是下面給出的範例

給定地圖 -

{ 1: "India", 2: "Russia", 3: "USA", 4: "Japan", 5: "UK" };

結果陣列 -

[1, 2, 3, 4, 5]

有多種方法可以實現這一目標。其中一些是 -

使用 Array.form 和 Map.keys() 方法
使用 Spread 運算子和 Map.keys() 方法
使用 for..of 迴圈

使用Array.form()和Map.keys()方法

Array.from() 方法從任何可迭代物件傳回一個陣列。 Map.keys方法用於以可迭代的形式傳回Map的所有鍵。要將映射鍵轉換為數組，我們遵循以下步驟。

使用Map.keys()方法取得所有Map鍵。它傳回一個包含 Map 鍵的 MapIterator 物件
使用 Array.from() 從 MapIterator 中提取 Map 鍵。它傳回一個包含所有 Map 鍵的陣列。

範例

在這個範例中，我們有一個 Map，其鍵是數字，值是國家/地區名稱。我們使用 Array.from 方法從 Map 中提取所有鍵（數字）。

<html>
<head>
   <title>Example- convert Map keys to an array in JavaScript</title>
</head>
<body>
   <h2>Convert Map keys to an array using Array.from method</h2>
   <p>Click the following button to get the Keys from the map</p>
   <button id="btn" onclick="convert( )" > Click Here </button> <br>
   <p id="result"> </p>
   <script>
      function convert( ){
         let result = document.getElementById("result")
         let mp = new Map( );
         mp.set(1, "India");
         mp.set(2, "Russia");
         mp.set(3, "USA");
         mp.set(4, "Japan");
         mp.set(5, "UK");
         let keys;
         keys = Array.from( mp.keys( ) );
         result.innerText = "Converted Array : [ " + keys + " ]";
      }
   </script>
</body>
</html>

使用 Spread 運算子和 Map.keys() 方法

JavaScript 擴充運算子允許我們將陣列擴充為單獨的陣列元素。 Map.keys方法用於以可迭代的形式傳回Map的所有鍵。要將映射鍵轉換為數組，我們遵循以下步驟。

使用Map.keys()方法取得所有Map鍵。它傳回一個包含 Map 鍵的 MapIterator 物件
使用 Spread 運算子從 MapIterator 中擷取 Map 鍵。它傳回一個包含所有 Map 鍵的陣列。

範例

在這個範例中，我們有一個 Map，其鍵是數字，值是國家/地區名稱。我們使用 Spread Operator 從 Map 中提取所有按鍵（數字）。

<html>
<head>
   <title>Example- convert Map keys to an array in JavaScript</title>
</head>
<body>
   <h2>Convert Map keys to an array using Spread Operator</h2>
   <p>Click the following button to get the Keys from the map</p>
   <button id="btn" onclick="convert( )" > Click Here </button><br>
   <p id="result"> </p>
   <script>
      function convert(){
         let result = document.getElementById("result") 
         let mp = new Map();
         mp.set(1, "India");
         mp.set(2, "Russia");
         mp.set(3, "USA");
         mp.set(4, "Japan");
         mp.set(5, "UK");
         let keys;
         keys = [ ...mp.keys() ];
         result.innerText = "Converted Array : [ " + keys + " ]";
      }
   </script>
</body>
</html>

使用 for...of 迴圈

for…of 語句循環遍歷可迭代物件的值。 Map.keys 方法用於以可迭代的形式傳回 Map 的所有鍵。要將映射鍵轉換為數組，我們按照以下步驟操作

建立一個空數組來儲存金鑰。
使用 for..of 迴圈迭代從 Map.keys() 方法獲得的所有 Map 鍵。
在每次迭代時將該鍵推入空數組。

範例

<html>
<head>
   <title>Example -convert Map keys to an array in JavaScript</title>
</head>
<body>
   <h2>Convert Map keys to an array using for...of loop</h2>
   <p>Click the following button to get the Keys from  the map</p>
   <button id="btn" onclick="convert( )" > Click Here </button> <br>
   <p id="result"> </p>
   <script>
      function convert(){
         let result = document.getElementById("result")
         let mp = new Map();
         mp.set(1, "India");
         mp.set(2, "Russia");
         mp.set(3, "USA");
         mp.set(4, "Japan");
         mp.set(5, "UK");
         let keys = [];
         for(let key of mp.keys()){
            keys.push(key)
         }
         result.innerText = "Converted Array : [ " + keys + " ]";
      }
   </script>
</body>
</html>

以上是如何在JavaScript中將Map的鍵轉換為陣列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript Array 运算符 for 循环 operator map 对象

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：解釋一下 ReactNative 中 VirtualizedList 元件的用法？下一篇：解釋一下 ReactNative 中 VirtualizedList 元件的用法？

看更多