JavaScript 是一种动态、弱类型语言，自带一些内置数据结构，包括数组、对象、字符串等。JavaScript 对象是其中最常用的一种数据结构，它是一种无序的键值对集合。ES6 新增加了 Map 数据结构，它也是一种无序的键值对集合，但与 JavaScript 对象不同，它的键可以是任意类型的值。
本文将详细介绍 ES6 的 Map 数据结构与 JavaScript 对象的区别，并讨论它们的用途、优缺点及使用时应该注意的事项。
1. Map 数据结构和 JavaScript 对象
1.1 Map 数据结构
Map 数据结构是一种无序的键值对集合。与 JavaScript 对象不同，在 Map 中可以用任意类型的值作为键。
1.1.1 创建 Map
使用构造函数 Map() 可以创建空 Map，也可以使用一个数组作为参数来创建初始键值对：
const map1 = new Map(); const map2 = new Map([ ['key1', 'value1'], ['key2', 'value2'] ]);
1.1.2 向 Map 中添加键值对
使用 set() 方法可以向 Map 中添加键值对：
map1.set(key1, value1); map1.set(key2, value2);
1.1.3 从 Map 中获取值
使用 get() 方法可以从 Map 中根据键获取相应的值：
map1.get(key1); // 返回 value1 map1.get(key2); // 返回 value2
1.2 JavaScript 对象
JavaScript 对象是一种无序的键值对集合，可以用任意字符串或符号作为键名。
1.2.1 创建对象
使用字面量创建对象：
const obj1 = {};
const obj2 = {
key1: 'value1',
key2: 'value2'
};1.2.2 向对象中添加键值对
使用点语法或者方括号语法添加键值对：
obj1.key1 = 'value1'; obj1.key2 = 'value2'; obj2['key1'] = 'value1'; obj2['key2'] = 'value2';
1.2.3 从对象中获取值
使用点语法或者方括号语法从对象中获取值：
obj1.key1; // 返回 value1 obj1.key2; // 返回 value2 obj2['key1']; // 返回 value1 obj2['key2']; // 返回 value2
2. Map 与对象的区别
2.1 键的类型
Map 中的键可以是任意类型的值，包括基本数据类型和引用数据类型，而 JavaScript 对象中的键只能是字符串或符号。
-- -------------------- ---- ------- ----- --- - --- ------ ---------- ---------- ------------- ---------- ------------- --------- ---------- ----- --- - - ------- --------- ----------------- --------- ----- ------------------- -------- --
2.2 键值对的顺序
Map 中的键值对是按照添加的顺序排列的，而 JavaScript 对象的键值对是无序的。
-- -------------------- ---- ------- ----- --- - --- ------ --------------- ---------- --------------- ---------- --------------- ---------- ----- --- - - ----- --------- ----- --------- ----- -------- --
2.3 键值对数量
Map 实例有一个 size 属性，可以获取其键值对数量，而 JavaScript 对象没有这个属性。
-- -------------------- ---- ------- ----- --- - --- ------ --------------- ---------- --------------- ---------- --------------- ---------- --------- -- -- - ----- --- - - ----- --------- ----- --------- ----- -------- -- ------------------------ -- -- -
2.4 使用 for...of 遍历
Map 有 entries() 方法返回一个包含其所有键值对的迭代器对象，使用 for...of 遍历 Map 时，可以直接获取到键值对：
const map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');
map.set('key3', 'value3');
for (let [key, value] of map.entries()) {
console.log(key, value);
}JavaScript 对象没有类似的方法，需要先使用 Object.entries() 方法将其转换为一个包含键值对的数组，然后再通过 for...of 遍历：
-- -------------------- ---- ------- ----- --- - - ----- --------- ----- --------- ----- -------- -- --- ---- ----- ------ -- -------------------- - ---------------- ------- -
3. 使用 Map 和对象的场景
3.1 Map 的优势
- Map 的键可以是任意类型的值，包括基本数据类型和引用数据类型，比起 JavaScript 对象更加灵活。
- Map 中的键值对是按照添加的顺序排列的，非常适合需要维护键值对顺序的场景。
- Map 有一个 size 属性，可以获取其键值对数量，非常适合需要统计数量的场景。
- Map 可以使用
for...of遍历，非常便于遍历所有键值对。
3.2 JavaScript 对象的优势
- JavaScript 对象是一种常用的数据结构，非常适合存储各种类型数据。
- JavaScript 对象的操作比较简单，可以使用点语法和方括号语法进行添加、删除、修改操作。
3.3 使用 Map 和对象的注意事项
- 如果需要维护键值对的顺序，或者需要记录数量，应该使用 Map。
- 如果需要存储各种类型的数据，或者需要频繁添加、删除、修改操作，应该使用 JavaScript 对象。
- 如果需要对 Map 或 JavaScript 对象进行快速的键值对查找或删除操作，可以使用 WeakMap 或 WeakSet 数据结构。
4. 总结
本文介绍了 ES6 的 Map 数据结构和 JavaScript 对象的区别，包括键的类型、键值对的顺序、键值对数量、使用 for...of 遍历等方面。建议在使用时根据场景选择合适的数据结构，以便实现更加灵活和高效的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fe66d095b1f8cacdd2f552