How to convert a normal object to an ES6 Map using JavaScript?

There are many ways to convert ordinary objects into ES6 Maps in JavaScript. The simplest and most efficient way is to use the Object.entries() function and the Map() constructor. In contrast, more flexible alternatives include Object.keys() and Array.prototype.forEach() as well as for...in loops and Map() Function methods.

in ES6 is a collection of key-value pairs. Here, we can use any type of object as a key, including primitive data types like strings and numbers. The values ​​in the map can be objects of any type.

The main difference between Map and Object is that in Map the keys can be of any data type whereas in Object they are always converted to string.

Nonetheless, maps have some advantages over ordinary objects, such as iterability and guaranteed element ordering. This article explains how to convert ordinary objects into ES6 Maps using JavaScript.

Method 1: Using Object.entries() and Map()

The first method of converting ordinary objects to intp ES6 mapping that we are going to learn today consists of two steps -

• Use the Object.entries() method to obtain an array of key-value pairs from the object

• Then pass the array to the Map() constructor.

Example

Each array in the array returned by the Object.entries() method represents a key-value pair in the object. Here is an example of how to change a normal object to an ES6 Map using the Object.entries() and Map() constructors -

let plainObject = { "one": 1, "two": 2, "three": 3 };
let map = new Map(Object.entries(plainObject));
console.log(map); 

In this example, use the Object.entries() function to convert a normal object into an array of key-value pairs. This array is then passed to the Map() function, which generates a new Map object using these key-value pairs.

The Object.entries() method requires only one line of code and is fully supported by most modern browsers. However, this approach is limited to objects with enumerable properties, and excludes properties with symbolic keys.

Method 2: Use for...in loop and Map() constructor

Now let's look at another way to convert a normal object to an ES6 Map. The method includes the following steps

• Use for...in loop to iterate the properties of the object

• Use the Map.set() method to add them to a new Map object.

Example

Here is an example of how to convert a normal object to an ES6 Map using a for...in loop and the Map() constructor -

let plainObject = { "one": 1, "two": 2, "three": 3 };
let map = new Map();
for (let key in plainObject) {
   map.set(key, plainObject[key]);
}
console.log(map); 

In this method, we loop and set the map properties, which may make this method less efficient than the first method.

However, this method also works for objects with non-enumerable properties and properties with Symbols as keys.

Method 3: Use Object.keys() and Array.prototype.forEach()

In this method we follow the steps given below -

• We first use Object.keys(obj) to get the array of object keys.

• Then we use the Array.prototype.forEach() method to iterate over the keys

• Then we use the Map.set() method to add key-value pairs to the map.

Example

let plainObject = { "one": 1, "two": 2, "three": 3 };
let map = new Map();
Object.keys(plainObject).forEach(key => {
   map.set(key, plainObject[key]);
});
console.log(map);

It is important to remember that the for...in loop, Object.keys() and Array.prototype.forEach() methods will all return property objects in a different order than the original definition. Properties will be returned in enumeration order.

However, the Map() function method will return the key-value pairs in the order in which they are passed.

in conclusion

Depending on the specific requirements of your project, you can choose the method that best suits your needs. Keep in mind that if order is important in your use case, the Map() constructor method is the best choice; otherwise, other methods will work fine.

The above is the detailed content of How to convert a normal object to an ES6 Map using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!