前言

JS里對(duì)于Map的簡(jiǎn)單介紹

Map 是一種用于存儲(chǔ)鍵值對(duì)的數(shù)據(jù)結(jié)構(gòu)（與傳統(tǒng)對(duì)象（Object）類(lèi)似）

一、Map

Map 是一種用于存儲(chǔ)鍵值對(duì)的數(shù)據(jù)結(jié)構(gòu)。它的主要特性包括：

• 鍵值對(duì)存儲(chǔ)：Map 存儲(chǔ)的是一組鍵值對(duì)（key-value pairs）。每個(gè)鍵都是唯一的，與傳統(tǒng)對(duì)象（Object）類(lèi)似，但 Map 允許使用任何類(lèi)型的值作為鍵，包括對(duì)象、函數(shù)、甚至是另一個(gè) Map。

• 保持插入順序：Map 會(huì)按照鍵值對(duì)的插入順序維護(hù)遍歷的順序。當(dāng)你使用 forEach 或其他遍歷方法時(shí)，鍵值對(duì)會(huì)按照插入的順序返回。

• 可變大小：Map 可以動(dòng)態(tài)添加或刪除鍵值對(duì)，可以使用 size 屬性來(lái)獲取當(dāng)前鍵值對(duì)的數(shù)量。

• 更好的性能：在頻繁的插入、刪除和查找操作時(shí)，Map 的性能通常優(yōu)于普通的對(duì)象，特別是在處理大量數(shù)據(jù)時(shí)。

二、基本使用

1. 創(chuàng)建Map

可以通過(guò) new Map() 來(lái)創(chuàng)建一個(gè)新的Map

// 創(chuàng)建空Map
const map1 = new Map();

// 用數(shù)組初始化Map
const map2 = new Map([
  ['name', 'Alice'],
  ['age', 25]
]);

// 使用對(duì)象作為鍵
const objKey = {id: 1};
const map3 = new Map();
map3.set(objKey, 'value for object');
console.log(map3); // Map(1) { { id: 1 } => 'value for object' }

2. 添加/修改元素

使用 set() 方法向Map中添加元素

map.set(key, value);  // 返回Map對(duì)象本身，支持鏈?zhǔn)秸{(diào)用

3. 獲取元素

使用 get()方法獲取Map中的元素

map.get(key);  // 返回與鍵關(guān)聯(lián)的值，不存在則返回undefined

4. 檢查元素

可以使用 has() 方法檢查Map中是否包含特定元素

map.has(key);  // 返回布爾值，表示鍵是否存在

5. 刪除元素

使用 delete() 方法從Map中刪除鍵值對(duì)

mySet.delete(key); // 刪除成功返回true，否則返回false

6. 清空Map

使用 clear() 方法可以移除集合中的所有元素

mySet.clear();
console.log(mySet); // Set {}

7. Map的大小

使用 size 屬性可以獲取Map中鍵值對(duì)的數(shù)量

const myMap = new Map([
  ['name', 'Alice'],
  ['age', 25]
]);
console.log(myMap .size); // 2

三、擴(kuò)展使用

1. 遍歷 Map

Map 提供了多種方法來(lái)遍歷鍵值對(duì)：

• keys(): 返回一個(gè)包含 Map 中所有鍵的迭代器。
• values(): 返回一個(gè)包含 Map 中所有值的迭代器。
• entries(): 返回一個(gè)包含 Map 中所有 [key, value] 對(duì)的迭代器。

可以用 forEach 方法遍歷 Map：

myMap.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

keys() / values() / entries()：

// 遍歷鍵
for (const key of map.keys()) {}

// 遍歷值
for (const value of map.values()) {}

// 遍歷鍵值對(duì)
for (const [key, value] of map.entries()) {}

直接使用for…of

for (const [key, value] of map) {}

2. Map與其它數(shù)據(jù)結(jié)構(gòu)的轉(zhuǎn)換

• Map轉(zhuǎn)數(shù)組

const arr = [...map];  // 或 Array.from(map)

• 數(shù)組轉(zhuǎn)Map

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

• Map轉(zhuǎn)對(duì)象

const obj = {};
for (const [key, value] of map) {
  obj[key] = value
}

• 對(duì)象轉(zhuǎn)Map

const map = new Map(Object.entries(obj))

3. Map的應(yīng)用場(chǎng)景（含 Map的 特性 ）

• ?。。⌒枰褂萌我忸?lèi)型的鍵時(shí)（這也是Map的特性）：當(dāng)鍵需要是對(duì)象、函數(shù)等復(fù)雜類(lèi)型時(shí)

• ！??！頻繁增刪鍵值對(duì)：Map在增刪操作上性能優(yōu)于Object

• ?。。⌒枰３植迦腠樞颍喝鐚?shí)現(xiàn)LRU緩存

• 避免原型鏈污染：安全存儲(chǔ)用戶(hù)提供的鍵值

• 大數(shù)據(jù)量存儲(chǔ)：Map比Object占用更少內(nèi)存

4. 性能比較（與Object相比較）

優(yōu)：創(chuàng)建：Object比Map更快，內(nèi)存占用更少
優(yōu)：插入：Map比Object快，內(nèi)存占用少約78%
優(yōu)：刪除：Map略快于Object

劣：查詢(xún)：兩者性能相近，Object略快
劣：在鍵為連續(xù)非負(fù)整數(shù)時(shí)，Object性能會(huì)顯著優(yōu)于Map

5. 注意事項(xiàng)?。。?/h3>

• 鍵的相等性：Map使用"SameValueZero"算法比較鍵，NaN與NaN視為相等

• ?。?！不要使用屬性訪(fǎng)問(wèn)：map[‘key’] = value這種方式不會(huì)修改Map數(shù)據(jù)結(jié)構(gòu)

• JSON序列化：Map默認(rèn)不支持JSON序列化，需要自定義轉(zhuǎn)換

6. WeakMap

WeakMap是Map的弱引用版本，區(qū)別在于：

• 鍵必須是對(duì)象
• 鍵是弱引用，不會(huì)阻止垃圾回收
• 不可遍歷，沒(méi)有size屬性
• 只有g(shù)et、set、has、delete方法

const wm = new WeakMap();
const obj = {};
wm.set(obj, 'value');

四、總結(jié)

Map是JavaScript中強(qiáng)大的數(shù)據(jù)結(jié)構(gòu)，在需要鍵值對(duì)存儲(chǔ)且Object不能滿(mǎn)足需求時(shí)，Map是更好的選擇。

到此這篇關(guān)于JavaScript中對(duì)于Map的文章就介紹到這了,更多相關(guān)JS Map簡(jiǎn)單介紹內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論