The Map object is a useful feature in JavaScript. The map object allows us to call many different methods for different requests. This article will share how to convert Map values to an array in JavaScript.
How to convert Map Values to an Array in JavaScript
The Map contains key-value pairs. The keys in the Map can have values of any value type. The Map will store the order of the key-value pairs. To learn more about other methods called on Map, click here.
The question here is how to access the values in the Map. There are several different ways to access values in a Map. One of them is converting the Map value to an array. This section gives two methods to convert Map’s values into an array by using Array.from() and Spread syntax ‘...‘.
Using the Array.from() method
The first step is to use the value() method on the created Map. The value() method will return an iterator with the values in the Map.
Then we use the Array.from() method for the created iterator object. This method will return a new array from any iterable object.
Example:
const dog = new Map();
dog.set("breed", "poodle");
dog.set("name", "Mono");
dog.set("age", 4);
const value = Array.from(dog.values());
console.log(value);Output:
[ 'poodle', 'Mono', 4 ]In this example, we create a new Map named ‘dog’ using the new Map() method. Using the set() method, we create key-value pairs of ‘dog’. Next, call the values() methods on ‘dog’. The values() method will return an iterator object with the values in ‘dog’. Finally, we use the Array.from() method for the created iterator objects.
In the set() method, you can use an object for the second parameter if you want the Map to store more information.
Example:
const dog1 = {
breed: "poodle",
name: "Mono",
age: 4,
};
const dog2 = {
breed: "golden",
name: "ChiPu",
age: 2,
};
const dog = new Map();
dog.set("1", dog1);
dog.set("2", dog2);
const values = Array.from(dog.values());
console.log(values);Output:
[
{ breed: 'poodle', name: 'Mono', age: 4 },
{ breed: 'golden', name: 'ChiPu', age: 2 }
]Using the Spread syntax ‘…’
We use the values() method on the created Map in the first step. The values() method will return an iterator object with the values in the Map.
Then use the Spread syntax ‘...‘ to return a new array containing the values of the created iterator object.
Example:
const dog = new Map();
dog.set("breed", "golden");
dog.set("name", "ChiPu");
dog.set("age", 2);
const values = [...dog.values()];
console.log(values);Output:
[ 'golden', 'ChiPu', 2 ]In this example, we create a new Map named ‘dog’ using the new Map() method. Using the set() method, we create key-value pairs of ‘dog’. Next, call the values() methods on ‘dog’. The values() method will return an iterator object with the values in ‘dog”. We then use the Spread syntax ‘...‘ to return a new array containing the values of the created iterator object.
This method can also work with multiple Map objects.
Example:
const dog1 = new Map();
dog1.set("breed", "golden");
dog1.set("name", "ChiPu");
dog1.set("age", 2);
const dog2 = new Map();
dog2.set("breed", "poodle");
dog2.set("name", "Mono");
dog2.set("age", 4);
const values = [...dog1.values(), ...dog2.values()];
console.log(values);Output:
[ 'golden', 'ChiPu', 2, 'poodle', 'Mono', 4 ]Summary
This article has shown how to convert Map values to an array in JavaScript. I hope the information in this article will be helpful to you. Thank you for reading!
Maybe you are interested:
- Check if String contains Substring from Array in JS
- How to Convert an Array to a Set in JavaScript
- Convert a Map to an Array of Objects in JavaScript
Hello, my name’s Bruce Warren. You can call me Bruce. I’m interested in programming languages, so I am here to share my knowledge of programming languages with you, especially knowledge of C, C++, Java, JS, PHP.
Name of the university: KMA
Major: ATTT
Programming Languages: C, C++, Java, JS, PHP
