登录
前端JavaScript:Object和Map及其区别是什么？
在 JavaScript 中，Object 和 Map 都是用于存储键值对的数据结构。长期以来，开发者们习惯使用普通对象来处理映射关系，但随着 ES6 的到来，Map 的出现彻底改变了这一局面。你是否曾疑惑过，为什么明明对象也能存键值对，还要引入 Map？它们之间到底有什么区别？什么时候该用 Map，什么时候该用 Object？本文将从底层原理到实战应用，带你彻底搞懂这两个数据结构。
一、基础认知：从设计初衷说起
1.1 传统的 Object：为结构化数据而生
普通对象（Plain Object）是 JavaScript 中最基础的数据结构之一，它的设计初衷是用来表示一个 “实体” 或 “结构化数据”。比如：
const user = {
name: '张三',
age: 25,
city: '北京'
};
在这个例子中，user 代表了一个用户实体，它的键是固定的字符串，值是对应的属性。这种场景下，Object 非常直观，我们可以通过 . 操作符快速访问属性。
1.2 现代的 Map：为通用映射而生
Map 是 ES6 引入的新数据结构，它的设计目标是成为一个通用的键值对映射容器。它不再局限于 “实体” 的概念，而是更像一个字典，允许你将任意类型的值映射到另一个值，无论键是什么类型。
const userMap = new Map();
userMap.set('name', '张三');
userMap.set({ id: 1 }, '用户详情'); // 直接用对象作为键
二、核心差异：8 个维度的全面对比
为了让你直观地看到两者的区别，我们先来看一张完整的特性对比表：
图 1：Map 与 Object 核心特性对比
接下来，我们深入解析这些差异。
2.1 键的类型：突破限制的灵活性
这是 Map 最核心的优势。
-
Object：键只能是 字符串 或 Symbol 类型。如果你尝试使用其他类型，JavaScript 会自动调用
toString()方法将其转换为字符串。 -
Map：键可以是 任意类型，包括对象、函数、数组、数字、布尔值，甚至
NaN。
// Object 的隐式类型转换
const obj = {};
const key1 = { id: 1 };
const key2 = { name: 'test' };
obj[key1] = '这是第一个对象';
obj[key2] = '这是第二个对象';
console.log(obj[key1]);
// 输出："这是第二个对象"！因为 key1.toString() 和 key2.toString() 都是 "[object Object]"
而在 Map 中，这完全不是问题：
const map = new Map();
const key1 = { id: 1 };
const key2 = { name: 'test' };
map.set(key1, '这是第一个对象');
map.set(key2, '这是第二个对象');
console.log(map.get(key1)); // 输出："这是第一个对象"
console.log(map.get(key2)); // 输出："这是第二个对象"
这意味着，你可以直接将 DOM 元素、函数实例作为键，来存储它们的关联数据，而无需手动生成唯一 ID。
2.2 键的顺序：严格的插入顺序
很多人以为 Object 的键是无序的，其实在 ES6 之后，Object 也开始保留插入顺序了，但它有一个致命的例外：数字键会被优先排序。
const obj = {};
obj['b'] = 2;
obj['1'] = 1;
obj['a'] = 3;
obj['2'] = 4;
console.log(Object.keys(obj));
// 输出：["1", "2", "b", "a"]
// 数字键被自动排到了前面，完全打乱了插入顺序！
而 Map 则严格保证了插入顺序，没有任何例外：
const map = new Map();
map.set('b', 2);
map.set('1', 1);
map.set('a', 3);
map.set('2', 4);
console.log(Array.from(map.keys()));
// 输出：["b", "1", "a", "2"]
// 完美遵循了我们的插入顺序
这对于日志记录、有序缓存等时序敏感的场景至关重要。
2.3 大小获取：O (1) vs O (n)
获取键值对的数量，两者的效率天差地别。
-
Object：你必须手动遍历所有键来计算长度，这是一个 O (n) 的操作。
-
const size = Object.keys(obj).length;
-
-
Map：内置了
size属性，直接返回大小，这是一个 O (1) 的操作，无需遍历。-
const size = map.size;
-
2.4 迭代能力：原生的遍历支持
-
Object：它本身不是可迭代对象（Iterable），你无法直接使用
for...of遍历它。必须先通过Object.keys()、Object.entries()等方法转换为数组。 - Map：它原生实现了迭代器协议，你可以直接遍历它，而且默认就是遍历键值对。
// Map 直接遍历
for (const [key, value] of map) {
console.log(key, value);
}
// Object 必须转换
for (const [key, value] of Object.entries(obj)) {
console.log(key, value);
}
2.5 原型链污染：安全的隔离
普通对象默认继承了 Object.prototype，这意味着它自带了 toString、hasOwnProperty 等默认属性。如果你不小心用这些名字作为键，就会发生冲突，甚至引发原型链污染攻击。
const obj = {};
console.log(obj.toString); // 输出：[Function: toString]，这是原型上的方法
而 Map 从一开始就是一张白纸，它没有原型，完全不存在这个问题：
const map = new Map();
console.log(map.has('toString')); // 输出：false
三、性能深度剖析：谁更快？
很多人都听说过 Map 性能更好，但具体好在哪里？我们来看一下基于 V8 引擎的实测数据。
图 2：10 万次操作下的性能对比（单位：毫秒）
3.1 底层实现的差异
- Object：V8 引擎为了优化属性访问，引入了 “隐藏类（Hidden Class）” 的机制。当你创建一个对象并添加固定的属性时，V8 会为它生成一个隐藏类，属性访问会被优化为直接的内存偏移，速度极快。但是，一旦你频繁地添加和删除属性，隐藏类就会不断地被重建和重排，这会带来巨大的性能开销，甚至会降级到 “字典模式”。
- Map：它的底层是基于哈希表（Hash Table）实现的。哈希表天生就为频繁的增删查改做了优化，插入、删除、查找的平均时间复杂度都是 O (1)。无论你怎么操作，它的性能都非常稳定。
3.2 关键发现
从测试数据中我们可以看到：
- 删除操作：Map 比 Object 快了近 3 倍！这是因为 Object 删除属性会触发隐藏类的重排，而 Map 的哈希表删除只是调整指针。
- 插入操作：Map 也有明显优势，特别是在动态数据场景下。
- 查找操作：两者差距不大，Object 因为隐藏类的优化，在小数据量下甚至略快。
- 内存占用：存储 10 万条数据时，Map 比 Object 节省了约 38% 的内存。
四、实战应用：什么时候用哪个？
了解了原理，我们来看看实际开发中该如何选择。
4.1 优先使用 Map 的场景
当你遇到以下情况时，Map 绝对是更好的选择：
1. 键不是简单的字符串
比如你需要用对象、DOM 元素作为键。
// 存储 DOM 元素的关联数据
const elementData = new Map();
const button = document.querySelector('#btn');
elementData.set(button, { clickCount: 0 });
button.addEventListener('click', () => {
const data = elementData.get(button);
data.clickCount++;
});
2. 需要频繁增删键值对
比如缓存系统、高频更新的状态。
// 防止重复请求
const pendingRequests = new Map();
function requestInterceptor(config) {
const key = generateRequestKey(config);
if (pendingRequests.has(key)) {
// 取消之前的请求
pendingRequests.get(key).cancel();
}
// 存储新的请求
pendingRequests.set(key, cancelToken);
}
3. 需要有序的键值对
比如日志记录、有序的配置列表。
4. 需要频繁查询大小
比如你需要经常知道当前缓存里有多少条数据。
4.2 优先使用 Object 的场景
当然，Object 并没有被淘汰，在这些场景下，它依然是首选：
1. 存储静态的结构化数据
比如用户信息、配置项，这些数据的键是已知的、固定的字符串。
const config = {
apiUrl: 'https://api.example.com',
timeout: 5000,
debug: true
};
这种场景下，Object 的 . 语法访问属性比 map.get() 更直观，而且 V8 的隐藏类优化能发挥到极致。
2. 需要 JSON 序列化
Object 天生支持 JSON.stringify()，而 Map 不支持，需要手动转换。
JSON.stringify(user); // 正常工作
JSON.stringify(userMap); // 输出：{}，无法直接序列化
3. 简单的一次性数据处理
如果只是临时存几个简单的键值对，用完就扔，用字面量 {} 创建对象比 new Map() 更快捷。
五、面试高频考点
这部分是面试中的常客，你需要掌握：
- 问：Map 和 Object 的区别是什么？ 答：从键的类型、顺序、大小获取、迭代、原型链、性能这几个维度回答即可。
- 问：Object 的键顺序是怎样的？ 答：ES6 之后，Object 会先把整数键按升序排，然后字符串和 Symbol 键按插入顺序排。而 Map 是严格的插入顺序。
- 问：为什么 Map 在频繁增删时性能更好？ 答：因为 Object 底层是隐藏类，频繁增删会导致隐藏类重排；而 Map 是哈希表，增删查改都是 O (1) 的稳定操作。
六、总结
Map 和 Object 并不是谁取代谁的关系，它们是互补的。
- Object 更像一个 “数据模型”，适合存储结构固定、键为字符串的静态数据，它支持 JSON 序列化，语法直观。
- Map 更像一个 “数据容器”，适合处理动态的、复杂的映射关系，它支持任意键、有序性、高效的增删操作。
在现代前端开发中，随着应用复杂度的提升，Map 的使用场景越来越多。学会根据业务场景灵活选择，才能写出更高效、更健壮的代码。
参考资料
[1] MDN Web Docs. 带键的集合 [EB/OL]. developer.mozilla.org/zh-CN/docs/…, 2025. [2] zqmgx13291. JavaScript Map 数据结构：原理、实践与性能优化 [EB/OL]. CSDN 博客，2025. [3] 前端小木屋. Object 与 Map 的区别有哪些？[EB/OL]. 稀土掘金，2025. [4] Pu_Nine_9. 深入理解 ES6 Map 数据结构：从理论到实战应用 [EB/OL]. CSDN 博客，2026. [5] 软件求生。你以为你会用 Map? 这些细节 90% 的人都忽略了 [EB/OL]. 今日头条，2026.
