JavaScript Map用法詳解

一、Map簡介

Map是JavaScript中ES6新增的一種數據結構，用於存儲鍵值對的集合。與Object類似，但是Map提供了更為靈活與強大的數據結構。

二、Map的基礎用法

1. 創建Map實例

const map = new Map();

2. 添加鍵值對

map.set('name', 'Alice');
map.set('age', 28);

3. 獲取鍵值對

map.get('name'); // 'Alice'

4. 檢查鍵是否存在

map.has('name'); // true

5. 獲取鍵值對數量

map.size; // 2

三、Map的高級用法

1. 可以使用任何類型作為鍵

除了undefined，可以使用任何類型的值作為鍵：

const map2 = new Map();
const key1 = {};
const key2 = {};
map2.set(key1, 'value1');
map2.set(key2, 'value2');
map2.get(key1); // 'value1'

這是Object無法做到的。

2. 鏈式調用

Map的set方法返回Map實例本身，因此可以使用鏈式調用：

map.set('name', 'Bob')
   .set('age', 30);

3. 可以使用迭代器遍歷Map

可以使用for…of語句遍歷Map，或者使用forEach()方法遍歷鍵值對：

for (const [key, value] of map) {
  console.log(key, value);
}
map.forEach((value, key) => {
  console.log(key, value);
});

4. 可以使用數組初始化Map

可以使用數組創建Map對象。數組的每一項應為一個鍵值對的數組：

const arr = [['name', 'Charlie'], ['age', 32]];
const map3 = new Map(arr);

5. 可以使用spread運算符初始化Map

可以使用spread運算符將一個Map轉化為數組，或者將一個數組轉化為Map：

// Map轉化為數組
const map4 = new Map([['name', 'David'], ['age', 22]]);
const arr2 = [...map4];

// 數組轉化為Map
const arr3 = [['name', 'Emma'], ['age', 25]];
const map5 = new Map(arr3);

四、Map的應用場景

由於Map可以使用任何類型作為鍵，因此在處理一些特殊的數據結構且需要設置其他類型的鍵時，Map更加方便。以下是一些Map常見的使用場景：

1. 存儲函數的參數和返回值

const memoize = (fn) => {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      console.log('Cache hit!');
      return cache.get(key);
    }
    console.log('Cache miss!');
    const result = fn(...args);
    cache.set(key, result);
    return result;
  }
};

const fibonacci = memoize((n) => {
  if (n < 2) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
});

fibonacci(10); // 第一次計算，輸出Cache miss!，計算結果為55
fibonacci(10); // 第二次計算，輸出Cache hit!，返回緩存中的結果55

2. 存儲DOM元素的數據

當需要在DOM元素上存儲數據時，使用Map比在元素上設置屬性更安全。因為在某些情況下，屬性的名字可能會被覆蓋，而Map不會出現這個問題。

const map6 = new Map();
const button = document.querySelector('button');
map6.set(button, { count: 0 });

button.addEventListener('click', () => {
  const data = map6.get(button);
  data.count += 1;
  console.log(`Button clicked ${data.count} times!`);
});

3. 存儲異步操作的狀態

Map可以容易存儲異步操作的狀態，並且保持鍵值對的順序不變。以下是一個Map存儲Promise對象的例子：

const map7 = new Map();
const p1 = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Promise 1 resolved!');
  }, 1000);
});
const p2 = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Promise 2 resolved!');
  }, 2000);
});

map7.set(p1, 1);
map7.set(p2, 2);

Promise.all([p1, p2]).then((values) => {
  values.forEach((value) => {
    console.log(map7.get(value));
  });
});

// 輸出為
// 1
// 2

五、總結

通過本篇文章，我們介紹了JavaScript中Map的基礎用法和高級用法，學習了Map與Object的區別和應用場景。在日常的開發中，我們可以根據具體情況選擇使用Map或者Object，以提高代碼的效率和可讀性。