It is well known that JavaScript Object and Map are very similar data structures, but from the perspective of underlying principles, there are still many differences between them in nature. The comparison between them can help us better understand their use and usage scenarios.

Key type

Object

The key of Object must be of type String or Symbol, and the toString method is called to convert the key toString by default, so there can be a problem with same-name key overwriting.

Note: Array and Function are essentially Object extensions, so they both have corresponding toString methods.

The object key

When an Object is used as a key, the object.toString method is called to convert it to an Object string (“[Object Object]”).

({}.toString()); // "[object Object]"

var obj = {};
obj[{}] = "ok";
console.log(JSON.stringifpwdy(obj)); // {"[object Object]":"ok"}
Copy the code

The array keys

The array.toString method is called to convert an Array as a key to an empty string (“”).

[].toString(); / / ""

var obj = {};
obj[[]] = "ok";
console.log(JSON.stringify(obj)); // {"":"ok"}
Copy the code

The function keys

The function.toString method is called when a Function is used as a key to convert it to a Function string (“() => {}”).

(function test() = >{}).toString(); / / "() = > {}"

var obj = {};
obj[() = >= {}]"ok";
console.log(JSON.stringify(obj)); // {"() => {}":"ok"}
Copy the code

Map

Map supports any type of key.

Map objects are collections of key/value pairs where both the keys and values may be arbitrary ECMAScript language values.

Key uniqueness

Object overwrites the key with the same name

Because the key of Object calls toString by default, multiple assignments will be overwritten if the current key is an empty Object ({}) or an empty array ([]).

var obj = {};
obj[{}] = "step1";
obj[{}] = "step2";
console.log(JSON.stringify(obj)); // {"[object Object]":"step2"}
Copy the code

The only key Map

Each key is unique in the Map, and the Map compares the type or reference of the stored key in the stored procedure. If the current Map stores two empty objects ({}) of the same type but with different memory addresses referenced on the stack, the Map is considered to be two independent keys, as shown in the following example:

Over all previous order

The Object disorder

The result of traversing Object is an unordered list.

var obj = { 1: 1.2: 2.a: "a".f: "f" };
console.log(Object.keys(obj)); // ["1", "2", "a", "f"]

obj = { a: "a".1: 1.2: 2.f: "f" };
console.log(Object.keys(obj)); // ["1", "2", "a", "f"]
Copy the code

The Map and orderly

The result after traversing the Map is an ordered list.

var map = new Map(a); map.set(1.1);
map.set("a"."a");
map.set(2.2);
console.log([...map.values()]); // [1, "a", 2]
Copy the code

To traverse the

Object

Object does not implement the iterator (@@iterator) interface, can not use for of traversal, but can use for in and other methods traversal. Of course, Object doesn’t support iterator, but you can extend @@iterator for iterator.

var obj = { a: "a".1: 1.2: 2.f: "f" };

for (key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key); }}console.log(Object.keys(obj)); // ["1", "2", "a", "f"]
Copy the code

Map

Map implements the @@iterator interface, which can be used for traversal.

Map.prototype [ @@iterator ] ( )

var map = new Map(a); map.set(1.1);
map.set("a"."a");
map.set(2.2);

for (item of map) {
  console.log(item);
}
Copy the code

Inheritance relationships

From the prototype chain inheritance structure, we can see that Map is actually inherited from Object, that is, Map is the instance Object of Object, whereas Object is not the instance Object of Map.

Reference documentation

ECMA official documentation