Map 与 Object：JavaScript 中两大常用键值对存储结构的区别

本文链接：https://blog.youkuaiyun.com/weixin_63726940/article/details/144984659

在 JavaScript 中，Object 和 Map 都是用于存储键值对的容器。尽管它们看起来非常相似，但它们在实现、特性和使用场景上有着显著的不同。理解它们的区别，对于写出高效、可维护的代码至关重要。本文将深入探讨这两者的区别，帮助开发者在实际开发中做出更合适的选择。

一、`Object`：传统的键值对存储

Object 是 JavaScript 最早提供的键值对存储方式，几乎所有的 JavaScript 开发者都在日常开发中使用过 Object。它的设计初衷是为了存储描述实体的属性，例如一个用户的姓名、年龄等。

1.1 `Object` 的特性

键（Key）是字符串或 Symbol 类型：在 Object 中，所有的键都会被自动转换成字符串。即使你使用数字、布尔值或其他数据类型作为键，它们最终会被转换为字符串。
无序性：虽然现代 JavaScript 引擎（如 V8）会保证插入顺序，但 JavaScript 对象的键本质上是无序的，尤其在旧版引擎中，它们可能会按照不同的顺序排列。
继承自 Object 原型：所有 Object 都继承自 Object 原型，因此，Object 中可能包含一些来自原型链上的属性（例如 toString、hasOwnProperty 等）。
不支持复杂的数据类型作为键：键只能是字符串或 Symbol，如果你尝试使用其他类型（如对象、数组、函数等）作为键，它们会被转换成字符串。

1.2 示例：`Object` 的使用

const person = {
  name: 'Alice',
  age: 30
};

// 添加属性
person.email = 'alice@example.com';

// 访问属性
console.log(person.name); // Alice

// 检查属性是否存在
console.log('age' in person); // true

// 删除属性
delete person.age;
console.log(person); // { name: 'Alice', email: 'alice@example.com' }

二、`Map`：更加灵活的键值对存储

Map 是 ES6 引入的一种新的数据结构，用于存储键值对。与传统的 Object 相比，Map 提供了更多的灵活性和更好的性能，特别是在需要频繁进行插入、删除、查找操作时。

2.1 `Map` 的特性

键可以是任意类型：与 Object 只能使用字符串或 Symbol 作为键不同，Map 的键可以是任何数据类型，包括对象、数组、函数等。这意味着你可以用复杂的数据结构作为键。
保持插入顺序：Map 会按照键值对插入的顺序进行迭代。这使得在遍历时能够精确控制元素的顺序，特别适合需要按照顺序处理数据的场景。
没有原型链的干扰：Map 直接存储键值对，不继承任何默认的属性和方法（如 hasOwnProperty）。因此，它不会受到原型链的干扰，避免了 Object 中可能会发生的属性冲突。
更好的性能：Map 的性能在进行插入、删除、查找等操作时优于 Object，特别是在存储大量数据时。Map 的所有操作（如 .set(), .get(), .has(), .delete()）的时间复杂度为常数级（O(1)）。

2.2 示例：`Map` 的使用

const user = new Map();

// 添加键值对
user.set('name', 'Bob');
user.set('age', 25);

// 访问值
console.log(user.get('name')); // Bob

// 检查键是否存在
console.log(user.has('age')); // true

// 删除键值对
user.delete('age');
console.log(user.has('age')); // false

// 遍历 Map
user.set('email', 'bob@example.com');
user.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// name: Bob
// email: bob@example.com

三、`Map` 与 `Object` 的对比

特性	`Object`	`Map`
键类型	只能是字符串或 `Symbol`	键可以是任何类型（对象、数组、函数等）
插入顺序	无法保证（尽管现代引擎保证插入顺序）	保持插入顺序
性能	对于频繁的查找、插入、删除操作，较差	对于频繁的查找、插入、删除操作，表现更好
是否继承原型链	会继承自 `Object` 原型	不继承任何原型方法和属性
常用方法	`obj[key]`、`in`、`delete`	`set()`、`get()`、`has()`、`delete()`
适用场景	存储简单的键值对，通常用于表示实体对象	存储需要频繁修改、查找、删除或保持顺序的键值对

四、何时使用 `Map`，何时使用 `Object`？

4.1 使用 `Object` 的场景

表示简单的实体：当你需要表示一个简单的对象，如用户、商品等，Object 是最自然的选择。它让我们可以通过键（属性）来描述对象的特征。
JSON 数据：在与服务器进行交互时，Object 常用于表示 JSON 格式的数据。
```
const user = {
  name: 'John',
  age: 30
};
```

4.2 使用 `Map` 的场景

频繁的键值对操作：如果你需要频繁插入、删除或查找键值对，Map 提供了更好的性能，尤其是当你的键值对较多时。
需要使用非字符串键：如果你的键需要使用数组、对象或函数等复杂数据类型，Map 是唯一可行的选择。
需要保持插入顺序：如果你需要按插入顺序遍历键值对，Map 会比 Object 更适合。
```
const map = new Map();
map.set(1, 'one');
map.set(true, 'yes');
map.set({name: 'Alice'}, 'user');
```