JavaScript 中 Set 和 Map 的示例詳解
一、Set（集合）
1.1 Set 的基本特性
唯一性：
Set中的每個值只能出現(xiàn)一次，重復的值會被自動忽略。無序性：
Set中的值沒有順序。可迭代：
Set支持for...of循環(huán)和forEach方法。值的類型：
Set可以存儲任意類型的值（包括基本類型和引用類型）。
1.2 創(chuàng)建 Set
使用 new Set() 創(chuàng)建一個集合。
const set = new Set(); // 創(chuàng)建一個空集合
1.3 Set 的常用方法
以下是 Set 的核心方法：
（1）set.add(value)
向集合中添加一個值。如果值已存在，則不會重復添加。
set.add(1);
set.add(2);
set.add(2); // 重復值會被忽略
console.log(set); // 輸出 Set { 1, 2 }（2）set.has(value)
判斷集合中是否包含某個值。如果鍵是對象或者數(shù)組，比較的是引用地址，內(nèi)容一樣也不行。
console.log(set.has(1)); // 輸出 true console.log(set.has(3)); // 輸出 false
（3）set.delete(value)
從集合中刪除某個值。如果刪除成功，返回 true；否則返回 false。
set.delete(1); // 刪除值為 1 的元素
console.log(set); // 輸出 Set { 2 }（4）set.clear()
清空集合中的所有值。
set.clear();
console.log(set); // 輸出 Set {}（5）set.size
獲取集合中值的數(shù)量。
console.log(set.size); // 輸出集合的大小
1.4 Set 的遍歷方法
Set 提供了多種遍歷方式：
（1）for...of循環(huán)
const set = new Set([1, 2, 3]);
for (const value of set) {
console.log(value); // 依次輸出 1, 2, 3
}（2）set.forEach()
set.forEach((value) => {
console.log(value); // 依次輸出 1, 2, 3
});（3）set.values()
返回一個包含集合中所有值的迭代器。
const valuesIterator = set.values();
for (const value of valuesIterator) {
console.log(value); // 依次輸出 1, 2, 3
}（4）set.keys()
set.keys() 是 set.values() 的別名，行為完全相同。
const keysIterator = set.keys();
for (const key of keysIterator) {
console.log(key); // 依次輸出 1, 2, 3
}（5）set.entries()
返回一個包含 [value, value] 對的迭代器（為了與 Map 的 API 保持一致）。
const entriesIterator = set.entries();
for (const [key, value] of entriesIterator) {
console.log(key, value); // 依次輸出 1 1, 2 2, 3 3
}1.5 Set 的應用場景
（1）數(shù)組去重
const array = [1, 2, 2, 3, 4, 4]; const uniqueArray = [...new Set(array)]; console.log(uniqueArray); // 輸出 [1, 2, 3, 4]
（2）集合運算
并集：
const set1 = new Set([1, 2, 3]); const set2 = new Set([3, 4, 5]); const union = new Set([...set1, ...set2]); console.log(union); // 輸出 Set { 1, 2, 3, 4, 5 }交集：
const intersection = new Set([...set1].filter(x => set2.has(x))); console.log(intersection); // 輸出 Set { 3 }差集：
const difference = new Set([...set1].filter(x => !set2.has(x))); console.log(difference); // 輸出 Set { 1, 2 }
（3）存儲唯一值
const uniqueValues = new Set();
uniqueValues.add(1);
uniqueValues.add(2);
uniqueValues.add(1); // 重復值會被忽略
console.log(uniqueValues); // 輸出 Set { 1, 2 }二、Map（映射）
2.1 Map 的基本特性
鍵值對存儲：
Map存儲的是鍵值對（key-value pairs）。鍵的類型：
Map的鍵可以是任意類型（包括對象、函數(shù)等），而對象的鍵只能是字符串或 Symbol。順序性：
Map會記住鍵值對的插入順序。性能：
Map在頻繁增刪鍵值對的場景下性能更好。
2.2 創(chuàng)建 Map
使用 new Map() 創(chuàng)建一個映射。
const map = new Map(); // 創(chuàng)建一個空映射
2.3 Map 的常用方法
以下是 Map 的核心方法：
（1）map.set(key, value)
向 Map 中添加或更新鍵值對。
map.set('name', 'Alice');
map.set(1, 'Number One');
map.set({ id: 1 }, 'Object Key');（2）map.get(key)
根據(jù)鍵獲取對應的值。如果鍵不存在，返回 undefined。
console.log(map.get('name')); // 輸出 "Alice"
console.log(map.get('age')); // 輸出 undefined（3）map.has(key)
判斷 Map 中是否存在指定的鍵。如果鍵是對象或者數(shù)組，比較的是引用地址，內(nèi)容一樣也不行。
console.log(map.has('name')); // 輸出 true
console.log(map.has('age')); // 輸出 false（4）map.delete(key)
刪除指定鍵的鍵值對。如果刪除成功，返回 true；否則返回 false。
map.delete('name'); // 刪除鍵為 'name' 的鍵值對（5）map.clear()
清空 Map 中的所有鍵值對。
map.clear();
（6）map.size
獲取 Map 中鍵值對的數(shù)量。
console.log(map.size); // 輸出當前鍵值對的數(shù)量
2.4 Map 的遍歷方法
Map 提供了多種遍歷方式：
（1）map.keys()
返回一個包含所有鍵的迭代器。
（2）map.values()
返回一個包含所有值的迭代器。
（3）map.entries()
返回一個包含所有鍵值對的迭代器（默認迭代器）。
（4）map.forEach()
遍歷 Map 中的每個鍵值對。
for (const key of map.keys()) {
console.log(key);
}
for (const value of map.values()) {
console.log(value);
}
for (const [key, value] of map.entries()) {
console.log(key, value);
}
map.forEach((value, key) => {
console.log(key, value);
});2.5 Map 的應用場景
（1）存儲鍵值對
const userMap = new Map();
userMap.set(1, { name: 'Alice' });
userMap.set(2, { name: 'Bob' });
console.log(userMap.get(1)); // 輸出 { name: 'Alice' }（2）復雜鍵
const objKey = { id: 1 };
const map = new Map();
map.set(objKey, 'Value for object key');
console.log(map.get(objKey)); // 輸出 "Value for object key"（3）緩存數(shù)據(jù)
const cache = new Map();
function fetchData(key) {
if (cache.has(key)) {
return cache.get(key);
}
const data = `Data for ${key}`;
cache.set(key, data);
return data;
}
console.log(fetchData('user1')); // 輸出 "Data for user1"
console.log(fetchData('user1')); // 從緩存中讀取（4）修改key值或者修改value值
1，修改key值：
如果需要修改鍵，可以按照以下步驟操作：
刪除舊的鍵值對：使用
map.delete(key)。添加新的鍵值對：使用
map.set(newKey, value)。2，修改value值：
使用
map.set(key, newValue)更新鍵值對。
三、Set 和 Map 的區(qū)別
| 特性 | Set | Map |
|---|---|---|
| 存儲內(nèi)容 | 唯一值（values） | 鍵值對（key-value pairs） |
| 鍵的類型 | 無鍵，只有值 | 任意類型（包括對象、函數(shù)等） |
| 值的唯一性 | 值唯一 | 鍵唯一，值可以重復 |
| 順序性 | 記住插入順序 | 記住插入順序 |
| 常用方法 | add、has、delete | set、get、has、delete |
| 應用場景 | 存儲唯一值，去重 | 存儲鍵值對，快速查找 |
到此這篇關于JavaScript 中 Set 和 Map 的示例詳解的文章就介紹到這了,更多相關js set和map內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
一文了解JavaScript中call/apply/bind的使用
這篇文章主要介紹了一文了解JavaScript中call/apply/bind的使用，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-07-07
微信小程序仿抖音視頻之整屏上下切換功能的實現(xiàn)代碼
這篇文章主要介紹了微信小程序仿抖音視頻之整屏上下切換功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
本文主要介紹了json的基礎知識。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了js前端解決跨域的八種實現(xiàn)方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
這篇文章主要介紹了普通js文件里面如何訪問vue實例this指針，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Javascript中實現(xiàn)trim()函數(shù)的兩種方法
這篇文章主要介紹了Javascript中實現(xiàn)trim()函數(shù)的兩種方法,本文直接給出實現(xiàn)代碼和使用方法,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了RequireJS多頁面應用實例分析的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細介紹了微信小程序日期選擇器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要給大家介紹了關于在ts文件中引入js模塊編寫聲明文件的寫法示例,TypeScript是JavaScript的超集,TypeScript會進類型檢查,需要的朋友可以參考下2023-08-08
下面小編就為大家?guī)硪黄狫avaScript使用atan2來繪制箭頭和曲線的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09