JavaScript中的new Map()

一、Map

Map是JavaScript中的一種可迭代的鍵值對容器，其中每個鍵和值可以是任何類型。在ES6中被提出，它可以用來存儲和操作鍵值對數據。

const myMap = new Map();
myMap.set("key1", "value1");
myMap.set("key2", "value2");
myMap.set("key3", "value3");

上面代碼創建了一個空的Map，然後使用set()方法添加了三個鍵值對。可以使用size屬性獲取其中的鍵值對數量。

console.log(myMap.size); // 3

二、Map的基本操作

1. set()

set()方法用於添加鍵值對到Map中。

myMap.set("key4", "value4");
console.log(myMap); // Map(4) {"key1" => "value1", "key2" => "value2", "key3" => "value3", "key4" => "value4"}

2. get()

get()方法用於獲取指定鍵的值。

console.log(myMap.get("key2")); // "value2"

3. has()

has()方法用於檢測Map中是否存在指定的鍵。

console.log(myMap.has("key5")); // false
console.log(myMap.has("key3")); // true

4. delete()

delete()方法用於刪除Map中指定的鍵值對。

myMap.delete("key4");
console.log(myMap); // Map(3) {"key1" => "value1", "key2" => "value2", "key3" => "value3"}

5. clear()

clear()方法用於清空Map中的所有鍵值對。

myMap.clear();
console.log(myMap.size); // 0

三、Map的循環迭代

通過Map的entries()、keys()和values()方法，可以分別獲取Map中所有鍵值對、所有鍵、所有值。

const myMap = new Map();
myMap.set("key1", "value1");
myMap.set("key2", "value2");
myMap.set("key3", "value3");

// 迭代所有鍵值對
for (let [key, value] of myMap.entries()) {
  console.log(`${key}: ${value}`);
}

// 迭代所有鍵
for (let key of myMap.keys()) {
  console.log(key);
}

// 迭代所有值
for (let value of myMap.values()) {
  console.log(value);
}

四、Map的應用

1. 緩存

Map可以用作緩存來提高代碼的性能，避免多次計算同一個值。

const cache = new Map();

function fibonacci(num) {
  if (cache.has(num)) {
    return cache.get(num);
  }
  if (num <= 1) {
    return 1;
  }
  const result = fibonacci(num - 1) + fibonacci(num - 2);
  cache.set(num, result);
  return result;
}

上面代碼是使用Map實現斐波那契數列函數節約計算次數的例子，可以看到，在每次調用函數時，先檢查Map中是否保存了該數字對應的斐波那契數值，如果有，則直接返回該值，否則計算並保存在Map中。

2. 構造函數初始值

可以使用Map作為構造函數的初始值，簡化代碼。

const myMap = new Map([
    ["key1", "value1"],
    ["key2", "value2"],
    ["key3", "value3"]
]);

上面代碼創建了一個含有三個鍵值對的Map，並將其作為構造函數的初始值。

3. 對象屬性映射

Map可以像對象一樣使用鍵值對存儲屬性和值，但鍵不僅限於字符串，可以是任何類型，也不限於使用點號。

const myObject = {};

myObject.prop1 = "value1";
myObject.prop2 = "value2";
myObject.prop3 = "value3";

console.log(myObject.prop1); // "value1"

const myMap = new Map();

myMap.set("prop1", "value1");
myMap.set("prop2", "value2");
myMap.set("prop3", "value3");

console.log(myMap.get("prop1")); // "value1"

上面代碼比較了使用對象屬性和Map的鍵值對分別存儲屬性和值的方式。

五、總結

JavaScript中的new Map()提供了一種可迭代的鍵值對容器，可以用來存儲和操作鍵值對數據。Map可以進行添加、查詢、檢測、刪除和清空操作，還可以循環迭代所有鍵值對、鍵和值等。Map可以應用於緩存、構造函數初始值、對象屬性映射等方面，使代碼更加簡潔、優雅和高效。