本文旨在揭示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，实际：0console.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，实际：2console.log('using []', mp2[1]); // 预期：undefined，实际：undefinedconsole.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免费学习笔记（深入）”；
2using [] undefinedusing 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 的强大功能，避免常见的陷阱，并编写出更健壮、更可预测的代码。
以上就是深入理解JavaScript Map：告别方括号陷阱，掌握键值对的正确操作姿势的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540653.html
微信扫一扫 
支付宝扫一扫 
