Object and Map are both dynamic collections of key-value pairs. From this definition, they are very similar, but you can also find some differences between them.

1. Different structures

Object literal syntax is the easiest way to create an object map in JavaScript.


const numbersObj = {

1: "One",

2: "Two",

};

Copy the code

Maps are created using the built-in Map constructor.


const numbersMap = new Map([

[1, "One"],

[2, "Two"],

]);

console.log(numbersMap); // Map(2) { 1 => 'One', 2 => 'Two' }

Copy the code

From now on, use Object or Object Maps to represent collections of key values created using object literal syntax, and use maps to represent maps built using the built-in Map constructor.

2. The key name is different

The key name of object is a string, and the key name of Map can be any type. Object is a collection of key-value pairs, and the keys can only be strings. Map keys can be of any type. For example, if you use a number as a key in an object literal as described earlier, that number will be converted to a string and used as a key.

Since the key is converted to a string, the same result is obtained when the corresponding numeric key 1 value or string ‘1’ value is obtained. As follows:


const numbersObj = {

1: "One",

2: "Two",

};

console.log(numbersObj[1]); // One

console.log(numbersObj["1"]); // One

Copy the code

With Map, keys can be of any type, so a 1 numeric key is different from a ‘1’ string key.


const numbersMap = new Map([

[1, "One"],

[2, "Two"],

]);

console.log(numbersMap.get(1)); // One

console.log(numbersMap.get("1")); // undefined

Copy the code

In both cases, the bond is unique. You cannot have two attributes with the same key in an object, or two elements with the same key in a map.

3. Objects have stereotype chain properties

The difference is that objects created using Object literals have object.prototype key-value pairs. When you print Object.prototype, you can see that it has properties such as hasOwnProperty, isPrototypeOf, toLocaleString, toString, as follows:

An object created using the literal syntax of an object will have all of these property keys. So the empty object {} is not really empty, as follows:

const mapObject = {}; console.log(mapObject["toString"]); ƒ toString() {[native code]}Copy the code

Object.create(null) is recommended for creating empty objects, because object.create (null) builds an Object without prototype.


const mapObject = Object.create(null);

console.log(mapObject["toString"]); // undefined

Copy the code

4. Map retains the key order, but Object does not

The original order in which the key-value pairs were defined is preserved in the Map, but not in the Object.


const numbersObj = {

2: "Two",

1: "One",

};

const keys = Object.keys(numbersObj);

console.log(keys); // [ '1', '2' ]

const keyValuePairs = Object.entries(numbersObj);

console.log(keyValuePairs); // [ [ '1', 'One' ], [ '2', 'Two' ] ]

Copy the code

As shown in the code above, key 2 precedes key 1 when the object is created and after 1 when all keys are retrieved.

Here is a similar collection built using the Map constructor, as follows:


const numbersMap = new Map([

[2, "Two"],

[1, "One"],

]);

const keys = numbersMap.keys();

console.log(keys); // [Map Iterator] { 2, 1 }

const keyValuePairs = numbersMap.entries();

console.log(keyValuePairs); // [Map Entries] { [ 2, 'Two' ], [ 1, 'One' ] }

Copy the code

5. Map operation interface is more friendly

Object gets the name of the key requiring an auxiliary function, while image Maps have more friendly interfaces like Add, GET, HAS, and so on.

6. JSON supports Object but does not support image Map

In terms of JSON data processing, the related functions support Object but not image Map.

const numbersMap = new Map([ [2, "Two"], [1, "One"], ]); const json = JSON.stringify(numbersMap); console.log(json); / / {}Copy the code

Object can, as follows:


const numbersObj = {

2: "Two",

1: "One",

};

const json = JSON.stringify(numbersObj);

console.log(json); // {"1":"One","2":"Two"}

Copy the code

conclusion

Object and image Map are two common data types in JavaScript, and Object Objects are known as hash maps in other languages. Keys in access objects have O(1) access time, which means that acquiring keys takes a constant time regardless of the amount of data in the object.

Regardless of how these key-value collections are created using the Map constructor or object literal syntax, they are primarily used to quickly search for data.

Regardless of how these key-value collections are created using the Map constructor or object literal syntax, they are primarily used to quickly search for data. They are all executed within O(1) access time, and the Map retrieval key does not need to scan all the data.

Map provides a better interface for managing key-value pairs and is a better choice in scenarios where entries are frequently added and removed.