Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to convert Map keys to an array in JavaScript?
There are different ways to convert a map keys to an array in JavaScript. You can use the map keys() method to access the keys in a map and then apply the Array form() 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 key.
You are given a javascript Map and the task is to convert the Map’s keys into array. Here is the example given below
Given Map −
{ 1: "India", 2: "Russia", 3: "USA", 4: "Japan", 5: "UK" };
Resulting Array −
[1, 2, 3, 4, 5]
There are multiple ways to Achieve this. Some of them are −
Using Array.form and Map.keys() method
Using Spread operator and Map.keys() method
Using for..of loop
Using Array.form() and Map.keys() Method
The Array.from() method returns an array from any iterable object. And the Map.keys method is used to return all the keys of a Map in an iterable form. To Convert Map keys into array we follow the following steps.
Get all the Map keys using Map.keys() method. It returns a MapIterator object which contains the Map keys
Extract Map keys from MapIterator using Array.from(). It returns an array containing all the Map keys.
Example
In this example we are having a Map whose keys are numbers and the values are country names. We are extracting all the keys (numbers) from the Map using Array.from method.
<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>
Using Spread Operator and Map.keys() Method
The JavaScript spread operator allows us to expand an array into individual array elements. And the Map.keys method is used to return all the keys of a Map in an iterable form. To Convert Map keys into array we follow the following steps.
Get all the Map keys using Map.keys() method. It returns a MapIterator object which contains the Map keys
Extract Map keys from MapIterator using Spread Operator. It returns an array containing all the Map keys.
Example
In this example we are having a Map whose keys are numbers and the values are country names. We are extracting all the keys (numbers) from the Map using Spread Operator.
<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>
Using for...of Loop
The 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 into array we follow the following steps
Create an Empty Array to store the keys.
Using for..of loop iterate all the Map keys which you will get from Map.keys() method.
At each iteration push that key into Empty Array.
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>
12K+ Views
