JavaScript數(shù)據(jù)結(jié)構(gòu)Map的使用示例詳解
更新時間：2025年05月21日 14:32:16 作者：Hi_MrXiao
Map 是一種強(qiáng)大且靈活的數(shù)據(jù)結(jié)構(gòu),通過靈活使用 Map,可以更高效地處理復(fù)雜鍵類型和有序鍵值對的場景,提升代碼可讀性和性能,這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)-Map的使用,需要的朋友可以參考下
在 JavaScript 中，Map 是 ES6 引入的一種新的數(shù)據(jù)結(jié)構(gòu)，它類似于對象，也是鍵值對的集合，但 Map 的鍵可以是任意類型的值（對象、函數(shù)、基本類型等），而傳統(tǒng)對象的鍵只能是字符串或 Symbol，并且Map保留了插入順序。
一、Map 的特性
鍵值對集合：存儲鍵值對，類似對象
鍵的多樣性：鍵可以是任意數(shù)據(jù)類型（對象、函數(shù)、基本類型等），而不僅限于字符串或 Symbol。
保留插入順序：遍歷時按插入順序返回鍵值對
直接獲取大小：通過 size 屬性快速獲取元素?cái)?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')); // falsedelete() 刪除元素
map.delete('name');
console.log(map.has('name')); // falseclear() 清空 Map
map.clear(); console.log(map.size); // 0
size屬性 獲取大小
console.log(map.size); // 元素?cái)?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 的比較
| 特性 | Map | Object |
|---|---|---|
| 鍵的類型 | 任意值 | String 或 Symbol |
| 鍵的順序 | 插入順序 | 不一定 |
| 大小 | size屬性 | 手動計(jì)算 |
| 性能（頻繁增刪） | 更優(yōu) | 一般 |
| 序列化 | 不能直接JSON序列化 | 可以直接序列化 |
| 默認(rèn)鍵 | 無 | 有原型鏈上的鍵 |
六、與對象/數(shù)組的轉(zhuǎn)換
1、對象轉(zhuǎn)為Map
const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));2、Map轉(zhuǎn)為對象
const map = new Map([["a", 1], ["b", 2]]); const obj = Object.fromEntries(map);
3、Map轉(zhuǎn)為數(shù)組
console.log([...map]); // 轉(zhuǎn)二維數(shù)組 console.log([...map.keys()]); // 所有鍵的數(shù)組
七、使用場景
- 需要鍵不是字符串/符號時：比如要用對象作為鍵
- 需要保持插入順序時：Map 會記住鍵的原始插入順序
- 頻繁增刪鍵值對時：Map 性能更好
- 需要知道數(shù)據(jù)大小時：Map 有 size 屬性
八、使用示例
1、統(tǒng)計(jì)字符出現(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、使用復(fù)雜對象作為鍵
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、對象關(guān)聯(lián)元數(shù)據(jù)
dom對象本身作為鍵存儲額外數(shù)據(jù)，避免污染對象屬性
const domMetadata = new Map();
const button = document.querySelector("#myButton");
// 綁定點(diǎn)擊次數(shù)元數(shù)據(jù)
domMetadata.set(button, { clickCount: 0 });
button.addEventListener("click", () => {
const metadata = domMetadata.get(button);
metadata.clickCount++;
console.log(`點(diǎn)擊次數(shù)：${metadata.clickCount}`);
});九、注意事項(xiàng)
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); // value32、 NaN 作為鍵時： 雖然 NaN !== NaN，但在 Map 中被視作同一鍵
map.set(NaN, 'not a number'); console.log(map.get(NaN)); // 'not a number'
Map 是一種強(qiáng)大且靈活的數(shù)據(jù)結(jié)構(gòu)，通過靈活使用 Map，可以更高效地處理復(fù)雜鍵類型和有序鍵值對的場景，提升代碼可讀性和性能。
到此這篇關(guān)于JavaScript數(shù)據(jù)結(jié)構(gòu)-Map的使用的文章就介紹到這了,更多相關(guān)js 數(shù)據(jù)結(jié)構(gòu)map內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript中arguments的使用方法，arguments?是一個對應(yīng)于傳遞給函數(shù)的參數(shù)的類數(shù)組對象。下文詳細(xì)介紹，需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了JS中的回調(diào)函數(shù),結(jié)合實(shí)例形式簡單分析了javascript回調(diào)函數(shù)的感念、功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2018-03-03
本篇文章主要介紹了淺談webpack-dev-server的配置和使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
我們都知道javascript是一個弱類型語言，在ES5之前，javascript的程序編寫具有很強(qiáng)的隨意性，我可以稱之為懶散模式（sloppy mode）。比如可以使用未定義的變量，可以給對象中的任意屬性賦值并不會拋出異常等等。本文將詳細(xì)介紹javascript中的Strict模式。2021-06-06
這篇文章主要介紹了3類js限制文本框的輸入內(nèi)容代碼,需要的朋友可以參考下2015-08-08
js實(shí)現(xiàn)簡易點(diǎn)擊切換顯示或隱藏
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡易點(diǎn)擊切換顯示或隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
uniapp獲取手機(jī)通知權(quán)限實(shí)現(xiàn)demo
這篇文章主要為大家介紹了uniapp獲取手機(jī)通知權(quán)限實(shí)現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要給大家介紹了關(guān)于js指定日期增加指定月份的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
JS的IE和Firefox兼容性集錦...2006-12-12
在微信小程序中使用 Flexbox 布局時,如果遇到 flex-grow 屬性無效的情況,可能是由幾個不同的原因?qū)е碌?以下是一些可能的原因和解決方案,感興趣的朋友一起看看吧2024-08-08