JavaScript中Map与Object的区别

在JavaScript中，Map和Object是用于存储键值对数据的两种不同的数据结构（Map是ES6新增的数据结构），它们在构造方式、键的类型以及原型继承等方面存在区别。

一、主要区别

1.构造方式

Map：Map只能通过构造函数new Map()创建。‌

let map=new Map();
map.set('name', 'Tom');
map.set('age', 18);
console.log(map);

Object：可以通过字面量、new Object()、Object.create()等方式创建。

let obj={name:'Tom'};
obj.age=18;
console.log(obj);

2.键的类型

Map：Map的键可以是任意类型，包括对象、数组、函数等。

let map1=new Map();
map1.set(1,'number');
map1.set('a','string');
map1.set(true,'boolean');
console.log(map1);

Object：Object的键只能是字符串或者Symbol，其他类型的键会被转换为字符串。

let obj1={};
obj1[1] = 'number';
obj1['a'] = 'string';
obj1[true] = 'boolean'; // 实际存储时会转换成字符串 'true'
console.log(obj1);

3.键的顺序

Map：Map会保持键值对的插入顺序，所以是有序的。

接着上面列子后增加数字key，有序:

map1.set(2,'number');
console.log(map1);

Object：对象是无序的，尽管ES6开始对象保留了字符串和Symbol类型key的创建顺序，但在存在数字key的情况下，会优先迭代数字key。通常按照数值、字符串、Symbol的顺序排列。

接着上面列子后增加数字key，无序(会优先迭代数字key):

obj1[2]='number';
console.log(obj1);

两者对比：

4.键值大小

Map：使用 .size 属性来获取其大小。使用 .get() 方法获取值。

Object：没有内置的方法来获取其大小（键值对的数量），可采用Object.keys(xxx).length。使用 . 获取值。

例如：console.log(map1.size); // 4 console.log(Object.keys(obj1).length)； // 4

console.log(map1.get('a')); // string console.log(obj1.a);//string

其他访问方式：

Map：提供了一组方法来操作键值对，例如：size返回成员总数，get(key)读取键名对应的键值, set(key,value)设置键名对应的键值, has(key)查找某个键名是否在map对象中返回布尔值, delete(key)删除某个键，clear()清除所有成员无返回值等。

Object：对象通常通过点运算符或方括号运算符来访问属性，使用hasOwnProperty来检查属性是否存在。

5.原型继承

Map：Map不会从原型链中继承属性。

Object：通过字面量创建的对象会继承来自Object.prototype的属性，例如toString、constructor等。

6.迭代

Map：Map是可迭代的，实现了iterator接口，可以使用for...of或.forEach循环。使用 .keys()、.values()、.entries() 获取迭代器。

const map2 = new Map([['a', 1], ['b', 2], ['c', 3]]);
// 遍历 Map
for (let [key, value] of map2) {
console.log(`${key}: ${value}`);
}
// 使用 Map.keys, Map.values, Map.entries
console.log(map2.keys()); // Iterator { 'a', 'b', 'c' }
console.log(map2.values()); // Iterator { 1, 2, 3 }
console.log(map2.entries()); // Iterator { ['a', 1], ['b', 2], ['c', 3] }

Object：对象本身不可直接迭代，但可以先遍历其键或值的集合，在迭代。通过for...in循环，再使用Object.keys()、Object.values()、Object.entries等方法获取键、值或键值对。

const obj2 = { a: 1, b: 2, c: 3 };
// 遍历 Object
for (let key in obj2) {console.log(`${key}: ${obj2[key]}`);
}
// 使用 Object.keys, Object.values, Object.entries
console.log(Object.keys(obj2)); // ['a', 'b', 'c']
console.log(Object.values(obj2)); // [1, 2, 3]
console.log(Object.entries(obj2)); // [['a', 1], ['b', 2], ['c', 3]]

7.性能

Map：Map提供了有序性和灵活的键类型，在频繁添加和删除键值对的场景下进行了优化，性能表现更好。Map在处理大量数据时性能优于Object，尤其是当键值对数量非常大时。

Object：Object则更适合作为普通对象的容器，尤其在不需要严格顺序和键类型单一的场景中使用。在处理少量数据时，Object的性能优于Map，但在处理大量数据时性能较差。

8.JSON支持

Map：Map JSON不支持Map格式。

Object：对象可以直接被JSON处理，适用于与后端接口交互。

‌二、使用场景

1.当存储简单数据类型且键为字符串或整数时，优先选择Object，因为它可以通过字面量形式高效创建。

2.当需要在单独的逻辑中访问属性或元素时，应使用Object，例如需要使用this指针的场景。

3.当需要在代码执行时不能确定键的类型时，选择Map更为合适，因为它允许更灵活的键类型。

4.写入删除密集的情况下，由于Map在这方面有性能优势，所以应选择Map。

5.如果需要保持元素的顺序，应选择Map，因为Object无法保证元素的顺序。

6.在处理大量数据时，Map通常比Object更高效，特别是在频繁访问和操作数据的情况下。

7.JSON直接支持Object，但不支持Map，因此在涉及序列化到JSON的应用场景时更适合使用Object。

三、总结

	Map	Object
构造方式	new Map()创建	通过字面量、`new Object()`、`Object.create()`等方式创建
键的类型	Map的键可以是任意类型，包括对象、数组、函数等	只能是字符串或者Symbol，其他类型的键会被转换为字符串
键的顺序	有序	无序
键值大小	使用 `.size` 属性来获取其大小。使用 `.get()` 方法获取值。	没有内置的方法来获取其大小（键值对的数量）采用Object.keys(xxx).length获取大小。使用 `.` 获取值。
原型继承	不会从原型链中继承属性	会从原型链中继承属性
迭代	可以直接迭代	获取到键值后才能迭代
性能	在频繁添加和删除键值对性能更好	在频繁添加和删除键值对未作出优化