【前端】掌握 JavaScript Map：从入门到精通

💥 欢迎来到我的博客！很高兴能在这里与您相遇！

• 首页：GPT-千鑫 – 热爱AI、热爱Python的天选打工人，活到老学到老！！！
• 导航
  - 人工智能系列：包含 OpenAI API Key教程, 50个Prompt指令, Midjourney生成攻略等更多教程…
  - 常用开发工具：包含 AI代码补全工具, Vscode-AI工具, IDER or Pycharm-AI工具, 获取OpenAIAPIKey的多种方式
  等更多教程…
  - VScode-AI插件：集成13种AI大模型（GPT4、o1等）、支持Open API调用、自定义助手、文件上传等 >>> - CodeMoss & ChatGPT-AI中文版

💥 期待与您一起探索AI、共同成长。✨ 立即订阅本专栏，加入我们的旅程，共同发现更多精彩！🌟

什么是 Map？

在 JavaScript 中，Map 是一种用于存储键值对的数据结构。与传统的对象（Object）相比，Map 提供了更高效的键值对操作方式，特别适合处理大量数据和需要频繁操作键值对的场景。Map 的键可以是任何类型，包括对象、函数等，这为开发者提供了极大的灵活性。

为什么选择 Map 而不是 Object？

你可能会问，既然对象也能存储键值对，为什么还需要 Map 呢？其实，Map 在多个方面优于对象：

1. 键的类型更灵活：对象的键只能是字符串或符号，而 Map 的键可以是任意类型。
2. 保持插入顺序：Map 会按照插入的顺序存储键值对，便于遍历。
3. 性能更优：在频繁操作键值对的情况下，Map 的性能表现更佳。
4. 避免原型链污染：对象可能会因为继承自 Object.prototype 而带来意想不到的问题，Map 则完全避免了这一点。

这些优势使得 Map 成为处理复杂数据结构的理想选择。

如何创建一个 Map？

创建一个空的 Map 非常简单，只需使用 new Map()：

const map = new Map();

你也可以在创建时初始化 Map，传入一个包含键值对的数组：

const map = new Map([
  ["name", "Alice"],
  ["age", 25]
]);
console.log(map); // 输出 Map(2) { 'name' => 'Alice', 'age' => 25 }

这种初始化方式在处理预先存在的数据时尤为方便。

Map 和 Object 的详细对比

通过这个对比，我们可以清晰地看到，Map 在键类型的灵活性、插入顺序的保持以及操作效率上都具备显著优势。

Map 的常用方法 🌟

1. set(key, value)

用于向 Map 添加一个键值对。如果键已经存在，set 会更新其值。

map.set("name", "Bob");
map.set("age", 30);
console.log(map); // 输出 Map(2) { 'name' => 'Bob', 'age' => 30 }

2. get(key)

获取指定键的值，如果键不存在，返回 undefined。

console.log(map.get("name")); // 输出 'Bob'
console.log(map.get("gender")); // 输出 undefined

3. has(key)

检查 Map 中是否存在指定的键，返回 true 或 false。

console.log(map.has("name")); // 输出 true
console.log(map.has("gender")); // 输出 false

4. delete(key)

删除指定的键值对，返回 true 如果成功删除，否则返回 false。

map.delete("age");
console.log(map); // 输出 Map(1) { 'name' => 'Bob' }

5. clear()

清空 Map，删除所有键值对。

map.clear();
console.log(map); // 输出 Map(0) {}

6. size

返回 Map 中键值对的数量。

map.set("name", "Alice");
map.set("age", 25);
console.log(map.size); // 输出 2

Map 的迭代方法 🔄

Map 支持多种迭代方法，可以轻松遍历其中的键值对。

1. forEach(callback)

遍历 Map 中的每一个键值对，callback 函数接受三个参数：值、键、Map 本身。

map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// 输出:
// name: Alice
// age: 25

2. keys()

返回 Map 中所有键的迭代器（Iterator），可以用 for...of 来遍历。

for (let key of map.keys()) {
  console.log(key);
}
// 输出:
// name
// age

3. values()

返回 Map 中所有值的迭代器（Iterator）。

for (let value of map.values()) {
  console.log(value);
}
// 输出:
// Alice
// 25

4. entries()

返回 Map 中所有键值对的迭代器，每个键值对会以 [key, value] 的形式返回。

for (let entry of map.entries()) {
  console.log(entry);
}
// 输出:
// [ 'name', 'Alice' ]
// [ 'age', 25 ]

5. 使用 for...of 遍历 Map

可以直接用 for...of 遍历 Map，默认会调用 entries() 方法，因此会返回 [key, value] 的数组。

for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}
// 输出:
// name: Alice
// age: 25

这种遍历方式简洁且直观，非常适合日常使用。

Map 的实际应用场景 💼

Map 是一种适合存储键值对的结构，尤其在以下场景中表现出色：

1. 使用非字符串类型的键

对象的键只能是字符串或符号，而 Map 可以使用任意数据类型作为键，比如对象、函数等。

const objKey = { id: 1 };
const map = new Map();
map.set(objKey, "Object as key");
console.log(map.get(objKey)); // 输出 'Object as key'

这种特性在需要使用复杂数据类型作为键时尤为重要。

2. 频繁操作键值对

Map 在键值对的查找、插入、删除操作上比对象性能更好，适合在频繁操作键值对的场景下使用。

3. 保持插入顺序

Map 会按照插入的顺序存储键值对，因此在遍历时顺序是固定的，而对象则不保证插入顺序。

4. 避免原型链污染

对象的键可能会受 Object.prototype 影响，而 Map 没有原型链污染问题，可以安全地存储任意键。

使用 Map 统计字母出现的次数 📊

通过一个具体的例子，我们来比较使用 Map 和不使用 Map 的差别。假设我们有一个字符串，需要统计其中每个字母出现的次数。Map 非常适合这种键值对存储的场景。

方法 1：使用普通对象

function countLettersWithObject(str) {
  const letterCounts = {}; // 用对象存储字母出现的次数

  for (let letter of str) {
    if (letterCounts[letter]) {
      letterCounts[letter]++;
    } else {
      letterCounts[letter] = 1;
    }
  }

  return letterCounts;
}

const result = countLettersWithObject("hello world");
console.log(result); // 输出: { h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1 }

方法 2：使用 Map

function countLettersWithMap(str) {
  const letterCounts = new Map(); // 用 Map 存储字母出现的次数

  for (let letter of str) {
    if (letterCounts.has(letter)) {
      letterCounts.set(letter, letterCounts.get(letter) + 1);
    } else {
      letterCounts.set(letter, 1);
    }
  }

  return letterCounts;
}

const resultMap = countLettersWithMap("hello world");
console.log(resultMap); // 输出: Map(7) { 'h' => 1, 'e' => 1, 'l' => 3, 'o' => 2, 'w' => 1, 'r' => 1, 'd' => 1 }

从性能和可读性上看，Map 提供了更清晰的语法和更高效的操作，尤其在处理大量数据时优势明显。

深入了解 WeakMap 🕸️

WeakMap 是 Map 的一种特殊类型，它的键必须是对象，且是弱引用（即不会阻止对象被垃圾回收）。如果某个对象在其他地方不再被引用，那么即使它是 WeakMap 的键，也会被垃圾回收，这样可以防止内存泄漏。

WeakMap 的特点

• 只接受对象作为键：不支持基本类型。
• 键是弱引用：不会阻止垃圾回收。
• 没有 size 属性、clear 方法和遍历方法：如 forEach、keys、values、entries，因此不能遍历 WeakMap。

使用场景

WeakMap 通常用于私有属性或私有数据的存储，不希望这些数据影响垃圾回收。它适用于对象间的临时映射关系，且在数据无需遍历的情况下使用。

const weakMap = new WeakMap();
let obj = { id: 1 };

weakMap.set(obj, "some value");
console.log(weakMap.get(obj)); // 输出 'some value'

obj = null; // 删除对象的其他引用
// 在此之后，obj 被垃圾回收，WeakMap 中的键值对也会被清除

这种特性在处理需要动态绑定数据但又不希望影响内存管理的场景中非常有用。

总结 ✨

Map 是一种强大的键值对数据结构，具有灵活的键类型支持、保持插入顺序、丰富的内置方法等优势，适合存储和操作大量键值对。而 WeakMap 则是一种针对对象键的弱引用 Map，在特定场景中帮助管理内存。通过本文的详细介绍，相信你已经对 Map 有了全面的理解和掌握。

相关文章

【OpenAI】（一）获取OpenAI API Key的多种方式全攻略：从入门到精通，再到详解教程！！

【VScode】（二）VSCode中的智能AI-GPT编程利器，全面揭秘CodeMoss & ChatGPT中文版

【CodeMoss】（三）集成13种AI大模型（GPT4、o1等）、支持Open API调用、自定义助手、文件上传等强大功能，助您提升工作效率！ >>> - CodeMoss & ChatGPT-AI中文版