Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to convert Map keys to an array in JavaScript?
In JavaScript, you can convert a Map's keys to an array using several methods. The most common approaches are using Array.from(), the spread operator, or a for...of loop with Map.keys().
Given a JavaScript Map, the task is to extract all keys and create an array from them. Here's an example:
Given Map:
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 conversion:
Using
Array.from()andMap.keys()methodUsing Spread operator and
Map.keys()methodUsing
for...ofloop
Using Array.from() and Map.keys() Method
The Array.from() method creates an array from any iterable object. The Map.keys() method returns a MapIterator containing all the keys of a Map.
Steps:
Get all Map keys using
Map.keys()methodConvert the MapIterator to an array using
Array.from()
Example
<html>
<head>
<title>Convert Map keys to array using Array.from()</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 onclick="convert()">Click Here</button>
<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 = Array.from(mp.keys());
result.innerText = "Converted Array: [" + keys + "]";
}
</script>
</body>
</html>
Using Spread Operator and Map.keys() Method
The spread operator (...) expands an iterable into individual elements. Combined with Map.keys(), it creates an array of keys in a more concise way.
Steps:
Get all Map keys using
Map.keys()methodUse the spread operator to convert MapIterator to an array
Example
<html>
<head>
<title>Convert Map keys to array using Spread Operator</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 onclick="convert()">Click Here</button>
<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 = [...mp.keys()];
result.innerText = "Converted Array: [" + keys + "]";
}
</script>
</body>
</html>
Using for...of Loop
The for...of loop iterates through iterable objects. This method gives you more control over the conversion process.
Steps:
Create an empty array to store the keys
Use
for...ofloop to iterate throughMap.keys()Push each key into the empty array
Example
<html>
<head>
<title>Convert Map keys to array using for...of loop</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 onclick="convert()">Click Here</button>
<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>
Comparison
| Method | Code Length | Performance | Readability |
|---|---|---|---|
Array.from() |
Medium | Good | Clear |
| Spread Operator | Short | Good | Very Clear |
for...of Loop |
Long | Good | Explicit |
Conclusion
The spread operator method ([...map.keys()]) is the most concise and readable approach. Use Array.from() for more explicit conversion or for...of when you need additional processing during iteration.
13K+ Views
