Blog

You can convert map values to an array in JavaScript using any of these methods –

1. Array.from() and map.values(). These methods are part of the built-in JavaScript ecosystem and therefore work on all browsers.
2. The spread operator and map.values() methods.
3. Using forEach() loop.
4. Using keys() method.

Let’s discuss each of these methods in detail.

Convert Map Values To An Array In JavaScript

1) Array.from() Method To Convert Map Values To An Array

The Array.from() method is used to create a new array instance from an array-like or iterable object.

In our case, we will be using the map.values() function to return an iterable object of map values which we will then convert to an array using the Array.from() method.

Here is an example :

const map = new Map();

map.set(‘one’, 1);

map.set(‘two’, 2);

console.log(Array.from(map.values())); //Output: //[1,2]

In the above example, we have created a new Map instance and added two key-value pairs to it.

We then use the map.values() function to return an iterable object of map values. This iterable is then passed as an argument to the Array.from() method which converts it into an array.

2) The spread Operator And map.values() To Convert Map Values To An Array

Another way to convert map values to an array is by using the spread operator along with the map.values() method.

The spread operator allows an iterable to be expanded in places where 0+ arguments are expected.

Therefore, when we use the spread operator with the map.values() method, it returns an array of map values.

Here is an example :

const map = new Map();

map.set(‘one’, 1);

map.set(‘two’, 2);

console.log([...map.values()]); //Output: //[1,2]

In the above example, we have again created a new Map instance and added two key-value pairs to it.

We use the spread operator (…) with the map.values() method which returns an array of map values.

3) Using The forEach() Method To Convert Map Values To An Array

Another way to convert map values into an array is by using the forEach() method.

The forEach() method executes a provided function once per each key/value pair in the Map object, in insertion order.

We can use this method to push the map values into an empty array.

Here is an example :

const map = new Map();

map.set(‘one’, 1);

map.set(‘two’, 2);

const arr = [];

map.forEach(value => {

  arr.push(value) ;

})

console.log(arr); //Output: //[1,2]

In the above example, we have again created a new Map instance and added two key-value pairs to it.

We then use the forEach() method to push the map values into an empty array.

This array is then logged to the console.

4) Using The keys() Method To Convert Map Values To An Array

Another way to convert map values into an array is by using the keys() method.

The keys() method returns a new Iterator object that contains the keys for each element in the Map object in insertion order.

We can use this method to push the map values into an empty array.

Here is an example :

const map = new Map();

map.set(‘one’, 1);

map.set(‘two’, 2);

const arr = [];

for (let key of map.keys()) {

  arr.push(map.get(key));

}

console.log(arr); //Output: //[1,2]

In the above example, we have again created a new Map instance and added two key-value pairs to it.

We use the keys() method to get an iterator of map keys. We then use a for…of loop to iterate over this iterator.

For each key, we use the map.get() method to get the corresponding value and push it into the array.

This array is then logged to the console.

Conclusion

As we can see, there are various ways to convert map values into an array in JavaScript.

Each method has its own advantages and disadvantages.

You can choose the method that best suits your needs.