前言

JS里對于Map的簡單介紹

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

一、Map

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

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

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

• 可變大?。篗ap 可以動態(tài)添加或刪除鍵值對，可以使用 size 屬性來獲取當(dāng)前鍵值對的數(shù)量。

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

二、基本使用

1. 創(chuàng)建Map

可以通過 new Map() 來創(chuàng)建一個新的Map

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

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

// 使用對象作為鍵
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對象本身，支持鏈?zhǔn)秸{(diào)用

3. 獲取元素

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

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

4. 檢查元素

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

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

5. 刪除元素

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

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

6. 清空Map

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

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

7. Map的大小

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

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

三、擴展使用

1. 遍歷 Map

Map 提供了多種方法來遍歷鍵值對：

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

可以用 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()) {}

// 遍歷鍵值對
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)對象

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

• 對象轉(zhuǎn)Map

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

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

• ！??！需要使用任意類型的鍵時（這也是Map的特性）：當(dāng)鍵需要是對象、函數(shù)等復(fù)雜類型時

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

• ！?。⌒枰３植迦腠樞颍喝鐚崿F(xiàn)LRU緩存

• 避免原型鏈污染：安全存儲用戶提供的鍵值

• 大數(shù)據(jù)量存儲：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

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

5. 注意事項?。?！

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

• ?。。〔灰褂脤傩栽L問：map[‘key’] = value這種方式不會修改Map數(shù)據(jù)結(jié)構(gòu)

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

6. WeakMap

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

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

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

四、總結(jié)

Map是JavaScript中強大的數(shù)據(jù)結(jié)構(gòu)，在需要鍵值對存儲且Object不能滿足需求時，Map是更好的選擇。

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

最新評論