快捷導(dǎo)航

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

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

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

JS Map使用方法

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

基本特性

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

基本用法

創(chuàng)建 Map

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

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

常用方法

方法	描述	示例
`set(key, value)`	添加或更新鍵值對	`map.set('name', 'Alice')`
`get(key)`	獲取鍵對應(yīng)的值	`map.get('name')` // ‘Alice’
`has(key)`	檢查是否存在某個鍵	`map.has('name')` // true
`delete(key)`	刪除指定鍵值對	`map.delete('name')`
`clear()`	清空所有鍵值對	`map.clear()`
`size`	獲取鍵值對數(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. 獲取鍵、值或鍵值對的迭代器
console.log([...map.keys()]);    // ['name', 'age', 'job']
console.log([...map.values()]);  // ['Alice', 25, 'Developer']
console.log([...map.entries()]); // 同直接遍歷 map

與 Object 的區(qū)別

特性	Map	Object
鍵的類型	任意值	只能是字符串或 Symbol
鍵的順序	有序（插入順序）	無序（ES6后也有序但不保證）
大小	`size` 屬性	需要手動計(jì)算
性能	頻繁增刪時(shí)表現(xiàn)更好	頻繁增刪時(shí)性能較差
默認(rèn)鍵	無	有原型鏈上的鍵
序列化	不能直接 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：對象作為鍵

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' }