JavaScript 中的 Map 完全指南

引言

在 JavaScript 中，Map 是一種用于存儲(chǔ)鍵值對(duì)的數(shù)據(jù)結(jié)構(gòu)，具有靈活的鍵類型和豐富的方法。相較于傳統(tǒng)的對(duì)象（Object），Map 提供了更高效的鍵值對(duì)操作方式，特別適合處理大量數(shù)據(jù)和需要頻繁操作鍵值對(duì)的場(chǎng)景。本文將詳細(xì)介紹 Map 的創(chuàng)建、常用方法、迭代方式，并探討它與對(duì)象的區(qū)別和實(shí)際應(yīng)用場(chǎng)景。

1. 創(chuàng)建 Map

使用 new Map() 來(lái)創(chuàng)建一個(gè)空的 Map。

const map = new Map();

也可以在創(chuàng)建時(shí)初始化 Map，傳入一個(gè)包含鍵值對(duì)的數(shù)組：

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

2. Map 和對(duì)象的對(duì)比

在學(xué)習(xí) Map 的基本操作之前，我們先來(lái)看一下 Map 與傳統(tǒng)對(duì)象的區(qū)別。

通過(guò)對(duì)比可以看出，Map 在鍵的類型、插入順序的保持以及鍵值對(duì)操作的效率上，都有顯著的優(yōu)勢(shì)。

3. Map 的常用方法

3.1 set(key, value)

用于向 Map 添加一個(gè)鍵值對(duì)。如果鍵已經(jīng)存在，set 會(huì)更新其值。

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

3.2 get(key)

獲取指定鍵的值，如果鍵不存在，返回 undefined。

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

3.3 has(key)

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

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

3.4 delete(key)

刪除指定的鍵值對(duì)，返回 true 如果成功刪除，否則返回 false。

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

3.5 clear()

清空 Map，刪除所有鍵值對(duì)。

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

3.6 size

返回 Map 中鍵值對(duì)的數(shù)量。

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

4. Map 的迭代方法

Map 支持多種迭代方法，可以輕松遍歷其中的鍵值對(duì)。

4.1 forEach(callback)

遍歷 Map 中的每一個(gè)鍵值對(duì)，callback 函數(shù)接受三個(gè)參數(shù)：值、鍵、Map 本身。

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

4.2 keys()

返回 Map 中所有鍵的迭代器（Iterator），可以用 for...of 來(lái)遍歷。

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

4.3 values()

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

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

4.4 entries()

返回 Map 中所有鍵值對(duì)的迭代器，每個(gè)鍵值對(duì)會(huì)以 [key, value] 的形式返回。

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

4.5 使用 for...of 遍歷 Map

可以直接用 for...of 遍歷 Map，默認(rèn)會(huì)調(diào)用 entries() 方法，因此會(huì)返回 [key, value] 的數(shù)組。

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

5. Map 的應(yīng)用場(chǎng)景

Map 是一種適合存儲(chǔ)鍵值對(duì)的結(jié)構(gòu)，尤其適用于以下場(chǎng)景：

需要使用非字符串類型的鍵：對(duì)象的鍵只能是字符串或符號(hào)，而 Map 可以使用任意數(shù)據(jù)類型作為鍵，比如對(duì)象、函數(shù)等。

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

• 需要頻繁操作鍵值對(duì)：Map 在鍵值對(duì)的查找、插入、刪除操作上比對(duì)象性能更好，適合在頻繁操作鍵值對(duì)的場(chǎng)景下使用。
• 需要保持插入順序：Map 會(huì)按照插入的順序存儲(chǔ)鍵值對(duì)，因此在遍歷時(shí)順序是固定的，而對(duì)象則不保證插入順序。
• 避免原型鏈污染：對(duì)象的鍵可能會(huì)受 Object.prototype 影響，而 Map 沒(méi)有原型鏈污染問(wèn)題，可以安全地存儲(chǔ)任意鍵。

6. 使用 Map 統(tǒng)計(jì)字母出現(xiàn)的次數(shù)

我們可以通過(guò)一個(gè)例子來(lái)比較使用 Map 和不使用 Map 的差別。假設(shè)我們有一個(gè)字符串，需要統(tǒng)計(jì)其中每個(gè)字母出現(xiàn)的次數(shù)。Map 非常適合這種鍵值對(duì)存儲(chǔ)的場(chǎng)景。

方法 1：不用 Map，使用普通對(duì)象

function countLettersWithObject(str) {
  const letterCounts = {}; // 用對(duì)象存儲(chǔ)字母出現(xiàn)的次數(shù)
  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 存儲(chǔ)字母出現(xiàn)的次數(shù)
  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 }

7. WeakMap 簡(jiǎn)介

WeakMap 是 Map 的一種特殊類型，它的鍵必須是對(duì)象，且是弱引用（即不會(huì)阻止對(duì)象被垃圾回收）。如果某個(gè)對(duì)象在其他地方不再被引用，那么即使它是 WeakMap 的鍵，也會(huì)被垃圾回收，這樣可以防止內(nèi)存泄漏。

• WeakMap 的特點(diǎn) 只接受對(duì)象作為鍵，不支持基本類型。
• 鍵是弱引用，不會(huì)阻止垃圾回收。
• 沒(méi)有 size 屬性、clear 方法和遍歷方法（forEach、keys、values、entries），因此不能遍歷 WeakMap。

使用場(chǎng)景

WeakMap 通常用于私有屬性或私有數(shù)據(jù)的存儲(chǔ)，不希望這些數(shù)據(jù)影響垃圾回收。它適用于對(duì)象間的臨時(shí)映射關(guān)系，且在數(shù)據(jù)無(wú)需遍歷的情況下使用。

const weakMap = new WeakMap();
let obj = { id: 1 };
weakMap.set(obj, "some value");
console.log(weakMap.get(obj)); // 輸出 'some value'
obj = null; // 刪除對(duì)象的其他引用
// 在此之后，obj 被垃圾回收，WeakMap 中的鍵值對(duì)也會(huì)被清除

總結(jié)

Map 是一種強(qiáng)大的鍵值對(duì)數(shù)據(jù)結(jié)構(gòu)，具有靈活的鍵類型支持、保持插入順序、豐富的內(nèi)置方法等優(yōu)勢(shì)，適合存儲(chǔ)和操作大量鍵值對(duì)。而 WeakMap 則是一種針對(duì)對(duì)象鍵的弱引用 Map，在特定場(chǎng)景中幫助管理內(nèi)存。希望這些內(nèi)容能幫助你全面理解和應(yīng)用 Map！

到此這篇關(guān)于JavaScript 中的 Map使用指南的文章就介紹到這了,更多相關(guān)js map使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論