我猜想,超過70%的JavaScript開發人員僅使用對象來收集和維護其項目中的數據。好吧,確實如此,新的集合對象(例如Map和Set)即使在2015年問世也沒有得到充分利用。
因此,今天,我將討論2015年以來的神奇新功能——Map,Set,WeakMap和WeakSet。
閱讀之前
- 這篇文章并不是要告訴你只能用它們。但我見過一些應聘者在編碼考試中使用了其中的一種,我喜歡在某些情況下使用它們。由你決定何時在項目中使用它們。
- 你應該知道什么是可迭代的,以便更好地了解我的討論。
Objects
我們應該首先討論如何使用對象。
好吧,我相信90%以上的人已經知道這部分內容了,因為你點擊這篇文章是為了了解新的集合對象,但對于JavaScript的初學者來說,我們還是簡單說說它們吧。
const algorithm = { site: "leetcode" }; console.log(algorithm.site); // leetcode for (const key in algorithm) { console.log(key, algorithm[key]); } // site leetcode delete algorithm.site; console.log(algorithm.site); // undefined
所以我做了一個 algorithm
對象,它的key和value是一個字符串類型的值,而我通過用 .
關鍵字來調用該值。
另外,for-in
循環也很適合在對象中循環。你可以用 []
關鍵字訪問其鍵對應的值。但是不能使用 for-of
循環,因為對象是不可迭代的。
對象的屬性可以用 delete
關鍵字來刪除。這樣就可以徹底擺脫對象的屬性,大家要注意不要和這種方法混淆。
const algorithm = { site: "leetcode" }; // Property is not removed!! algorithm.site = undefined; // Property is removed!! delete algorithm.site;
algorithm.site = undefined
只是將新值分配給 site
。
好的,我們已經快速討論了有關對象的一些事項:
- 如何添加屬性
- 如何遍歷對象
- 如何刪除屬性
Map
Map 是JavaScript中新的集合對象,其功能類似于對象。但是,與常規對象相比,存在一些主要差異。
首先,讓我們看一個創建Map對象的簡單示例。
如何添加屬性
const map = new Map(); // Map(0) {}
Map 不需要創建任何內容,但是添加數據的方式略有不同。
map.set('name', 'john'); // Map(1) {"name" => "john"}
Map 有一種特殊的方法可在其中添加稱為 set
的屬性。它有兩個參數:鍵是第一個參數,值是第二個參數。
map.set('phone', 'iPhone'); // Map(2) {"name" => "john", "phone" => "iPhone"} map.set('phone', 'iPhone'); // Map(2) {"name" => "john", "phone" => "iPhone"}
但是,它不允許你在其中添加現有數據。如果 Map 對象中已經存在與新數據的鍵對應的值,則不會添加新數據。
map.set('phone', 'Galaxy'); // Map(2) {"name" => "john", "phone" => "Galaxy"}
但是你可以用其他值覆蓋現有數據。
如何遍歷對象
Map 是一個可迭代的對象,這意味著可以使用 for-of
語句將其映射。
for (const item of map) { console.dir(item); } // Array(2) ["name", "john"] // Array(2) ["phone", "Galaxy"]
要記住的一件事是 Map 以數組形式提供數據,你應該解構數組或訪問每個索引以獲取鍵或值。
要僅獲取鍵或值,還有一些方法可供你使用。
map.keys(); // MapIterator {"name", "phone"} map.values(); // MapIterator {"john", "Galaxy"} map.entries(); // MapIterator {"name" => "john", "phone" => "Galaxy"}
你甚至可以使用展開操作符(...
)來獲取Map的全部數據,因為展開操作符還可以在幕后與可迭代對象一起工作。
const simpleSpreadedMap = [...map]; // [Array(2), Array(2)]
如何刪除屬性
從 Map 對象中刪除數據也很容易,你所需要做的就是調用 delete
。
map.delete('phone'); // true map.delete('fake'); // false
delete
返回布爾值,該布爾值指示 delete
函數是否成功刪除了數據。如果是,則返回 true
,否則返回 false
。
WeakMap
WeakMap起源于Map,因此它們彼此非常相似。但是,WeakMap具有很大的不同。
WeakMap的名字是怎么來的呢?嗯,是因為它與它的引用鏈接所指向的數據對象的連接或關系沒有Map的連接或關系那么強,所以它是弱的。
那么,這到底是什么意思呢?
差異1:key必須是對象
const John = { name: 'John' }; const weakMap = new WeakMap(); weakMap.set(John, 'student'); // WeakMap {{...} => "student"} weakMap.set('john', 'student'); // Uncaught TypeError: Invalid value used as weak map key
你可以將任何值作為鍵傳入Map對象,但WeakMap不同,它只接受一個對象作為鍵,否則,它將返回一個錯誤。
差異2:并非Map中的所有方法都支持
可以使用WeakMap的方法如下。
- delete
- get
- has
- set
這個話題最大的不同是WeakMap不支持迭代對象的方法。但是為什么呢?下面將對此進行描述。
區別3:當GC清理引用時,數據會被刪除
與Map相比,這是最大的不同。
let John = { major: "math" }; const map = new Map(); const weakMap = new WeakMap(); map.set(John, 'John'); weakMap.set(John, 'John'); John = null; /* John 被垃圾收集 */
當 John
對象被垃圾回收時,Map對象將保持引用鏈接,而WeakMap對象將丟失鏈接。所以當你使用WeakMap時,你應該考慮這個功能。
Set
Set也非常類似于Map,但是Set對于單個值更有用。
如何添加屬性
const set = new Set(); set.add(1); set.add('john'); set.add(BigInt(10)); // Set(4) {1, "john", 10n}
與Map一樣,Set也阻止我們添加相同的值。
set.add(5); // Set(1) {5} set.add(5); // Set(1) {5}
如何遍歷對象
由于Set是一個可迭代的對象,因此可以使用 for-of
或 forEach
語句。
for (const val of set) { console.dir(val); } // 1 // 'John' // 10n // 5 set.forEach(val => console.dir(val)); // 1 // 'John' // 10n // 5
如何刪除屬性
這一部分和 Map 的刪除完全一樣。如果數據被成功刪除,它返回 true
,否則返回 false
。
set.delete(5); // true set.delete(function(){}); // false;
如果你不想將相同的值添加到數組表單中,則Set可能會非常有用。
/* With Set */ const set = new Set(); set.add(1); set.add(2); set.add(2); set.add(3); set.add(3); // Set {1, 2, 3} // Converting to Array const arr = [ ...set ]; // [1, 2, 3] Object.prototype.toString.call(arr); // [object Array] /* Without Set */ const hasSameVal = val => ar.some(v === val); const ar = []; if (!hasSameVal(1)) ar.push(1); if (!hasSameVal(2)) ar.push(2); if (!hasSameVal(3)) ar.push(3);
WeakSet
與WeakMap一樣,WeakSet也將丟失對內部數據的訪問鏈接(如果內部數據已被垃圾收集)。
let John = { major: "math" }; const set = new Set(); const weakSet = new WeakSet(); set.add(John); // Set {{...}} weakSet.add(John); // WeakSet {{...}} John = null; /* John 被垃圾收集 */
一旦對象 John
被垃圾回收,WeakSet就無法訪問其引用 John
的數據。而且WeakSet不支持 for-of
或 forEach
,因為它不可迭代。
比較總結
相同點:添加相同的值不支持。
Map vs. WeakMap:WeakMap僅接受對象作為鍵,而Map不接受。
Map and Set:
- 可迭代的對象,支持
for..of
,forEach
或...
運算符 - 脫離GC關系
WeakMap and WeakSet:
- 不是一個可迭代的對象,不能循環。
- 如果引用數據被垃圾收集,則無法訪問數據。
- 支持較少的方法。
結語
不過,我想,很多團隊或公司還是沒有使用Maps或Sets。也許是因為他們覺得沒有必要,或者是因為數組仍然可以做到幾乎所有他們想要的東西。
然而,在JavaScript中,Maps或Sets可能是非常獨特和強大的東西,這取決于每個情況。所以我希望有一天,你能有機會使用它們。
原文地址:https://medium.com/better-programming/map-weakmap-set-weakset-in-javascript-77ecb5161e3
作者:Moon