深入理解 JavaScript 的 Map 數據結構

一、Map 數據結構是什麼？

在 ES6 之前，JavaScript 中內置的 key-value 序列結構只有 Object 或 Array。ES6 引入了新的數據結構 Map，它本質上是一組鍵值對的集合，允許你以任意類型的值作為鍵（Object 只支持字元串作為鍵），它的優點在於可以判斷鍵值對的數量和迭代的順序，更加靈活簡潔。

讓我們看一下 Map 的基礎語法：

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

在上面的代碼中，我們使用了 Map 構造函數創建了一個名為 map 的 Map 對象。構造函數接受一個數組作為參數，數組的元素是表示鍵值對的數組。以上面的數組為例，我們創建了三個鍵值對，其中鍵為字元串 key1，key2，key3，相應的值為字元串 value1，value2，value3。

二、Map 的應用場景有哪些？

Map 這個數據結構非常適合存儲多個屬性並且需要更好的性能解決方案的應用場景。下面列舉了幾個常用的應用場景：

1. 緩存

Map 對象的高效存取和添加、刪除操作，使得它非常適合作為緩存的數據結構。由於它可以自動刪除過期的鍵值對，避免了手動清除緩存的麻煩。下面是一個簡單的例子：

// 創建一個緩存對象，存儲最多 100 個鍵值對
const cache = new Map();
const MAX_CACHE_SIZE = 100;

function addToCache(key, value) {
  // 如果已經達到了最大值，刪除最早添加的鍵值對
  if(cache.size > MAX_CACHE_SIZE) {
    const firstKey = cache.keys().next().value; // 獲取第一個鍵名
    cache.delete(firstKey);
  }

  // 如果該鍵不存在，則添加它
  if(!cache.has(key)) {
    cache.set(key, value);
  }
}

2. 遍歷和搜索

由於 Map 對象可以保留元素插入的順序，因此更容易進行遍歷操作。可以通過 forEach() 方法遍歷整個 Map，也可以使用迭代器方法如 keys()、values()、entries() 等來完成遍歷。

下面的代碼演示了如何通過遍歷搜索指定的鍵值對：

const people = new Map([
  ['Alice', 25],
  ['Bob', 30],
  ['Charlie', 45],
  ['Dan', 15]
]);

function searchPeople(name) {
  if(people.has(name)) {
    const age = people.get(name);
    console.log(name + ' is ' + age + ' years old.');
  } else {
    console.log('Sorry, ' + name + ' is not found.');
  }
}
searchPeople('Bob');

3. 數據統計和分組

Map 可以通過自定義 key 來達到對數組、對象集合的統計和分組。

下面的代碼演示了如何使用 map 對象對元素按照索引值分組：

const grades = [90, 88, 72, 99, 94, 78, 80, 65, 53, 73];
const exam1 = new Map();
const exam2 = new Map();

// 根據是否超過 80 分來統計
for(let i = 0; i = 80) {
    exam1.set(i, grades[i]);
  } else {
    exam2.set(i, grades[i]);
  }
}
console.log('Exam 1: ' + [...exam1.values()]);
console.log('Exam 2: ' + [...exam2.values()]);

三、Map 的常用方法和屬性

1. Map.prototype.set()

向 Map 對象設置新的鍵值對，並返回新的 Map 對象，允許鏈式操作。

const map = new Map();
map.set('key1', 'value1').set('key2', 'value2');

2. Map.prototype.get()

根據鍵名獲取 Map 對象中對應的值。

const map = new Map();
map.set('key1', 'value1');
console.log(map.get('key1')); // output: value1

3. Map.prototype.has()

判斷 Map 對象中是否存在指定的鍵。

const map = new Map();
map.set('key1', 'value1');
console.log(map.has('key1')); // output: true

4. Map.prototype.delete()

刪除 Map 對象中指定的鍵值對，並返回布爾值表示是否刪除成功。

const map = new Map();
map.set('key1', 'value1');
map.delete('key1');
console.log(map.has('key1')); // output: false

5. Map.prototype.clear()

刪除 Map 對象中的所有鍵值對。

const map = new Map();
map.set('key1', 'value1');
map.clear();
console.log(map.has('key1')); // output: false

6. Map.prototype.size

獲取 Map 對象中鍵值對的數量。

const map = new Map();
map.set('key1', 'value1');
console.log(map.size); // output: 1

四、總結

在 JavaScript 中，Map 是一種非常有用的數據結構。在處理多個屬性和值的情況下，Map 對象具有更好的性能和更靈活的特性。通過本文，我們學習了 Map 的語法和常用方法，同時介紹了它的常見應用場景。在實際編程中，可以根據需要靈活使用 Map，以提高程序的效率和可讀性。