1. 程式人生 > >ES6 Set 和 Map

ES6 Set 和 Map

bsp 無法 style 9.png 分享 http es5 scrip null

ES5 模擬Set 與 Map 集合

技術分享圖片Set 常用於檢查對象中是否存在某個鍵名

技術分享圖片Map集合常被用於獲取已存的信息

所有對象的屬性名必須是字符串,那麽必須確保每個鍵名都是字符串類型且在對象中是唯一的

數值類型和對象類型的鍵名會自動轉換為字符串類型

技術分享圖片key1和key2被轉換為對象對應的默認字符串"[object Object]"

技術分享圖片本意是檢查count屬性是否存在,value為1,為真,若如果value為0或者不存在,if都不會執行

ES6 中的Set集合

一種有序列表,其中含有一些相互獨立的非重復值

(1)創建Set並增加元素

技術分享圖片Set 集合不會對所存值進行強制類型轉換,

技術分享圖片key1 和 key2 不會轉換為字符串,所以它們在Set中是獨立的元素

初始化Set

技術分享圖片會自動過濾掉重復的值

可以用has() 方法檢測Set中是否有某個值

技術分享圖片

移除元素

delete() 方法可以移除Set集合中某一個元素,clear() 方法會移除集合中的所有元素

Set 集合轉換為數組

技術分享圖片

Weak Set 集合(弱引用集合)

將對象存儲在Set的實例與存儲在變量中完全一樣,只要Set實例中的引用存在,垃圾回收機制就不會釋放該對象的內存空間

技術分享圖片Set的原始對象的引用一直保留,會造成內存泄漏

Weak Set 集合只存儲對象的弱引用,並且不可以存儲原始值;集合中的弱引用如果是對象唯一的引用,則會被回收被釋放內存

技術分享圖片

WeakSet 構造函數不接受任何原始值,如果數組中包含其他非對象值,程序會拋出錯誤

技術分享圖片

與Set集合的主要區別,WeakSet保存的是對象值的弱引用

技術分享圖片

另外

(1)WeakSet 不支持原始值

(2)Weak Set集合不可以叠代,不支持for-of循環

(3)不暴露任何叠代器, keys() 或values()方法

(4)Weak Set 集合不支持forEach() 方法

(5)不支持size屬性

ES6 中的 Map 集合

Map 類型 是一種存儲著許多鍵值對的有序列表,其中的鍵名和對應的值支持所有的數據類型

鍵名的等價性是通過Object.is() 實現的,所有5 和 "5" 會被判定為兩種數據類型

與對象不一樣,對象的屬性名總會被強制轉換為字符串類型

向Map集合中添加新元素

技術分享圖片調用get方法時,如果鍵名不存在,則返回undefined

Map集合支持的方法

has(key) 檢測指定的鍵名在Map集合中是否存在

delete(key) 從Map集合中移出鍵值對

clear() 移出Map集合中所有鍵值對

Map集合的初始化方法

技術分享圖片

向Map構造函數傳入數組來初始化Map集合,每個元素都是一個子數組,包含一個鍵值對,兩個元素

Map集合的forEach() 方法 與Set 和 數組 類似,接收三個參數

(1)Map集合中下一次索引的位置

(2)值對應地鍵名

(3)Map集合本身

技術分享圖片可以指定forEach函數的第二個參數作為回調函數的this值

Weak Map 集合

Weak Map 集合的鍵名必須是一個對象,如果使用非對象鍵名會報錯,集合中保存著這些對象的弱引用,

如果在弱引用之外不存在其他的強引用,引擎的垃圾回收機制會自動回收這個對象,同時也會移除Weak Map 裏面的鍵值對

但只有集合的鍵名遵從這個規則,鍵名對應的值如果是一個對象,則保存的是對象的強引用,不會觸發垃圾回收機制

Weak Map 集合最大的用途是保存Web頁面中的DOM元素,一些為Web頁面打造的JavaScript庫,會通過自定義的對象保存每一個引用的DOM元素

一旦從Web頁面中移除保存過的DOM元素,如果通過庫本身將這些對象從集合中移除,

否則,可能因為庫過於龐大而導致內存泄漏,WeakMap可以解決這個問題

技術分享圖片

Weak Map 集合也不支持size屬性,所以無法驗證其是否為空,

WeakMap集合的初始化方法

技術分享圖片傳入的鍵值必須為非null的對象

不支持鍵名枚舉,所以不支持clear()方法

WeakMap用來存儲私有數據

技術分享圖片

ES6 Set 和 Map