首页 > web前端 > js教程 > 正文

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

PHPz
发布: 2023-08-24 13:53:05
转载
1932 人浏览过

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

在 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中文网其他相关文章!

来源:tutorialspoint.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板