欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript數(shù)據(jù)結(jié)構(gòu)Map的使用示例詳解

 更新時(shí)間：2025年05月21日 14:32:16   作者：Hi_MrXiao  
Map 是一種強(qiáng)大且靈活的數(shù)據(jù)結(jié)構(gòu),通過(guò)靈活使用 Map,可以更高效地處理復(fù)雜鍵類型和有序鍵值對(duì)的場(chǎng)景,提升代碼可讀性和性能,這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)-Map的使用,需要的朋友可以參考下

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

一、Map 的特性

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

二、創(chuàng)建 Map

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

const emptySet = new Map();

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

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

三、Map 的常用屬性和方法

set() 添加元素

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

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); // 元素?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);
}

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

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

五、Map 與 Object 的比較

特性MapObject
鍵的類型任意值String 或 Symbol
鍵的順序插入順序不一定
大小size屬性手動(dòng)計(jì)算
性能（頻繁增刪）更優(yōu)一般
序列化不能直接JSON序列化可以直接序列化
默認(rèn)鍵無(wú)有原型鏈上的鍵

六、與對(duì)象/數(shù)組的轉(zhuǎn)換‌

1、對(duì)象轉(zhuǎn)為Map‌

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

2、Map轉(zhuǎn)為對(duì)象‌

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ù)組

七、使用場(chǎng)景

  • 需要鍵不是字符串/符號(hào)時(shí)：比如要用對(duì)象作為鍵
  • 需要保持插入順序時(shí)：Map 會(huì)記住鍵的原始插入順序
  • 頻繁增刪鍵值對(duì)時(shí)：Map 性能更好
  • 需要知道數(shù)據(jù)大小時(shí)：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ù)雜對(duì)象作為鍵

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、對(duì)象關(guān)聯(lián)元數(shù)據(jù)

dom對(duì)象本身作為鍵存儲(chǔ)額外數(shù)據(jù)，避免污染對(duì)象屬性

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、對(duì)象作為鍵時(shí)： Map 的鍵是基于引用比較的，兩個(gè)看起來(lái)相同的對(duì)象作為鍵是不同的

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 作為鍵時(shí)： 雖然 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)，通過(guò)靈活使用 Map，可以更高效地處理復(fù)雜鍵類型和有序鍵值對(duì)的場(chǎng)景，提升代碼可讀性和性能。

到此這篇關(guān)于JavaScript數(shù)據(jù)結(jié)構(gòu)-Map的使用的文章就介紹到這了,更多相關(guān)js 數(shù)據(jù)結(jié)構(gòu)map內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論