JavaScript中Map和Set數(shù)據(jù)結(jié)構(gòu)使用方法詳解
一、Map
1. 定義與特點
Map 是 JavaScript ES6 中新增的一種數(shù)據(jù)結(jié)構(gòu)，它類似于對象，但比對象更強大、更靈活。Map是一種鍵值對集合，可以存儲任意類型的鍵和值，與普通對象不同，Map保留了鍵的原始插入順序，并支持鏈式調(diào)用。Map的鍵可以是任何類型的數(shù)據(jù)，包括對象和函數(shù)。
2. 創(chuàng)建Map對象
使用
new Map()構(gòu)造函數(shù)
使用字面量語法
const map = new Map(); const map = new Map([['key1', 'value1'], ['key2', 'value2']]);
3. 常用方法
添加鍵值對：
set(key, value)
獲取鍵對應(yīng)的值：
get(key)
檢查鍵是否存在：
has(key)
刪除鍵值對：
delete(key)
清空Map：
clear()
獲取Map大小：
size
map.set('key1', 'value1');
console.log(map.get('key1')); // 輸出: value1
console.log(map.has('key1')); // 輸出: true
map.delete('key1');
map.clear();
console.log(map.size); // 輸出: 0(當前Map中鍵值對的數(shù)量)4. 遍歷Map
Map提供了多種遍歷方法：
forEach()：遍歷Map中的每個鍵值對，接受一個回調(diào)函數(shù)。
for...of方法：keys() ：返回一個包含所有鍵的迭代器，values() ：返回一個包含所有值的迭代器，entries() ：返回一個包含所有鍵值對的迭代器。
const map = new Map([['key1', 'value1'], ['key2', 'value2']]);
?
// 使用 forEach 方法遍歷
map.forEach((value, key) => {
console.log(key, value);
});
?
// 使用 for...of 循環(huán)遍歷
for (let [key, value] of map) {
console.log(key, value);
}
?
// 使用 keys()、values() 和 entries() 方法遍歷
for (let key of map.keys()) {
console.log(key);
}
?
for (let value of map.values()) {
console.log(value);
}
?
for (let [key, value] of map.entries()) {
console.log(key, value);
}5. Map與對象的區(qū)別
| 特性 | Map | 對象 |
|---|---|---|
| 鍵的類型 | 可以是任何數(shù)據(jù)類型，包括對象、函數(shù)、基本類型等 | 只能是字符串或符號類型 |
| 鍵的順序 | 按插入順序保留鍵值對 | 鍵的遍歷順序可能會根據(jù)不同的 JavaScript 引擎有所不同 |
| 大小屬性 | 有 size 屬性，可以直接獲取鍵值對的數(shù)量 | 沒有內(nèi)置的 size 屬性，需要手動計算 |
| 迭代方式 | 可直接迭代，使用 for...of 循環(huán)或 forEach 方法 | 需要先獲取鍵數(shù)組，然后進行迭代 |
| 默認鍵 | 沒有默認鍵 | 繼承自 Object.prototype，可能會有默認鍵 |
| 性能 | 在頻繁增刪鍵值對的操作中通常比對象更高效 | 適用于結(jié)構(gòu)化的靜態(tài)數(shù)據(jù) |
| 序列化/解析 | 沒有內(nèi)置的序列化或解析支持，但可以自定義實現(xiàn) | 可以使用 JSON.stringify 和 JSON.parse 進行序列化和解析 |
| 創(chuàng)建方式 | 使用 new Map() 構(gòu)造函數(shù)或傳遞可迭代對象初始化 | 使用字面量語法 {} 或構(gòu)造函數(shù) new Object() 創(chuàng)建 |
| 方法 | 提供 set, get, has, delete, clear, keys, values, entries 等方法 | 提供 hasOwnProperty, in 運算符等方法 |
二、Set
1. 定義與特點
Set 也是 JavaScript ES6 中新增的一種數(shù)據(jù)結(jié)構(gòu)，它類似于數(shù)組，但成員的值都是唯一的，沒有重復(fù)的值。Set內(nèi)部通過哈希算法保證元素的唯一性和快速查找。
2. 創(chuàng)建Set對象
使用
new Set()構(gòu)造函數(shù)
使用字面量語法
const set = new Set(); const set = new Set([1, 2, 3, 4]);
3. 常用方法
添加元素：
add(value)
刪除元素：
delete(value)
檢查元素是否存在：
has(value)
清空Set：
clear()
獲取Set大小：
size
set.add(5); set.delete(5); console.log(set.has(5)); // 輸出: false set.clear(); console.log(set.size); // 輸出: 0(當前Set中元素的數(shù)量)
4. 遍歷Set
Set提供了多種遍歷方法：
forEach()：遍歷Set中的每個元素，接受一個回調(diào)函數(shù)。
for...of方法：keys()：返回一個包含所有元素的迭代器（Set本身就是無序的，因此
keys()和values()返回的結(jié)果相同），values()：返回一個包含所有元素的迭代器，entries()：返回一個包含所有鍵值對的迭代器（Set中沒有鍵，因此返回的結(jié)果與values()相同）。
const set = new Set([1, 2, 3, 4]);
?
// 使用 forEach 方法遍歷
set.forEach((value) => {
console.log(value);
});
?
// 使用 for...of 循環(huán)遍歷
for (let value of set) {
console.log(value);
}
?
// 使用 values()、keys() 和 entries() 方法遍歷
for (let value of set.values()) {
console.log(value);
}
?
for (let key of set.keys()) {
console.log(key);
}
?
for (let [key, value] of set.entries()) {
console.log(key, value);
}5. 應(yīng)用場景
數(shù)據(jù)去重
Set對象的一個核心用途是去除重復(fù)值。當需要從數(shù)組中移除重復(fù)項時，可以使用Set來實現(xiàn)。
const numbers = [1, 2, 3, 4, 5, 5, 6, 6, 6];
const uniqueNumbers = new Set(numbers);
console.log(uniqueNumbers); // 輸出: Set {1, 2, 3, 4, 5, 6}這種用法在處理數(shù)據(jù)時非常常見，特別是在需要確保集合中元素唯一性的情況下。
集合運算
Set對象支持多種集合運算，包括交集、并集和差集。
const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);
const intersection = new Set([...setA].filter(x => setB.has(x)));
console.log(intersection); // 輸出: Set {3}通過這些運算，可以方便地對集合進行數(shù)學(xué)上的操作。
遍歷集合
Set對象提供了多種方法來遍歷集合中的元素，例如forEach()、values()和keys()等，這些方法使得遍歷和操作集合更加靈活。
const set = new Set([1, 2, 3]); set.forEach(value => console.log(value)); ? const values = Array.from(set.values()); console.log(values); // 輸出: [1, 2, 3] ? const keys = Array.from(set.keys()); console.log(keys); // 輸出: [1, 2, 3]
總結(jié)
到此這篇關(guān)于JavaScript中Map和Set數(shù)據(jù)結(jié)構(gòu)使用方法的文章就介紹到這了,更多相關(guān)JS中Map和Set數(shù)據(jù)結(jié)構(gòu)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript 沒有任何特定語言功能來支持命名空間，但很容易使用對象來模擬命名空間。今天我們就來探討下這個問題，希望大家能夠喜歡。2015-04-04
這篇文章主要介紹了JS正則表達式驗證密碼格式的集中情況總結(jié),需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JS實現(xiàn)的N多簡單無縫滾動代碼,包含了文字及圖文等多種滾動效果,涉及JavaScript遞歸調(diào)用及定時函數(shù)觸發(fā)實現(xiàn)頁面元素動態(tài)變換的相關(guān)技巧,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了微信小程序如何實現(xiàn)點擊圖片放大功能,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)列表自動滾動循環(huán)播放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript處理中文字符串的Base64編碼與解碼的兩種方法
這篇文章主要介紹了在 JavaScript 中處理中文字符串的 Base64 編碼與解碼,解釋了 Base64 編碼與中文字符沖突的原因,分別闡述了手動實現(xiàn)和使用TextEncoder和TextDecoder API 兩種方法,包括編碼和解碼的具體實現(xiàn)及示例,最后總結(jié)了兩種方法的適用場景2025-01-01
這篇文章主要介紹了JS中document獲取元素的常用方法,并提供了具體的示例代碼,這些方法涵蓋了從單個元素到多個元素的獲取方式,需要的朋友可以參考下2025-05-05
JavaScript實現(xiàn)數(shù)組去重的十種方法分享
去重是開發(fā)中經(jīng)常會碰到的一個熱點問題，這篇文章主要介紹了JavaScript中實現(xiàn)數(shù)組去重的10種方法，文中的示例代碼講解詳細，感興趣的可以了解一下2022-11-11
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)時間預(yù)約基本功能，一個類似電商的時間預(yù)約功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要給大家介紹了關(guān)于微信小程序中網(wǎng)絡(luò)請求緩存的解決方法，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12