How to convert a Map's keys to an array in JavaScript?-JS Tutorial-php.cn

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

PHPz

Release： 2023-08-24 13:53:05

forward

1902 people have browsed it

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" };

Copy after login

Result array -

[1, 2, 3, 4, 5]

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!