本文旨在揭示javascript `map`对象在使用过程中常见的误区，特别是关于方括号`[]`与`set()`/`get()`方法的混淆。我们将详细解释为何使用`[]`操作`map`会导致`size`不准确及数据访问异常，并强调必须通过`set()`、`get()`等专用方法才能正确管理`map`的键值对，从而避免意外行为，确保数据结构的一致性和可预测性。
JavaScript Map 简介
JavaScript 中的 Map 对象是一种存储键值对的集合，它与普通对象（Object）的主要区别在于：Map 的键可以是任意数据类型（包括对象和原始值），而普通对象的键只能是字符串或 Symbol。Map 提供了 set()、get()、has()、delete() 和 size 等方法来管理其内部的键值对，这使得它在需要灵活键类型或保持插入顺序的场景下非常有用。
方括号陷阱：[] 与 Map 的误用
许多开发者在使用 Map 时，可能会不自觉地沿用普通对象的属性访问方式，即使用方括号 [] 来设置或获取值。然而，这种做法会导致 Map 行为异常，与预期不符。
考虑以下代码示例，它展示了当尝试用方括号操作 Map 时可能出现的困惑：
var mp1 = new Map();
mp1[1] = 'apple'; // 误区：尝试用方括号设置值
mp1[2] = 'bat'; // 误区：尝试用方括号设置值
console.log(mp1.size); // 预期：2，实际：0
console.log(mp1.set(1, 'test')); // 正确设置键值对，并返回 Map 实例
console.log('using get', mp1.get(1)); // 预期：'test'，实际：'test'
console.log('using[]', mp1[1]); // 预期：'test' (如果误解)，实际：'apple'
console.log('------------');上述代码的输出如下：
立即学习“Java免费学习笔记（深入）”；
0 [object Map] using get "test" using[] "apple" ------------
从输出可以看出，尽管我们通过 mp1[1] = 'apple' 和 mp1[2] = 'bat' 似乎设置了值，但 mp1.size 却显示为 0。这表明 Map 对象并没有将这些操作视为其内部键值对的添加。随后，当使用 mp1.set(1, 'test') 正确设置值后，mp1.get(1) 能够正确获取到 'test'。然而，mp1[1] 却依然返回了之前用方括号设置的 'apple'。
原因解析：
当您对 Map 实例使用方括号 mp1[key] = value 时，JavaScript 并不会将其识别为 Map 内部键值对的操作。相反，这等同于为 mp1 这个 Map 对象本身添加了一个新的属性。Map 对象本质上也是一个 JavaScript 对象，因此它能够拥有自定义属性。这些通过方括号添加的属性与 Map 内部存储的键值对是完全独立的。
- mp1.size 只计算通过 set() 方法添加到 Map 内部的键值对数量。
- mp1.get(key) 只从 Map 内部的键值对中查找值。
- mp1[key] 访问的是 Map 对象自身的属性，而不是其内部的键值对。
这就是为什么 mp1.size 为 0，mp1.get(1) 返回 'test' (因为 set() 正确添加了)，而 mp1[1] 返回 'apple' (因为它是对象的一个独立属性)。
正确操作 Map 的姿势
要正确地与 Map 对象交互，必须使用其提供的专用方法。这些方法是 Map 规范的一部分，确保了其行为的正确性和可预测性。
var mp2 = new Map();
mp2.set(1, 'match'); // 正确：使用 set() 方法添加键值对
mp2.set(2, 'testing'); // 正确：使用 set() 方法添加键值对
console.log(mp2.size); // 预期：2，实际：2
console.log('using []', mp2[1]); // 预期：undefined，实际：undefined
console.log('using get', mp2.get(1)); // 预期：'match'，实际：'match'
// 如果确实需要通过索引访问 Map 的元素，可以先将其转换为数组
const arr = [...mp2]; // 将 Map 转换为一个由 [key, value] 对组成的数组
console.log("Using array notation on spread Map", arr[0][1]); // 访问第一个元素的第二个值 ('match')上述代码的输出如下：
立即学习“Java免费学习笔记（深入）”；
2 using [] undefined using get "match" Using array notation on spread Map match
在这个例子中，我们始终使用 mp2.set() 方法来添加键值对。因此：
- mp2.size 正确地显示为 2，因为它反映了通过 set() 添加的两个键值对。
- mp2.get(1) 成功获取到 'match'，这是通过 set() 方法存储的值。
- mp2[1] 返回 undefined，因为我们没有给 mp2 对象添加名为 1 的属性，且 Map 内部的键值对不能通过方括号直接访问。
- 为了通过类似数组索引的方式访问 Map 中的数据，可以先使用扩展运算符 ... 将 Map 转换为一个数组，其中每个元素都是一个 [key, value] 数组。
总结与最佳实践
理解 Map 对象与普通 JavaScript 对象的区别至关重要。Map 提供了一套专门的方法来管理其键值对，这些方法确保了数据的一致性和 Map 行为的正确性。
关键点：
- 始终使用 set() 添加/更新键值对： map.set(key, value) 是向 Map 添加或更新键值对的唯一正确方式。
- 始终使用 get() 获取值： map.get(key) 是从 Map 获取值的唯一正确方式。
- 使用 size 获取键值对数量： map.size 反映的是通过 set() 添加的键值对数量。
- 避免直接使用 [] 操作 Map： 除非您有意为 Map 对象本身添加一个属性（这通常不是您想要对 Map 内部数据进行的操作），否则请避免使用方括号。
何时考虑使用 Map 而非普通对象？
- 当键不是字符串或 Symbol 时（例如，使用对象作为键）。
- 当需要保持键值对的插入顺序时。
- 当需要频繁添加或删除键值对时，Map 在某些场景下性能更优。
- 当需要准确获取键值对数量时 (Map.size 比 Object.keys().length 更直接)。
通过遵循这些最佳实践，您可以有效地利用 JavaScript Map 的强大功能，避免常见的陷阱，并编写出更健壮、更可预测的代码。
