The difference between JavaScript Map and Object

difference

Key filed

In Object, key must be simple data types (integer, string or Symbol), but may be in the Map JavaScript support all data types, that can be used as a key to a Map Object element.

 

Element order

Map of the order follows the order of insertion elements, and Object is not this feature.

 

inherit

Map inherited from Object object.

 

New Instance

Object supports the following methods to create a new instance:

var obj = {...};

var obj = new Object();

var obj = Object.create(null);

 

Map It only supports the following method of constructing:

var map = new Map([1, 2], [2, 3]); // map = {1 => 2, 2 => 3}

 

data access

Map want to access the elements, you can use the Map itself native method:

map.get(1) // 2

 

Object can be accessed through. And []

obj.id;

obj['id'];

 

Determining whether an element can be used in a Map

map.has(1);

 

Judgment is not an element requires the following operations in Object:

=== obj.id undefined; 

// or 

' ID '  in obj;

Also to note is that, Object you can use Object.prototype.hasOwnProperty () to determine whether a key is a property of the object itself, inherited from the prototype chain properties are not included.

　　

New data

Map can use the set () operation:

the Map. the SET (key, value)        // value before when incoming key already exists, Map overrides

 

Object add a property can be used:

obj [ ' Key ' ] = value; 

obj.key = value; 

// Object will be covered

 

delete data

No native deletion method in the Object, we can use the following ways:

obj.id Delete; 

// this is efficient following more 

obj.id = undefined

It should be noted that the use of the property will actually delete removed from the object, and use assignments undefined, just value becomes undefined. Properties still on the object, which means the use for ... in ... to traverse, it still will have access to the property.

　　

Map has a native delete method to delete elements:

var isDeleteSucceeded = map.delete(1);

console.log(isDeleteSucceeded ); // true

// 全部删除

map.clear();

 

Get size

Map size has its own attributes, it can change size to maintain themselves.

Object is required by Object.keys () is calculated

console.log(Object.keys(obj).length); 

 

Iterating

Map itself supports iteration, Object does not support.

How to determine a type is not supported iteration of it? You can use the following method:

console.log(typeof obj[Symbol.iterator]); // undefined

console.log(typeof map[Symbol.iterator]); // function

 

When to Use Map, when to use Object?

Although in many cases better than the Map Object, but as most JavaScript basic data types, there are still many scenarios more suitable for use Object.

 

• 　　When you want to store simple data types, and key are string or integer or Symbol of the time, priority use of Object, since Object mode can be used to create a character variable, more efficient.
• 　　When the need to access attributes or elements in a separate logic should be used Object, for example:

var obj = {

    id: 1, 

    name: "It's Me!", 

    print: function(){ 

        return `Object Id: ${this.id}, with Name: ${this.name}`;

    }

}

console.log(obj.print());//Object Id: 1, with Name: It's Me.

// 以上操作不能用 Map 实现

 

• 　　JSON directly supports Object, but does not support Map
• 　　Map is pure hash, but there are some other Object inherent logic, so there will be a performance problem in the implementation of delete. So write delete intensive case you should use Map.
• 　　Map will maintain the order of the elements in order of insertion, but can not Object.
• 　　Map large number of elements in the storage when the performance is better, especially in the case can not determine the type of key in the code execution.