TypeScript中Map和Set的實現(xiàn)示例
一、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) - 獲取鍵對應的值
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'); // 錯誤,值應該是number類型 // 復雜類型示例 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 會維護鍵值對的插入順序
- Map 可以直接遍歷,而對象需要先獲取鍵數(shù)組
6.使用場景
- 需要鍵不是字符串/數(shù)字/Symbol的情況
- 需要頻繁增刪鍵值對的場景
- 需要維護插入順序的場景
- 需要更便捷的遍歷和大小獲取的場景
二、Set(集合)
Set 是 ES6 引入的另一種數(shù)據(jù)結(jié)構(gòu),它類似于數(shù)組,但成員的值都是唯一的,沒有重復的值。
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本身(可以鏈式調(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ù)設計為與Map的forEach一致 });
4.TypeScript 中的類型定義
// 明確指定值的類型 const typedSet = new Set<number>(); typedSet.add(1); // 正確 typedSet.add('1'); // 錯誤,值應該是number類型 // 復雜類型示例 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ù)組 |
---|---|---|
唯一性 | 值唯一 | 允許重復值 |
查找效率 | has方法O(1) | includes/indexOf O(n) |
添加元素 | add方法 | push/unshift等方法 |
刪除元素 | delete方法 | splice/filter等方法 |
順序 | 插入順序 | 可排序 |
索引訪問 | 不支持 | 支持下標訪問 |
大小獲取 | size屬性 | length屬性 |
內(nèi)存占用 | 通常比數(shù)組多 | 通常更節(jié)省內(nèi)存 |
6.使用場景
- 需要存儲唯一值的場景
- 需要快速檢查某個值是否存在的場景
- 需要去重的場景
- 數(shù)學集合運算(并集、交集、差集)
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)平均時間復雜度為 O(1),比數(shù)組的 O(n) 快
- 插入速度:Map 和 Set 的插入操作平均時間復雜度為 O(1)
- 刪除速度:Map 和 Set 的刪除操作平均時間復雜度為 O(1)
- 內(nèi)存占用:Map 和 Set 通常比對象和數(shù)組占用更多內(nèi)存
- 迭代性能:Map和Set的迭代速度與數(shù)組相當,對象迭代需要Object.keys等額外步驟
四、應用建議
- 類型安全:
// 總是明確指定泛型類型 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ù)集,考慮預分配大小
不可變數(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
- 需要嚴格維護插入順序 → 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)文章
個人總結(jié)的一些JavaScript技巧、實用函數(shù)、簡潔方法、編程細節(jié)
這篇文章主要介紹了個人總結(jié)的一些JavaScript技巧、實用函數(shù)、簡潔方法、編程細節(jié),本文講解了變量轉(zhuǎn)換、取整同時轉(zhuǎn)換成數(shù)值型、日期轉(zhuǎn)數(shù)值、類數(shù)組對象轉(zhuǎn)數(shù)組、進制之間的轉(zhuǎn)換等方法技巧,需要的朋友可以參考下2015-06-06基于javascript實現(xiàn)數(shù)字英文驗證碼
這篇文章主要為大家詳細介紹了javascript實現(xiàn)數(shù)字英文驗證碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01微信小程序網(wǎng)絡數(shù)據(jù)請求的實現(xiàn)詳解
這篇文章主要為大家介紹了微信小程序網(wǎng)絡數(shù)據(jù)請求的實現(xiàn)講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08原生JS版和jquery版實現(xiàn)checkbox的全選/全不選/點選/行內(nèi)點選(Mr.Think)
腳本之家小編之前整理不少checkbox全選全不選這方便的文章,但看了這篇以后發(fā)現(xiàn)實現(xiàn)方法更好2016-10-10