JavaScript 中 Map 和 Object 的区别是什么？ -岩石教程

1. 键的类型

Object：

Object 的键必须是字符串或符号（symbol）。

如果使用其他类型（如数字、布尔值、对象）作为键，会自动转换为字符串。

const obj = {};
obj[123] = 'number'; // 键被转换为字符串 '123'
obj[true] = 'boolean'; // 键被转换为字符串 'true'
console.log(obj); // { '123': 'number', 'true': 'boolean' }

Map：

Map 可以接受任何类型的值作为键，包括原始类型值和对象。

const map = new Map();
map.set(123, 'number');
map.set(true, 'boolean');
map.set({}, 'object');
console.log(map); // Map { 123 => 'number', true => 'boolean', {} => 'object' }

2. 键的顺序

Object：
- 键的顺序不一定是插入的顺序。属性名是整数的属性会按照数值大小排序，其余属性则按插入顺序排列。
Map：
- 键值对按插入顺序保存。Map 记录了元素的插入顺序，这样可以确保遍历时顺序不变。

3. 属性的操作方法

Object：

使用点操作符（.）或方括号（[]）访问和设置属性。
删除属性使用 delete 操作符。

判断属性是否存在使用 in 操作符或 hasOwnProperty 方法。

const obj = { key: 'value' };
console.log(obj.key); // 访问属性
obj.key = 'newValue'; // 设置属性
delete obj.key; // 删除属性
console.log('key' in obj); // 检查属性是否存在

Map：

使用 set 方法添加或更新键值对，get 方法获取值。
使用 delete 方法删除键值对。

使用 has 方法检查键是否存在。

const map = new Map();
map.set('key', 'value'); // 添加键值对
console.log(map.get('key')); // 获取值
map.delete('key'); // 删除键值对
console.log(map.has('key')); // 检查键是否存在

4. 大小和性能

Object：
- 没有内置的属性来获取属性的数量。通常需要使用 Object.keys() 等方法。
- 因为 Object 的键只能是字符串或符号，所以在存储大量键值对时性能可能会受到影响。
```
const obj = { a: 1, b: 2 };
console.log(Object.keys(obj).length); // 2
```
Map：
- Map 具有 size 属性，可以直接获取键值对的数量。
- Map 的键值对的存储是高度优化的，对于频繁的增删查操作性能更好。
```
const map = new Map([['a', 1], ['b', 2]]);
console.log(map.size); // 2
```

5. 原型链

Object：
- Object 是原型链的一部分，其上可能存在一些继承的方法或属性（如 toString、hasOwnProperty 等）。这些可能会影响 Object 的使用，尤其是在使用字符串作为键时。
Map：
- Map 没有原型链的干扰，只有用户添加的键值对。因此，不会有 Object 原型链上的属性冲突问题。

6. 可迭代性

Object：
- Object 不是天然可迭代的。可以使用 Object.keys()、Object.values()、Object.entries() 等方法来迭代键、值或键值对。
Map：
- Map 是天然可迭代的，可以直接使用 for...of 循环迭代键值对。也有 keys()、values()、entries() 方法。
```
const map = new Map([['a', 1], ['b', 2]]);
for (let [key, value] of map) {
  console.log(key, value);
}
```

选择使用 Map 还是 Object

使用 Object 作为键值对存储的场景通常是需要简单的字符串键值映射或需要对象原型链的功能时。
使用 Map 则更适合需要频繁增删改查操作的场景，特别是当键不确定为字符串时（如对象作为键），以及需要保障键值对的顺序时。