简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  How to convert a Map's keys to an array in JavaScript?

How to convert a Map's keys to an array in JavaScript?

PHPz
PHPzforward
2023-08-24 13:53:051925browse

How to convert a Maps keys to an array in JavaScript?

There are different ways to convert map keys to arrays in JavaScript. You can use the map keys() method to access the keys in the map and then apply the Arrayform() method to create an array of the accessed keys. You can also apply the spread operator instead of the Array form() method to create an array of keys.

Given you a javascript Map, the task is to convert the keys of the Map into an array. Here is the example given below

Given map - 

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

Result array - 

[1, 2, 3, 4, 5]

There are multiple ways to achieve this. Some of them are -

  • Use Array.form and Map.keys() methods

  • Use the Spread operator and the Map.keys() method

  • Use for..of loop

Use Array.form() and Map.keys() methods

The Array.from() method returns an array from any iterable object. The Map.keys method is used to return all the keys of the Map in an iterable form. To convert map keys to array we follow the following steps.

  • Use the Map.keys() method to get all Map keys. It returns a MapIterator object containing the Map keys

  • Use Array.from() to extract Map keys from MapIterator. It returns an array containing all Map keys.

Example

In this example, we have a Map whose keys are numbers and values ​​are country names. We use Array.from method to extract all keys (numbers) 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>

Use Spread operator and Map.keys() method

JavaScript spread operator allows us to extend an array into individual array elements. The Map.keys method is used to return all the keys of the Map in an iterable form. To convert map keys to array we follow the following steps.

  • Use the Map.keys() method to get all Map keys. It returns a MapIterator object containing the Map keys

  • Use the Spread operator to extract Map keys from a MapIterator. It returns an array containing all Map keys.

Example

In this example, we have a Map whose keys are numbers and values ​​are country names. We use Spread Operator to extract all keys (numbers) 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 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>

Use for...of loop

for…of statement loops through the values ​​of an iterable object. The Map.keys method is used to return all the keys of a Map in an iterable form. To convert map keys to array we follow the steps below

  • Create an empty array to store the key.

  • Use a for..of loop to iterate over all Map keys obtained from the Map.keys() method.

  • Push the key into the empty array on each iteration.

Example

<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>

The above is the detailed content of How to convert a Map's keys to an array in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript Array 运算符 for 循环 operator map 对象
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Explain the usage of VirtualizedList component in ReactNative?Next article：Explain the usage of VirtualizedList component in ReactNative?

Related articles

See more