深入理解JavaScript：Object与Map的区别与共性解析

区别

1.键的类型

Object的键只能是字符串或Symbol：

const obj = {  
  '1': 'one',  
  2: 'two', // 实际上键会被转换为字符串 '2'  
  true: 'trueValue' // 实际上键会被转换为字符串 'true'  
};  
console.log(obj['1']); // 输出 'one'  
console.log(obj['2']); // 输出 'two'  
console.log(obj['true']); // 输出 'trueValue'

Map的键可以是任意类型：

const map = new Map();  
map.set(1, 'one');  
map.set(true, 'trueValue');  
map.set({ key: 'obj' }, 'objectValue');  
console.log(map.get(1)); // 输出 'one'  
console.log(map.get(true)); // 输出 'trueValue'  
console.log(map.get({ key: 'obj' })); // 输出 undefined，因为Map中的键是引用类型，需使用相同的引用

2. 键的唯一性

Object中，相同的键会覆盖：

const obj = {  
  key: 'value1',  
  key: 'value2' // 覆盖前面的值  
};  
console.log(obj.key); // 输出 'value2'

Map中，相同的键不会覆盖：

const map = new Map();  
map.set('key', 'value1');  
map.set('key', 'value2'); // 这里的'value1'不会被覆盖，因为Map会根据键存储多个值，但是只能获取到最后一个值  
console.log(map.get('key')); // 输出 'value2'

3. 迭代顺序

Object的键值对顺序是不确定的

const obj = {  
  b: 'two',  
  a: 'one',  
  c: 'three'  
};  
for (let key in obj) {  
  console.log(key, obj[key]); // 输出顺序可能不是 'b', 'a', 'c'  
}

Map的键值对顺序是确定的：

const map = new Map();  
map.set('b', 'two');  
map.set('a', 'one');  
map.set('c', 'three');  
for (let [key, value] of map) {  
  console.log(key, value); // 输出顺序总是 'b', 'a', 'c'  
}

4. 方法

Object的基本访问方法：

const obj = {  
  key: 'value'  
};  
console.log(obj.key); // 访问属性  
obj.key = 'newValue'; // 设置属性

Map的键值对操作方法：

const map = new Map();  
map.set('key', 'value'); // 设置键值对  
console.log(map.get('key')); // 访问值  
map.delete('key'); // 删除键值对  
map.clear(); // 清空Map

共性

1. 存储键值对：无论是Object还是Map，它们都是用于存储键值对的数据结构。
2. 访问方式：两者都可以通过键来访问对应的值。在Object中，我们使用obj[key]或obj.key来访问值；在Map中，我们使用map.get(key)来访问值。

总的来说，Object和Map各有其特点和优势，选择使用哪一种主要取决于具体的需求和场景。