JavaScript中Map數(shù)據(jù)結(jié)構(gòu)使用方法
JS Map使用方法
Map 是 ES6 引入的一種新的數(shù)據(jù)結(jié)構(gòu),它類似于對(duì)象(Object),但提供了更強(qiáng)大的鍵值對(duì)存儲(chǔ)功能。
基本特性
- 任意類型的鍵:
Map的鍵可以是任意值(包括對(duì)象、函數(shù)等),而普通對(duì)象的鍵只能是字符串或 Symbol - 有序性:
Map會(huì)記住鍵的原始插入順序 - 大小可獲取:可以直接通過
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(); // 通過二維數(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 |
|---|---|---|
| 鍵的類型 | 任意值 | 只能是字符串或 Symbol |
| 鍵的順序 | 有序(插入順序) | 無序(ES6后也有序但不保證) |
| 大小 | size 屬性 | 需要手動(dòng)計(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:對(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” 算法比較鍵(類似于===,但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ì)象作為鍵且不可遍歷
總結(jié)
到此這篇關(guān)于JavaScript中Map數(shù)據(jù)結(jié)構(gòu)使用方法的文章就介紹到這了,更多相關(guān)JS Map使用方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)PC手機(jī)端和嵌入式滑動(dòng)拼圖驗(yàn)證碼三種效果
這篇文章主要介紹了JS實(shí)現(xiàn)PC手機(jī)端和嵌入式滑動(dòng)拼圖驗(yàn)證碼三種效果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
JS實(shí)現(xiàn)電影票選座的項(xiàng)目示例
電影院選座基本上每個(gè)人都用到過,本文主要介紹了JS實(shí)現(xiàn)電影票選座的項(xiàng)目示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
uniapp時(shí)間格式和距離格式的轉(zhuǎn)換
這篇文章主要介紹了uniapp時(shí)間格式和距離格式的轉(zhuǎn)換,第一種是把? YYYY-MM-DD hh:mm:ss 轉(zhuǎn)換成?MM月DD日,第二種是把? hh:mm:ss 轉(zhuǎn)換成?hh:mm,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
Express與NodeJs創(chuàng)建服務(wù)器的兩種方法
本文主要介紹了NodeJs創(chuàng)建Web服務(wù)器;Express創(chuàng)建Web服務(wù)器的兩種方法,具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02
淺談js停止事件冒泡 阻止瀏覽器的默認(rèn)行為(阻止超連接 #)
下面小編就為大家?guī)硪黄獪\談js停止事件冒泡 阻止瀏覽器的默認(rèn)行為(阻止超連接 #)。2017-02-02
一文總結(jié)JavaScript中Promise遇到的問題
Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。本文將總結(jié)一下在Promise中容易遇到的一些問題,感興趣的同學(xué)可以參考下2023-05-05

