一文詳解JS中的Map、Set、WeakMap和WeakSet
在JavaScript中,Map、Set、WeakMap和WeakSet是四個(gè)不同的數(shù)據(jù)結(jié)構(gòu),它們都有不同的特點(diǎn)和用途:
Map
:Map是一種鍵值對(duì)的集合,其中的鍵和值可以是任意類(lèi)型的。與對(duì)象類(lèi)似,它們可以通過(guò)鍵來(lái)訪問(wèn)值。不同之處在于,Map可以使用任意類(lèi)型作為鍵,而對(duì)象只能使用字符串或Symbol類(lèi)型作為鍵。Map還提供了許多有用的方法,例如size屬性來(lái)獲取鍵值對(duì)的數(shù)量,以及forEach()方法來(lái)遍歷集合。Set
:Set是一種值的集合,其中每個(gè)值都是唯一的。與數(shù)組不同,它們沒(méi)有重復(fù)的元素,并且沒(méi)有特定的順序。Set提供了許多有用的方法,例如add()方法來(lái)添加新的值,delete()方法來(lái)刪除值,has()方法來(lái)檢查是否存在某個(gè)值,以及size屬性來(lái)獲取集合的大小。WeakMap
:WeakMap與Map類(lèi)似,也是一種鍵值對(duì)的集合。然而,它們的鍵必須是對(duì)象,而值可以是任何類(lèi)型。與Map不同的是,WeakMap的鍵是弱引用,也就是說(shuō),如果鍵對(duì)象沒(méi)有被其他地方引用,則它們可以被垃圾回收。這使得WeakMap非常適合緩存數(shù)據(jù),因?yàn)楫?dāng)對(duì)象不再需要時(shí),它們可以自動(dòng)從WeakMap中刪除,從而釋放內(nèi)存。WeakSet
:WeakSet是一種值的集合,其中每個(gè)值都是唯一的,并且沒(méi)有特定的順序。與Set不同的是,它們的值也是弱引用的,因此可以被垃圾回收。WeakSet通常用于存儲(chǔ)對(duì)象的引用,以避免內(nèi)存泄漏。
下面是Map、Set、WeakMap和WeakSet的例子:
1. Map:
const myMap = new Map(); const key1 = 'key1'; const key2 = { name: 'John' }; const key3 = function () { console.log('Hello!'); }; myMap.set(key1, 'value1'); myMap.set(key2, 'value2'); myMap.set(key3, 'value3'); console.log(myMap.get(key1)); // 'value1' console.log(myMap.get(key2)); // 'value2' console.log(myMap.get(key3)); // 'value3' console.log(myMap.size); // 3
在這個(gè)例子中,我們創(chuàng)建了一個(gè)Map
對(duì)象,并使用三個(gè)不同類(lèi)型的鍵(key1、key2、key3)
來(lái)存儲(chǔ)三個(gè)值(value1、value2、value3)
。我們可以使用get()
方法來(lái)獲取相應(yīng)的值,使用size
屬性來(lái)獲取鍵值對(duì)的數(shù)量。
2. Set:
const mySet = new Set(); mySet.add('value1'); mySet.add('value2'); mySet.add('value3'); console.log(mySet.has('value1')); // true console.log(mySet.has('value4')); // false console.log(mySet.size); // 3 mySet.delete('value2'); console.log(mySet.size); // 2
在這個(gè)例子中,我們創(chuàng)建了一個(gè)Set
對(duì)象,并使用add()
方法向其中添加三個(gè)值(value1、value2、value3)
。我們可以使用has()
方法來(lái)檢查集合中是否存在某個(gè)值,使用size
屬性來(lái)獲取集合的大小,使用delete()
方法來(lái)刪除值。
3. WeakMap:
let key1 = { name: 'John' }; let key2 = { name: 'Mary' }; let weakMap = new WeakMap(); weakMap.set(key1, 'value1'); weakMap.set(key2, 'value2'); key1 = null; console.log(weakMap.get(key1)); // undefined console.log(weakMap.get(key2)); // 'value2'
在這個(gè)例子中,我們創(chuàng)建了一個(gè)WeakMap
對(duì)象,并使用兩個(gè)對(duì)象鍵(key1、key2)
來(lái)存儲(chǔ)兩個(gè)值(value1、value2)
。然后我們將key1
賦值為null,這將導(dǎo)致key1對(duì)象被垃圾回收,它們與值value1
一起被從WeakMap
中刪除。當(dāng)我們使用get()
方法嘗試訪問(wèn)已經(jīng)被刪除的鍵時(shí),返回undefined。
4. WeakSet:
let obj1 = { name: 'John' }; let obj2 = { name: 'Mary' }; let weakSet = new WeakSet([obj1, obj2]); console.log(weakSet.has(obj1)); // true obj1 = null; console.log(weakSet.has(obj1)); // false
在這個(gè)例子中,我們創(chuàng)建了一個(gè)WeakSet
對(duì)象,并向其中添加兩個(gè)對(duì)象(obj1、obj2)
。我們可以使用has()
方法檢查WeakSet
中是否存在某個(gè)對(duì)象,當(dāng)我們將obj1
賦值為null時(shí),它們與值一起被從WeakSet
中刪除。當(dāng)我們使用has()
方法嘗試訪問(wèn)已經(jīng)被刪除的對(duì)象時(shí),返回false。
下面是Map、Set、WeakMap和WeakSet之間的區(qū)別和使用場(chǎng)景:
1. Map和Set:
Map
和Set
都是集合數(shù)據(jù)結(jié)構(gòu),不同之處在于:
- Map存儲(chǔ)鍵值對(duì),可以使用任何類(lèi)型作為鍵,而Set只存儲(chǔ)值,并且每個(gè)值必須是唯一的。
- Map提供了更多的方法來(lái)操作鍵值對(duì),如get()、set()和size屬性等。而Set則提供了更多的方法來(lái)操作值,如add()、delete()和has()等。
使用場(chǎng)景:
- 當(dāng)需要存儲(chǔ)鍵值對(duì)并且需要使用鍵來(lái)訪問(wèn)值時(shí),可以使用
Map
。 - 當(dāng)需要存儲(chǔ)唯一的值時(shí),可以使用
Set
。
2. WeakMap和WeakSet:
WeakMap
和WeakSet
與Map
和Set
類(lèi)似,但是它們的鍵或值是弱引用,也就是說(shuō)當(dāng)鍵或值對(duì)象沒(méi)有其他引用時(shí),它們可以被垃圾回收,不會(huì)影響程序的內(nèi)存使用情況。不同之處在于:
- WeakMap和WeakSet只能使用對(duì)象作為鍵或值。
- WeakMap和WeakSet沒(méi)有size屬性,因?yàn)槠鋬?nèi)容可能會(huì)隨時(shí)被垃圾回收。
使用場(chǎng)景:
- 當(dāng)需要存儲(chǔ)需要進(jìn)行垃圾回收的對(duì)象,并且這些對(duì)象只能被作為鍵或值來(lái)存儲(chǔ)時(shí),可以使用
WeakMap
和WeakSet
。 - 當(dāng)需要在內(nèi)存受限的情況下使用緩存時(shí),可以使用
WeakMap
和WeakSet
來(lái)存儲(chǔ)數(shù)據(jù),因?yàn)樗鼈儠?huì)隨時(shí)被垃圾回收,從而釋放內(nèi)存。
到此這篇關(guān)于一文詳解JS中的Map、Set、WeakMap和WeakSet的文章就介紹到這了,更多相關(guān)JS中Map、Set、WeakMap和WeakSet內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 一文帶你徹底搞懂JS中的Map與Set
- JavaScript中Set和Map數(shù)據(jù)結(jié)構(gòu)使用場(chǎng)景詳解
- javascript中Set、Map、WeakSet、WeakMap區(qū)別
- javascript?ES6中set集合、map集合使用方法詳解與源碼實(shí)例
- JavaScript Set與Map數(shù)據(jù)結(jié)構(gòu)詳細(xì)分析
- js中Map和Set的用法及區(qū)別實(shí)例詳解
- JavaScript之Map和Set_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
- 詳談js遍歷集合(Array,Map,Set)
- ES6學(xué)習(xí)總結(jié)之Set和Map的使用
相關(guān)文章
JS highcharts動(dòng)態(tài)柱狀圖原理及實(shí)現(xiàn)
這篇文章主要介紹了JS highcharts動(dòng)態(tài)柱狀圖原理及實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10javascript獲取xml節(jié)點(diǎn)的最大值(實(shí)現(xiàn)代碼)
這篇文章主要介紹了利用javascript獲取xml節(jié)點(diǎn)的最大值。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12js 數(shù)組操作之pop,push,unshift,splice,shift
本篇文章主要介紹了js數(shù)組操作之pop,push,unshift,splice,shift。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01javascript溫習(xí)的一些筆記 基礎(chǔ)常用知識(shí)小結(jié)
在電腦上找到多年前的javascript的一些小筆記,因?yàn)橐獙⒐P記本上面的文件整理一下, 不用的刪除掉, 所以將此篇筆記再發(fā)布一下,存檔到自己的博客吧, 電腦上的文件就刪除了2011-06-06JavaScript通過(guò)元素的ID和name設(shè)置樣式
這篇文章主要介紹了JavaScript通過(guò)元素的ID和name設(shè)置其樣式,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以測(cè)試下2014-07-07e.target與e.currentTarget對(duì)象的使用區(qū)別詳解
這篇文章主要為大家介紹了e.target與e.currentTarget的使用區(qū)別示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07js 能實(shí)現(xiàn)監(jiān)聽(tīng)F5頁(yè)面刷新子iframe 而父頁(yè)面不刷新的方法
下面小編就為大家?guī)?lái)一篇js 能實(shí)現(xiàn)監(jiān)聽(tīng)F5頁(yè)面刷新子iframe 而父頁(yè)面不刷新的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11JavaScript中時(shí)間日期函數(shù)new?Date()詳解(5種獲取時(shí)間戳的函數(shù))
這篇文章主要給大家介紹了關(guān)于JavaScript中時(shí)間日期函數(shù)new?Date()的相關(guān)資料,主要講的是JS中5種獲取時(shí)間戳的函數(shù),new Date()是JavaScript中用于獲取當(dāng)前日期和時(shí)間的內(nèi)置函數(shù),需要的朋友可以參考下2024-04-04JavaScript實(shí)現(xiàn)圖形驗(yàn)證碼完整代碼
很多小伙伴都在學(xué)習(xí)JavaScript,可能也會(huì)有老師提出這樣一個(gè)問(wèn)題,如何用js編寫(xiě)一個(gè)簡(jiǎn)單的驗(yàn)證碼,這里就和大家分享一下,這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)圖形驗(yàn)證碼的相關(guān)資料,需要的朋友可以參考下2024-01-01