Map 和 Object 的区别是什么？

推荐答案

Map 和 Object 是 JavaScript 中用于存储键值对的两种数据结构，但它们在使用场景和特性上有显著的区别。以下是它们的主要区别：

1. 键的类型：

   • Map：键可以是任意类型的值，包括对象、函数、基本类型等。
   • Object：键只能是字符串或 Symbol 类型。

2. 键值对的顺序：

   • Map：键值对的顺序是插入顺序，迭代时会按照插入顺序返回键值对。
   • Object：键值对的顺序在 ES6 之前是不确定的，ES6 之后虽然有一定的顺序规则，但不如 Map 明确。

3. 大小：

   • Map：可以通过 size 属性直接获取键值对的数量。
   • Object：需要手动计算键值对的数量。

4. 性能：

   • Map：在频繁增删键值对的场景下性能更好。
   • Object：在查找和访问属性时性能较好。

5. 默认行为：

   • Map：没有默认的原型链，不会继承任何属性或方法。
   • Object：有原型链，可能会继承一些默认的属性和方法。

6. 序列化：

   • Map：不能直接使用 JSON.stringify 进行序列化。
   • Object：可以直接使用 JSON.stringify 进行序列化。

本题详细解读

键的类型

Map 的键可以是任意类型的值，包括对象、函数、基本类型等。这使得 Map 在处理复杂数据结构时更加灵活。例如：

// www.javascriptcn.com code example
const map = new Map();
const keyObj = {};
const keyFunc = function() {};

map.set(keyObj, 'value associated with object');
map.set(keyFunc, 'value associated with function');
map.set(1, 'value associated with number');

console.log(map.get(keyObj)); // 'value associated with object'
console.log(map.get(keyFunc)); // 'value associated with function'
console.log(map.get(1)); // 'value associated with number'

而 Object 的键只能是字符串或 Symbol 类型。如果使用非字符串或 Symbol 类型的值作为键，JavaScript 会将其转换为字符串：

// www.javascriptcn.com code example
const obj = {};
const keyObj = {};
const keyFunc = function() {};

obj[keyObj] = 'value associated with object';
obj[keyFunc] = 'value associated with function';
obj[1] = 'value associated with number';

console.log(obj[keyObj]); // 'value associated with object'
console.log(obj[keyFunc]); // 'value associated with function'
console.log(obj[1]); // 'value associated with number'
console.log(obj['[object Object]']); // 'value associated with object'
console.log(obj['function() {}']); // 'value associated with function'
console.log(obj['1']); // 'value associated with number'

键值对的顺序

Map 的键值对顺序是插入顺序，迭代时会按照插入顺序返回键值对。例如：

const map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);

for (const [key, value] of map) {
  console.log(key, value); // 'a' 1, 'b' 2, 'c' 3
}

Object 的键值对顺序在 ES6 之前是不确定的，ES6 之后虽然有一定的顺序规则（如整数键按升序排列，字符串键按插入顺序排列），但不如 Map 明确。

大小

Map 可以通过 size 属性直接获取键值对的数量：

const map = new Map();
map.set('a', 1);
map.set('b', 2);

console.log(map.size); // 2

而 Object 需要手动计算键值对的数量：

const obj = { a: 1, b: 2 };
console.log(Object.keys(obj).length); // 2

性能

在频繁增删键值对的场景下，Map 的性能更好。因为 Map 是为这种场景设计的，而 Object 的增删操作可能会触发一些额外的操作（如原型链查找）。

默认行为

Map 没有默认的原型链，不会继承任何属性或方法。这使得 Map 更加纯粹，不会受到原型链上的属性或方法的影响。

Object 有原型链，可能会继承一些默认的属性和方法。例如：

const obj = {};
console.log(obj.toString); // [Function: toString]

序列化

Map 不能直接使用 JSON.stringify 进行序列化，因为 JSON 格式不支持 Map 数据结构。如果需要序列化 Map，可以将其转换为数组或其他支持的数据结构。

Object 可以直接使用 JSON.stringify 进行序列化：

const obj = { a: 1, b: 2 };
console.log(JSON.stringify(obj)); // '{"a":1,"b":2}'

综上所述，Map 和 Object 各有其适用的场景，开发者应根据具体需求选择合适的数据结构。