如何在JavaScript中将Map的键转换为数组

有多种方法可以将Map的键转换为数组。您可以使用map的keys()方法来访问map中的键，然后应用Array的from()方法来创建一个包含访问到的键的数组。您还可以使用扩展运算符而不是Array的from()方法来创建一个包含键的数组。

给定一个JavaScript的Map，任务是将Map的键转换为数组。以下是一个示例：

给定的Map –

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

结果数组 –

[1, 2, 3, 4, 5]

有多种实现方法。其中一些是−

使用Array.form和Map.keys()方法
使用扩展运算符和Map.keys()方法
使用for..of循环

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

Array.from()方法可以从任何可迭代对象返回一个数组。Map.keys方法用于以可迭代形式返回Map的所有键。将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>

使用扩展运算符和Map.keys()方法

JavaScript的扩展运算符允许我们将数组展开为单独的数组元素。而Map.keys()方法用于以可迭代的形式返回Map的所有键。要将Map的键转换为数组，我们需要按照以下步骤进行操作。

使用Map.keys()方法获取所有的Map键。它将返回一个包含Map键的MapIterator对象。
使用扩展运算符从MapIterator中提取Map键。它将返回一个包含所有Map键的数组。

示例

在此示例中，我们有一个Map，其键是数字，值是国家名称。我们使用扩展运算符提取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的所有键的可迭代形式。将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>