在 JavaScript 中，Map 是 ES6 引入的一種新的數(shù)據結構，它類似于對象，也是鍵值對的集合，但 Map 的鍵可以是任意類型的值（對象、函數(shù)、基本類型等），而傳統(tǒng)對象的鍵只能是字符串或 Symbol，并且Map保留了插入順序。

一、Map 的特性

• 鍵值對集合：存儲鍵值對，類似對象
• 鍵的多樣性‌：鍵可以是任意數(shù)據類型（對象、函數(shù)、基本類型等），而不僅限于字符串或 Symbol。
• 保留‌插入順序：遍歷時按插入順序返回鍵值對
• 直接獲取大小‌：通過 size 屬性快速獲取元素數(shù)量
• ‌支持‌迭代：原生支持 for…of、forEach 等遍歷方式
• 性能優(yōu)化‌：在頻繁增刪鍵值對的場景下性能更優(yōu)

二、創(chuàng)建 Map

1、‌創(chuàng)建一個空 Map

const emptySet = new Map();

2、創(chuàng)建一個帶有初始鍵值對的 Map，通過二維數(shù)組初始化

const map2 = new Map([
  ['name', '張三'],
  ['age', 25],
  [1, '數(shù)字鍵'],
  [{}, '對象鍵']
]);

三、Map 的常用屬性和方法

• set() 添加元素

  const map = new Map();
  map.set('name', '李四');
  map.set(1, '數(shù)字一');
  map.set({id: 1}, '對象鍵值');
  

• get() 獲取元素

  console.log(map.get('name')); // 李四
  console.log(map.get(1));      // 數(shù)字一
  

• has() 檢查鍵是否存在

  console.log(map.has('name')); // true
  console.log(map.has('address')); // false
  

• delete() 刪除元素

  map.delete('name');
  console.log(map.has('name')); // false
  

• clear() 清空 Map

  map.clear();
  console.log(map.size); // 0
  

• size屬性 獲取大小

  console.log(map.size); // 元素數(shù)量
  

四、遍歷 Map

1、 for…of 循環(huán)

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

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

2、forEach 方法

map.forEach((value, key) => {
  console.log(key, value);
});

3、獲取迭代器

• 獲取鍵的迭代器 keys()

  for (const key of map.keys()) {
    console.log(key);
  }
  

• 獲取值的迭代器 values()

  for (const value of map.values()) {
    console.log(value);
  }
  

• 獲取鍵值對的迭代器 entries()
  返回一個包含 [key, value] 對的迭代器

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

五、Map 與 Object 的比較

六、與對象/數(shù)組的轉換‌

1、對象轉為Map‌

const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));

2、Map轉為對象‌

const map = new Map([["a", 1], ["b", 2]]);
const obj = Object.fromEntries(map);

3、Map轉為數(shù)組‌

console.log([...map]); // 轉二維數(shù)組
console.log([...map.keys()]); // 所有鍵的數(shù)組

七、使用場景

• 需要鍵不是字符串/符號時：比如要用對象作為鍵

• 需要保持插入順序時：Map 會記住鍵的原始插入順序

• 頻繁增刪鍵值對時：Map 性能更好

• 需要知道數(shù)據大小時：Map 有 size 屬性

八、使用示例

1、統(tǒng)計字符出現(xiàn)次數(shù)

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

const charCount = countChars('hello world');
console.log(charCount.get('o')); // 2

2、使用復雜對象作為鍵

const user1 = {id: 1, name: 'admin'};
const user2 = {id: 2, name: 'test'};

const userMapData = new Map();
userMapData.set(user1, {roleCode: 'admin', createTime: '2025-04-09'});
userMapData.set(user2, {roleCode: 'user', createTime: '2025-04-09'});

console.log(userMapData.get(user1).roleCode); // 'admin'

3、對象關聯(lián)元數(shù)據
dom對象本身作為鍵存儲額外數(shù)據，避免污染對象屬性

const domMetadata = new Map();
const button = document.querySelector("#myButton");

// 綁定點擊次數(shù)元數(shù)據
domMetadata.set(button, { clickCount: 0 });

button.addEventListener("click", () => {
  const metadata = domMetadata.get(button);
  metadata.clickCount++;
  console.log(`點擊次數(shù)：${metadata.clickCount}`);
});

九、注意事項

1、對象作為鍵時： Map 的鍵是基于引用比較的，兩個看起來相同的對象作為鍵是不同的

const map = new Map();
map.set({}, 'value1');
map.set({}, 'value2');
console.log(map.size, map.get({}));  // 2 undefined（不同引用）

let obj = {};
map.set(obj, 'value3');
console.log(map.obj); // value3

2、 NaN 作為鍵時： 雖然 NaN !== NaN，但在 Map 中被視作同一鍵

map.set(NaN, 'not a number');
console.log(map.get(NaN)); // 'not a number'

Map 是一種強大且靈活的數(shù)據結構，通過靈活使用 Map，可以更高效地處理復雜鍵類型和有序鍵值對的場景，提升代碼可讀性和性能。

到此這篇關于JavaScript數(shù)據結構Map的使用實例詳解的文章就介紹到這了,更多相關js map使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論