Difference between JS object and map

The difference between JavaScript Map and Object

difference

Key filed

In Object, the key must be a simple data type (integer, string or symbol), and in Map, it can be all data types supported by JavaScript, that is to say, an Object can be used as the key of a Map element.

element order

The order of Map elements follows the order of insertion, while Object's does not have this feature.

inherit

Map inherits from Object objects.

new instance

Object supports the following methods to create new instances:

var obj = {...};

var obj = new Object();

var obj = Object.create(null);

Map supports only one of the following build methods:

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

data access

Map To access elements, you can use the native methods of the Map itself:

map.get(1) // 2

Object can be accessed through . and [ ]

obj.id;

obj['id'];

Determine if an element is available in a Map

map.has(1);

Determining whether an element is in Object requires the following operations:

obj.id === undefined;

// or

'id' in obj;

1	`另外需要注意的一点是，Object 可以使用 Object.prototype.hasOwnProperty() 来判断某个key是否是这个对象本身的属性，从原型链继承的属性不包括在内。`

add a data

Maps can be manipulated using set():

map.set(key, value) // When the passed key already exists, the Map will overwrite the previous value

Object adds a new property that can be used:

obj['key'] = value;

obj.key = value;

// object will also override

delete data

There is no native delete method in Object, we can use the following method:

delete obj.id;

// The following approach is more efficient

obj.id = undefined

1	`需要注意的是，使用 delete 会真正的将属性从对象中删除，而使用赋值 undefined 的方式，仅仅是值变成了 undefined。属性仍然在对象上，也就意味着在使用` `for` `…` `in… 去遍历的时候，仍然会访问到该属性。`

Map has a native delete method to delete an element:

var isDeleteSucceeded = map.delete(1);

console.log(isDeleteSucceeded ); // true

// delete all

map.clear();

get size

Map itself has a size attribute, which can maintain the change of size by itself.

Object needs to be calculated with Object.keys()

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

Iterating

Map itself supports iteration, Object does not.

How to determine if a type supports iteration? The following methods can be used:

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

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

When to use Map and when to use Object?

Although Map is better than Object in many cases, as the most basic data type of JavaScript, there are still many situations where Object is more suitable.

　　When a simple data type is to be stored, and the keys are all strings, integers, or symbols, Object is preferred, because Object can be created using character variables, which is more efficient.
　　Object should be used when properties or elements need to be accessed in separate logic, 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.

// The above operations cannot be implemented with Map

　　JSON directly supports Object, but not Map
　　Map is pure hash, and Object also has some other internal logic, so there will be performance problems when executing delete. So write-delete-intensive situations should use Map.
　　Map will maintain the order of elements in insertion order, which Object cannot.
　　Maps perform better when storing a large number of elements, especially when the type of the key cannot be determined at code execution time.

Difference between JS object and map

Guess you like