【ES6基礎】Set 與 WeakSet

時間 2019-11-06

原文原文鏈接

在開發過程當中，咱們會常常使用到數組Array這種引用類型的數據結構，並十分清楚數組是種有序的集合，而且每一個元素均可以使用數字下標的形式獲取。可是在一些業務場景中，咱們並不須要集合維護一個有序的狀態，甚至有些場景須要無序集合，所以ES6里加入了無序集合Set和其的Weak版本WeakSet。javascript

其實無序集合的概念十分容易理解，咱們能夠認爲是沒有排序概念的數組，而且具備元素不可重複的特性。前端

這篇文章筆者將從如下幾方面進行介紹：java

Set代碼示例
Set和Array的區別
Set經常使用方法
WeakSet介紹

本篇文章閱讀時間預計5分鐘數組

Set代碼示例

Set須要使用新語法new Set()聲明，代碼以下：微信

let set = new Set("Hello!!!");
set.add(12); //add 12
console.log(set.has("!")); //check if value exists
console.log(set.size);
set.delete(12); //delete 12
console.log(...set);
set.clear(); //delete all values」
//output
//true
//6
//H e l o !複製代碼

這段代碼咱們向Set集合裏添加了一個字符串和數字，字符串在Set集合裏會被拆分紅字符進行存儲，因爲Set集合去重的特色，l和!重複將會被去重（ Set { 'h', 'e', 'l', 'o' ,'!'}），使用add方法添加了12到Set集合裏，所以集合的大小是6。數據結構

Set與Array的區別

如下表格爲Array和Set的區別函數

對比項	Array	Set
元素序列	有序	無序
元素可重複性	元素可重複	元素不可重複

Set經常使用方法

如下表格羅列了Set相關的方法post

方法	介紹
set.add(value)	添加元素到集合內
set.delete(value)	刪除元素的指定元素
set.clear()	清空集合內元素
set.forEach(callbackFn,[,context])	遍歷集合內全部元素，並做爲CallbackFn的參數進行調用
set.has(value)	檢查集合內是否含有某元素

添加刪除清空

const set=new Set();
set
 .add(1)
 .add(2)
 .add(3)
 .add(3);//不起做用，由於3已經在集合中
console.log(set);//output Set { 1, 2, 3 }

//刪除元素
set.delete(2);
console.log(set);//output Set {1,3}

//清空集合
set.clear();
console.log(set); //output Set{}
複製代碼

檢查元素

由於Set集合裏沒有排序的概念，所以咱們沒法使用Array的IndexOf的方法判斷是否大於0來檢驗是否含有某元素，ES6裏使用了更簡潔、更易懂的方法來檢驗是否含有某元素。優化

const set=new Set([1,2,3,4]);
set.has(2) //output true;
set.has(5) //output false;
複製代碼

遍歷元素

集合對象自身定義了forEach方法，跟數組類型的foreach同樣,示例代碼以下：ui

const set=new Set([1,2,3,4]);
set.forEach(item=>{
  console.log(item);
})
//output
//1
//2
//3
//4
複製代碼

WeakSet介紹

JavaScript垃圾回收是一種內存管理技術。在這種技術中，再也不被引用的對象會被自動刪除，而與其相關的資源也會被一同回收。Set中對象的引用都是強類型化的，並不會容許垃圾回收。這樣一來，若是Set中引用了再也不須要的大型對象，如已經從DOM樹中刪除的DOM元素，那麼其回收代價是昂貴的。

爲了解決這個問題，ES6還引入了WeakSet的弱集合。這些集合之因此是「弱的」，是由於它們容許從內存中清除再也不須要的被這些集合所引用的對象。

首先讓咱們瞭解下WeakSet與Set的不一樣，如下三點是WeakSet與Set不同的地方：

Set能夠存儲值類型和對象引用類型，而WeakSet只能存儲對象引用類型，不然會拋出TypeError。
WeakSet不能包含無引用的對象，不然會被自動清除出集合（垃圾回收機制）。
WeakSet對象是不可枚舉的，也就是說沒法獲取大小，也沒法獲取其中包含的元素。

以下段的代碼驗證了上述特性：

let weakset = new WeakSet();
(function(){ 
   let a = {}; 
   weakset.add(1); //TypeError: Invalid value used in weak set
   weakset.add(a);
})();  //here 'a' is garbage collected from weakset
console.log()
console.log(weakset.size); //output "undefined"
console.log(...weakset); //Exception is thrown
weakset.clear(); //Exception, no such function
複製代碼

const weakset=new WeakSet();
let foo={bar:1};
weakset.add(foo);
console.log(weakset.has(foo)); //output true
foo=null;
console.log(weakset.has(foo)); //output false
複製代碼