JavaScript中Object与Map的区别

在 JavaScript 中，Object 和 Map 都是用来存储键值对的数据结构，但它们之间存在一些重要的区别。本文将介绍一下这两种数据结构的不同之处。

1.创建方式的区别

在JS中最常见的创建Object的方式是通过字面量方式创建。

    const literal_obj = { 
        a: 1, 
        b: 2
    };

Map 则是通过构造函数的方式创建。

    const new_map = new Map()

当然Object也可以通过构造函数的方式创建。

    const new_obj = new Object()

2. 键的类型

Object

• 对象的键只能是字符串或符号类型。
• 如果键不是字符串，它会被隐式转换成字符串形式。

const obj = { 1: 'one', '1': 'oneStr' };
console.log(obj[1]);  // 输出 'oneStr'，因为 '1' 被隐式转换成了字符串

Map

• Map 的键可以是任意类型的值，包括对象、函数等。
• 不会进行隐式的类型转换。

const map = new Map();
map.set(1, 'one');
map.set('1', 'oneStr');
console.log(map.get(1));  // 输出 'one'
console.log(map.get('1'));  // 输出 'oneStr'

3. 遍历顺序

Object

• 对象的键按照插入顺序没有保证，JavaScript 引擎可能会改变键的顺序。ES6 后引入了 for...in 循环和 Object.keys() 方法来遍历对象的键，但它们并不保证顺序。
• 对于数组索引的属性，ES5 引入了 Object.getOwnPropertyNames() 方法，它可以按照索引顺序返回数组索引。

const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(key);
}
// 输出可能是 'a', 'b', 'c'，也可能不同，取决于引擎实现

Map

• Map 保证了键值对的插入顺序，这意味着你可以按照插入的顺序来遍历 Map。

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

4. 大小和迭代

Object

• 对象的大小通常需要通过遍历来确定。
• 使用 Object.keys(), Object.values(), Object.entries() 方法来迭代对象。

Map

• Map 提供了 .size 属性来获取键值对的数量。
• 使用 Map 的 .keys(), .values(), .entries() 方法来迭代 Map。

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);
console.log(map.size);  // 输出 3
for (let key of map.keys()) {
  console.log(key);
}
// 输出 'a', 'b', 'c'

5. 性能

• 在某些情况下，Map 的性能优于对象，尤其是在键不是简单字符串的情况下。
• 对象在处理简单字符串键时通常表现良好。

6. 易用性和 API

• Map 提供了更多的方法，如 .set(), .get(), .delete(), .clear() 等，使得操作更加直观。
• 对象的操作通常需要使用 [] 访问符和 hasOwnProperty() 方法等。

7. 总结

• 当你需要使用非字符串类型的键时，或者当键值对的顺序很重要时，推荐使用 Map。
• 对于简单的键值存储场景，对象仍然是一个很好的选择，尤其是当键都是字符串时。
• 根据你的具体需求选择最适合的数据结构，以达到更好的代码可读性和性能。