TypeScript中Map和Set的實現(xiàn)示例
更新時間：2025年06月04日 10:13:16 作者：周倦嵐
本文主要介紹了TypeScript中Map和Set的實現(xiàn)示例, 文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
一、Map（映射）
Map 是 ES6 引入的一種新的數(shù)據(jù)結(jié)構(gòu)，它類似于對象，也是鍵值對的集合，但 Map 的鍵可以是任意類型的值（對象、原始值等），而不僅僅是字符串或 Symbol。
1.基本用法
// 創(chuàng)建一個空Map
const map = new Map();
// 創(chuàng)建時初始化
const initializedMap = new Map([
['key1', 'value1'],
['key2', 'value2']
]);
// 從對象創(chuàng)建Map
const obj = { a: 1, b: 2 };
const mapFromObject = new Map(Object.entries(obj));
2.常用方法和屬性
set(key, value) - 添加或更新鍵值對
map.set('name', 'Alice');
map.set(1, 'number key');
map.set({}, 'object key');
map.set(null, 'null key'); // 甚至可以使用null或undefined作為鍵
get(key) - 獲取鍵對應(yīng)的值
const name = map.get('name'); // 'Alice'
const unknown = map.get('non-existent'); // undefined
has(key) - 檢查是否存在某個鍵
const hasName = map.has('name'); // true
delete(key) - 刪除某個鍵值對
const deleted = map.delete('name'); // 返回布爾值表示是否刪除成功
clear() - 清空所有鍵值對
map.clear();
size - 獲取鍵值對數(shù)量
const size = map.size;
3.遍歷方法
keys() - 返回所有鍵的迭代器
for (const key of map.keys()) {
console.log(key);
}
// 或者轉(zhuǎn)換為數(shù)組
const keysArray = Array.from(map.keys());
values() - 返回所有值的迭代器
for (const value of map.values()) {
console.log(value);
}
entries() - 返回所有鍵值對的迭代器
for (const [key, value] of map.entries()) {
console.log(key, value);
}
// 可以簡寫為
for (const [key, value] of map) {
console.log(key, value);
}
forEach() - 遍歷所有鍵值對
map.forEach((value, key) => {
console.log(key, value);
// 注意：value在前，key在后，與數(shù)組的forEach不同
});
4.TypeScript 中的類型定義
// 明確指定鍵和值的類型
const typedMap = new Map<string, number>();
typedMap.set('age', 25); // 正確
typedMap.set('name', 'Alice'); // 錯誤，值應(yīng)該是number類型
// 復(fù)雜類型示例
interface User {
id: number;
name: string;
}
const userMap = new Map<number, User>();
userMap.set(1, { id: 1, name: 'Alice' });
// 從現(xiàn)有類型派生Map類型
type UserMap = Map<number, User>;
5.Map 與普通對象的區(qū)別
- Map 的鍵可以是任意類型，而對象的鍵只能是字符串或 Symbol
- Map 的大小可以通過 size 屬性直接獲取，而對象需要手動計算
- Map 在頻繁增刪鍵值對的場景下性能更好
- Map 會維護(hù)鍵值對的插入順序
- Map 可以直接遍歷，而對象需要先獲取鍵數(shù)組
6.使用場景
- 需要鍵不是字符串/數(shù)字/Symbol的情況
- 需要頻繁增刪鍵值對的場景
- 需要維護(hù)插入順序的場景
- 需要更便捷的遍歷和大小獲取的場景
二、Set（集合）
Set 是 ES6 引入的另一種數(shù)據(jù)結(jié)構(gòu)，它類似于數(shù)組，但成員的值都是唯一的，沒有重復(fù)的值。
1.基本用法
// 創(chuàng)建一個空Set
const set = new Set();
// 創(chuàng)建時初始化
const initializedSet = new Set([1, 2, 3, 4]);
// 從類數(shù)組對象創(chuàng)建
const arrayLike = { 0: 'a', 1: 'b', length: 2 };
const setFromArrayLike = new Set(Array.from(arrayLike));
// 字符串會被拆分為字符
const charSet = new Set('hello'); // Set {'h', 'e', 'l', 'o'}
2.常用方法和屬性
add(value) - 添加值，返回Set本身（可以鏈?zhǔn)秸{(diào)用）
set.add(1).add(2).add(3); set.add(NaN).add(NaN); // Set中NaN等于自身，只會保留一個
has(value) - 檢查是否存在某個值
const hasTwo = set.has(2); // true set.has(NaN); // 可以正確檢測NaN
delete(value) - 刪除某個值
set.delete(2);
clear() - 清空所有值
set.clear();
size - 獲取值的數(shù)量
const size = set.size;
3.遍歷方法
values() - 返回所有值的迭代器
for (const value of set.values()) {
console.log(value);
}
keys() - 與values()相同，為了與Map兼容
for (const key of set.keys()) {
console.log(key);
}
entries() - 返回[value, value]形式的迭代器，為了與Map兼容
for (const [key, value] of set.entries()) {
console.log(key, value); // 兩者相同
}
forEach() - 遍歷所有值
set.forEach((value) => {
console.log(value);
// 注意：參數(shù)設(shè)計為與Map的forEach一致
});
4.TypeScript 中的類型定義
// 明確指定值的類型
const typedSet = new Set<number>();
typedSet.add(1); // 正確
typedSet.add('1'); // 錯誤，值應(yīng)該是number類型
// 復(fù)雜類型示例
interface Product {
id: number;
name: string;
}
const productSet = new Set<Product>();
productSet.add({ id: 1, name: 'Laptop' });
// 從現(xiàn)有類型派生Set類型
type ProductSet = Set<Product>;
5.Set 與數(shù)組的區(qū)別
| 特性 | Set | 數(shù)組 |
|---|---|---|
| 唯一性 | 值唯一 | 允許重復(fù)值 |
| 查找效率 | has方法O(1) | includes/indexOf O(n) |
| 添加元素 | add方法 | push/unshift等方法 |
| 刪除元素 | delete方法 | splice/filter等方法 |
| 順序 | 插入順序 | 可排序 |
| 索引訪問 | 不支持 | 支持下標(biāo)訪問 |
| 大小獲取 | size屬性 | length屬性 |
| 內(nèi)存占用 | 通常比數(shù)組多 | 通常更節(jié)省內(nèi)存 |
6.使用場景
- 需要存儲唯一值的場景
- 需要快速檢查某個值是否存在的場景
- 需要去重的場景
- 數(shù)學(xué)集合運算（并集、交集、差集）
7.集合運算示例
// 并集 const union = new Set([...setA, ...setB]); // 交集 const intersection = new Set([...setA].filter(x => setB.has(x))); // 差集 (A - B) const difference = new Set([...setA].filter(x => !setB.has(x)));
三、Map 和 Set 的性能特點
- 查找速度：Map 和 Set 的查找操作（has/get）平均時間復(fù)雜度為 O(1)，比數(shù)組的 O(n) 快
- 插入速度：Map 和 Set 的插入操作平均時間復(fù)雜度為 O(1)
- 刪除速度：Map 和 Set 的刪除操作平均時間復(fù)雜度為 O(1)
- 內(nèi)存占用：Map 和 Set 通常比對象和數(shù)組占用更多內(nèi)存
- 迭代性能：Map和Set的迭代速度與數(shù)組相當(dāng),對象迭代需要Object.keys等額外步驟
四、應(yīng)用建議
- 類型安全：
// 總是明確指定泛型類型 const userMap = new Map<number, User>();
合理選擇數(shù)據(jù)結(jié)構(gòu)：
- 需要鍵值對 → Map
- 需要唯一值 → Set
- 需要索引訪問 → 數(shù)組
- 需要簡單鍵值且不頻繁修改 → 對象
內(nèi)存管理：
- 對于臨時對象作為鍵/值，考慮WeakMap/WeakSet
- 大型Map/Set不再需要時手動clear()
性能優(yōu)化：
- 避免在熱代碼路徑中頻繁創(chuàng)建新的Map/Set
- 對于大型數(shù)據(jù)集，考慮預(yù)分配大小
不可變數(shù)據(jù)：
// 需要不可變Map/Set時
function addToImmutableSet<T>(set: Set<T>, value: T): Set<T> {
return new Set([...set, value]);
}
與數(shù)組轉(zhuǎn)換：
// Map轉(zhuǎn)數(shù)組 const mapEntries = [...map.entries()]; // Set轉(zhuǎn)數(shù)組 const setValues = [...set];
自定義相等性：
// 對于對象值，需要自定義相等邏輯
const objectSet = new Set<{id: number}>();
const obj1 = {id: 1};
const obj2 = {id: 1};
objectSet.add(obj1);
objectSet.has(obj2); // false，因為對象引用不同
五、總結(jié)
| 特性 | Map | Set |
|---|---|---|
| 存儲內(nèi)容 | 鍵值對 | 唯一值 |
| 鍵/值類型 | 任意類型 | 任意類型 |
| 主要方法 | set, get, has, delete | add, has, delete |
| 遍歷方式 | keys, values, entries | values, keys, entries |
| 典型用途 | 需要非字符串鍵的鍵值對存儲 | 值唯一性檢查、集合運算 |
| 是否有序 | 插入順序 | 插入順序 |
1.何時選擇Map/Set：
- 需要非字符串鍵 → Map
- 需要嚴(yán)格維護(hù)插入順序 → Map/Set
- 需要頻繁增刪元素 → Map/Set
- 需要高效存在性檢查 → Set
- 需要集合運算 → Set
2.何時選擇對象/數(shù)組：
- 需要索引訪問 → 數(shù)組
- 簡單配置對象 → 對象
- 需要方法操作（如map/filter）→ 數(shù)組
- 小型靜態(tài)數(shù)據(jù)集 → 對象/數(shù)組
在 TypeScript 中使用 Map 和 Set 時，建議總是明確指定泛型類型參數(shù)，以獲得更好的類型檢查和代碼提示。這兩種數(shù)據(jù)結(jié)構(gòu)在處理特定問題時比傳統(tǒng)的對象和數(shù)組更高效、更直觀。
到此這篇關(guān)于TypeScript中Map和Set的實現(xiàn)示例 的文章就介紹到這了,更多相關(guān)TypeScript Map和Set內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家介紹了JavaScript原型對象的this指向問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
設(shè)置div的值想必大家都會吧，按要說動態(tài)設(shè)置想必知道的人及寥寥無幾了，下面有個不錯的示例，希望對大家有所幫助2013-10-10
js插件設(shè)置innerHTML時在IE8下提示“未知運行時錯誤”解決方法
這篇文章主要介紹了js插件設(shè)置innerHTML時在IE8下提示“未知運行時錯誤”解決方法,較為詳細(xì)的分析了錯誤的原因及對應(yīng)的解決方法,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了關(guān)于js變量的聲明賦值和更新的相關(guān)資料,對比var、let、const的作用域、提升及可變性,強(qiáng)調(diào)const聲明常量不可更改,但對象數(shù)組內(nèi)容可修改,需要的朋友可以參考下2025-06-06
頁面間固定參數(shù),通過cookie傳值的實現(xiàn)方法
下面小編就為大家?guī)硪黄撁骈g固定參數(shù),通過cookie傳值的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
JavaScript判斷圖片是否已經(jīng)加載完畢的方法匯總
在網(wǎng)上有很多關(guān)于判斷圖片是否已經(jīng)加載完畢的文章，但是有的瀏覽器并不適合，下面小編給大家分享一些有關(guān)JavaScript判斷圖片是否已經(jīng)加載完畢的方法匯總，需要的朋友參考下2016-02-02
JavaScript輸出斐波那契數(shù)列的實現(xiàn)方法
斐波那契數(shù)列來源于兔子繁殖問題,所以也叫兔子序列,下面這篇文章主要給大家介紹了關(guān)于JavaScript輸出斐波那契數(shù)列的實現(xiàn)方法,需要的朋友可以參考下2021-06-06
這篇文章主要為大家詳細(xì)介紹了JS制作圖形驗證碼實現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了Javascript 高階函數(shù)使用介紹,需要的朋友可以參考下2015-06-06
這篇文章主要給大家介紹了7種常見的前端攻擊,包括跨站腳本(XSS)、依賴庫風(fēng)險、跨站請求偽造(CSRF)、點擊劫持(Clickjacking)、內(nèi)容交付網(wǎng)絡(luò)(CDN)劫持、HTTPS降級和中間人攻擊,每種攻擊都有其攻擊方式和防御措施,需要的朋友可以參考下2024-11-11