快捷導(dǎo)航

JavaScript中Map數(shù)據(jù)結(jié)構(gòu)使用方法

更新時(shí)間：2025年06月26日 10:50:38 作者：大象吃香蕉

JavaScript中的Map是一種用于存儲(chǔ)鍵值對(duì)的集合,它與傳統(tǒng)的對(duì)象類(lèi)似,但提供了更豐富的功能和靈活性,這篇文章主要介紹了JavaScript中Map數(shù)據(jù)結(jié)構(gòu)使用方法的相關(guān)資料,需要的朋友可以參考下

JS Map使用方法

Map 是 ES6 引入的一種新的數(shù)據(jù)結(jié)構(gòu)，它類(lèi)似于對(duì)象（Object），但提供了更強(qiáng)大的鍵值對(duì)存儲(chǔ)功能。

基本特性

任意類(lèi)型的鍵：Map 的鍵可以是任意值（包括對(duì)象、函數(shù)等），而普通對(duì)象的鍵只能是字符串或 Symbol
有序性：Map 會(huì)記住鍵的原始插入順序
大小可獲取：可以直接通過(guò) size 屬性獲取 Map 中的元素?cái)?shù)量
性能優(yōu)化：在頻繁增刪鍵值對(duì)的場(chǎng)景下，Map 的性能通常優(yōu)于普通對(duì)象

基本用法

創(chuàng)建 Map

// 創(chuàng)建一個(gè)空 Map
const map = new Map();

// 通過(guò)二維數(shù)組初始化 Map
const map2 = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

常用方法

方法	描述	示例
`set(key, value)`	添加或更新鍵值對(duì)	`map.set('name', 'Alice')`
`get(key)`	獲取鍵對(duì)應(yīng)的值	`map.get('name')` // ‘Alice’
`has(key)`	檢查是否存在某個(gè)鍵	`map.has('name')` // true
`delete(key)`	刪除指定鍵值對(duì)	`map.delete('name')`
`clear()`	清空所有鍵值對(duì)	`map.clear()`
`size`	獲取鍵值對(duì)數(shù)量	`map.size`

遍歷方法

const map = new Map([
  ['name', 'Alice'],
  ['age', 25],
  ['job', 'Developer']
]);

// 1. for...of 遍歷
for (const [key, value] of map) {
  console.log(key, value);
}

// 2. forEach 方法
map.forEach((value, key) => {
  console.log(key, value);
});

// 3. 獲取鍵、值或鍵值對(duì)的迭代器
console.log([...map.keys()]);    // ['name', 'age', 'job']
console.log([...map.values()]);  // ['Alice', 25, 'Developer']
console.log([...map.entries()]); // 同直接遍歷 map

與 Object 的區(qū)別

特性	Map	Object
鍵的類(lèi)型	任意值	只能是字符串或 Symbol
鍵的順序	有序（插入順序）	無(wú)序（ES6后也有序但不保證）
大小	`size` 屬性	需要手動(dòng)計(jì)算
性能	頻繁增刪時(shí)表現(xiàn)更好	頻繁增刪時(shí)性能較差
默認(rèn)鍵	無(wú)	有原型鏈上的鍵
序列化	不能直接 JSON.stringify	可以直接序列化

實(shí)際應(yīng)用示例

示例1：統(tǒng)計(jì)字符出現(xiàn)次數(shù)

function countChars(str) {
  const map = new Map();
  for (const char of str) {
    map.set(char, (map.get(char) || 0) + 1);
  }
  return map;
}

const result = countChars('hello');
console.log(result.get('l')); // 2

示例2：緩存計(jì)算結(jié)果

const cache = new Map();

function factorial(n) {
  if (cache.has(n)) return cache.get(n);
  if (n === 0) return 1;
  const result = n * factorial(n - 1);
  cache.set(n, result);
  return result;
}

console.log(factorial(5)); // 120
console.log(cache); // Map { 1 => 1, 2 => 2, 3 => 6, 4 => 24, 5 => 120 }

示例3：對(duì)象作為鍵

const user1 = { id: 1, name: 'Alice' };
const user2 = { id: 2, name: 'Bob' };

const userSettings = new Map();
userSettings.set(user1, { theme: 'dark' });
userSettings.set(user2, { theme: 'light' });

console.log(userSettings.get(user1)); // { theme: 'dark' }

注意事項(xiàng)

鍵的比較：Map 使用 “SameValueZero” 算法比較鍵（類(lèi)似于 ===，但 NaN 等于 NaN）
內(nèi)存管理：如果使用對(duì)象作為鍵，即使對(duì)象被設(shè)為 null，Map 仍然會(huì)保留對(duì)它的引用
序列化：Map 不能直接使用 JSON.stringify()，需要先轉(zhuǎn)換為數(shù)組
NaN 等于 NaN）
內(nèi)存管理：如果使用對(duì)象作為鍵，即使對(duì)象被設(shè)為 null，Map 仍然會(huì)保留對(duì)它的引用
序列化：Map 不能直接使用 JSON.stringify()，需要先轉(zhuǎn)換為數(shù)組
WeakMap：如果需要弱引用，可以使用 WeakMap，它只接受對(duì)象作為鍵且不可遍歷