快捷導(dǎo)航

JavaScript?數(shù)據(jù)類型Map的用法詳解

更新時間：2025年10月29日 17:23:19 作者：1加1等于

本文通過實例代碼給大家介紹JavaScript數(shù)據(jù)類型Map的用法,本文結(jié)合實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

1. 基本用法

// 創(chuàng)建空Map
const map = new Map();
// 創(chuàng)建帶初始值的Map
const userMap = new Map([
  ['name', 'name'],
  [42, 'Answer'],
  [Symbol('id'), 123]
]);
// 添加鍵值對
map.set('key1', 'value1');
map.set({ objKey: 1 }, 'object value'); // 鍵可以是對象
// 獲取值
console.log(userMap.get('name')); // 'name'
console.log(map.get({ objKey: 1 })); // undefined（引用不同）
// 檢查鍵是否存在
console.log(userMap.has(42)); // true
// 刪除鍵值對
userMap.delete('name');
// 獲取大小
console.log(userMap.size); // 2
// 清空Map
map.clear();

2. 鍵的唯一性

Map 使用 SameValueZero 算法判斷鍵是否重復(fù)（與 Set 相同）：

const map = new Map();
map.set(5, 'number five');
map.set('5', 'string five'); // 允許，類型不同
const obj1 = {};
const obj2 = {};
map.set(obj1, 'obj1');
map.set(obj2, 'obj2'); // 允許，引用不同
console.log(map.size); // 4

3. 迭代方法

Map 保持插入順序，并提供多種迭代方式：

const map = new Map([
  ['a', 1],
  ['b', 2]
]);
// 遍歷鍵值對
for (const [key, value] of map) {
  console.log(key, value);
}
// 遍歷鍵
for (const key of map.keys()) {
  console.log(key);
}
// 遍歷值
for (const value of map.values()) {
  console.log(value);
}
// 使用forEach
map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

4. 對象 vs Map

特性	對象 (Object)	Map
鍵的類型	字符串或 Symbol	任意類型（對象、函數(shù)等）
順序性	不保證順序（ES2015+ 字符串鍵按插入順序，但非強制）	保持插入順序
大小	需要手動計算（如 `Object.keys(obj).length`）	直接通過 `size` 屬性獲取
迭代	需要先獲取鍵數(shù)組（如 `Object.keys()`）	直接支持 `for...of` 和 `forEach`
默認鍵	原型鏈上的鍵（如 `toString`）	無默認鍵
性能	大量鍵值對時操作效率較低	插入、刪除、查找操作更高效

5. 常用操作

// 1. 對象轉(zhuǎn)Map
const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));
// 2. Map轉(zhuǎn)對象
const newObj = Object.fromEntries(map); // ES2019+
// 3. 合并Map
const mergedMap = new Map([...map1, ...map2]);
// 4. 復(fù)制Map
const cloneMap = new Map(map);
// 5. 檢查是否包含所有鍵
function hasAllKeys(map, keys) {
  return keys.every(key => map.has(key));
}

6. 應(yīng)用場景

// 1. 緩存計算結(jié)果
const cache = new Map();
function compute(key) {
  if (cache.has(key)) {
    return cache.get(key);
  }
  const result = expensiveOperation(key);
  cache.set(key, result);
  return result;
}
// 2. 事件注冊表（鍵為元素，值為事件處理函數(shù)）
const eventRegistry = new Map();
const element = document.getElementById('btn');
eventRegistry.set(element, () => { /* 處理函數(shù) */ });
// 3. 統(tǒng)計頻率
const frequencyMap = new Map();
['a', 'b', 'a', 'c'].forEach(item => {
  frequencyMap.set(item, (frequencyMap.get(item) || 0) + 1);
});
// 結(jié)果: Map { 'a' => 2, 'b' => 1, 'c' => 1 }

補充：Object 和 Map 的比較

	Map	Object
意外的鍵	`Map` 默認情況不包含任何鍵。只包含顯式插入的鍵	一個 `Object` 有一個原型，原型鏈上的鍵名有可能和你自己在對象上的設(shè)置的鍵名產(chǎn)生沖突（備注：雖然可以用 `Object.create(null)`來創(chuàng)建一個沒有原型的對象，但是這種用法不太常見）
鍵的類型	一個 `Map` 的鍵可以是任意值，包括函數(shù)、對象或任意基本類型	一個 `Object` 的鍵必須是一個 `String` 或是 `Symbol`
鍵的順序	`Map` 中的鍵是有序的。因此，當(dāng)?shù)臅r候，一個 `Map` 對象以插入的順序返回鍵值	雖然 `Object` 的鍵目前是有序的，但并不總是這樣，而且這個順序是復(fù)雜的（因此，最好不要依賴屬性的順序）
Size	`Map` 的鍵值對個數(shù)可以輕易地通過 `size` 屬性獲取	`Object` 的鍵值對個數(shù)只能手動計算
迭代	`Map` 是可迭代的	`Object` 沒有實現(xiàn)迭代協(xié)議，所以使用 JavaSctipt 的 `for...of]` 表達式并不能直接迭代對象（備注：對象可以實現(xiàn)迭代協(xié)議，或者你可以使用 `Object.keys` 、 `Object.entries` 或 `for...in`）
性能	在頻繁增刪鍵值對的場景下表現(xiàn)更好	在頻繁添加和刪除鍵值對的場景下未作出優(yōu)化
序列化和解析	沒有元素的序列化和解析的支持	由 `Object` 到 `JSON` 的序列化使用 `JSON.stringfy()`；由 `JSON` 到 `Object` 的解析使用 `JSON.parse()`