JavaScript中Map和Set數據結構使用方法詳解

更新時間：2025年03月26日 08:46:26 作者：紅蝦程序員

這篇文章主要介紹了JavaScript中Map和Set數據結構使用方法的相關資料,Map是一種鍵值對集合,支持任意類型的鍵和值,保留插入順序,并提供多種遍歷和操作方法,Set是一種唯一值集合,通過哈希算法保證唯一性,提供添加、刪除、檢查元素的方法,需要的朋友可以參考下

一、Map

1. 定義與特點

Map 是 JavaScript ES6 中新增的一種數據結構，它類似于對象，但比對象更強大、更靈活。Map是一種鍵值對集合，可以存儲任意類型的鍵和值，與普通對象不同，Map保留了鍵的原始插入順序，并支持鏈式調用。Map的鍵可以是任何類型的數據，包括對象和函數。

2. 創(chuàng)建Map對象

使用new Map()構造函數

使用字面量語法

 const map = new Map();
 const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

3. 常用方法

添加鍵值對：set(key, value)

獲取鍵對應的值：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中鍵值對的數量)

4. 遍歷Map

Map提供了多種遍歷方法：

forEach()：遍歷Map中的每個鍵值對，接受一個回調函數。
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	對象
鍵的類型	可以是任何數據類型，包括對象、函數、基本類型等	只能是字符串或符號類型
鍵的順序	按插入順序保留鍵值對	鍵的遍歷順序可能會根據不同的 JavaScript 引擎有所不同
大小屬性	有 `size` 屬性，可以直接獲取鍵值對的數量	沒有內置的 `size` 屬性，需要手動計算
迭代方式	可直接迭代，使用 `for...of` 循環(huán)或 `forEach` 方法	需要先獲取鍵數組，然后進行迭代
默認鍵	沒有默認鍵	繼承自 `Object.prototype`，可能會有默認鍵
性能	在頻繁增刪鍵值對的操作中通常比對象更高效	適用于結構化的靜態(tài)數據
序列化/解析	沒有內置的序列化或解析支持，但可以自定義實現	可以使用 `JSON.stringify` 和 `JSON.parse` 進行序列化和解析
創(chuàng)建方式	使用 `new Map()` 構造函數或傳遞可迭代對象初始化	使用字面量語法 `{}` 或構造函數 `new Object()` 創(chuàng)建
方法	提供 `set`, `get`, `has`, `delete`, `clear`, `keys`, `values`, `entries` 等方法	提供 `hasOwnProperty`, `in` 運算符等方法

二、Set

1. 定義與特點

Set 也是 JavaScript ES6 中新增的一種數據結構，它類似于數組，但成員的值都是唯一的，沒有重復的值。Set內部通過哈希算法保證元素的唯一性和快速查找。

2. 創(chuàng)建Set對象

使用new Set()構造函數

使用字面量語法

 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中元素的數量)

4. 遍歷Set

Set提供了多種遍歷方法：

forEach()：遍歷Set中的每個元素，接受一個回調函數。
for...of方法：keys()：返回一個包含所有元素的迭代器（Set本身就是無序的，因此keys()和values()返回的結果相同），values()：返回一個包含所有元素的迭代器，entries()：返回一個包含所有鍵值對的迭代器（Set中沒有鍵，因此返回的結果與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. 應用場景

數據去重

Set對象的一個核心用途是去除重復值。當需要從數組中移除重復項時，可以使用Set來實現。

 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}

這種用法在處理數據時非常常見，特別是在需要確保集合中元素唯一性的情況下。

集合運算

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}

通過這些運算，可以方便地對集合進行數學上的操作。

遍歷集合

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]