第十六节：ES6新增的 Set 和 WeakSet 是什么东西？
????????題外話：往后的章節，跟前面的章節聯系越來越緊密，很多知識的講解建立在前面章節的學習基礎上，如果是新來的同學，建議從第一節學起。如果是忘記了前面的內容，前端君也會在適當的時候，加上跳轉鏈接。
?
什么是Set結構
????????Set是ES6給開發者帶來的一種新的數據結構，你可以理解為值的集合。我們平時見到的數組Array也是一種數據結構，但是Set跟其他數據結構不同的地方就在于：它的值不會有重復項。
基本用法
????????我們從最基本的學起，Set的用法：
? ?var s = new Set();
? ?console.log(s);
? ?//打印結果：Set {}
????????Set本身是一個構造函數，你可以理解為一個類，使用的時候需要用new來創建一個實例。以上的案例就是這樣創建出一個Set結構，我們打印出來看看，控制臺輸出：Set{ }。
????????它不是值的集合嗎，那如果我們想給Set對象增加一些值成員，我們要怎么做？
????????你可以這樣：
? ?var s = new Set([1,2,3]);
? ?console.log(s);
? ?//打印結果：Set {1, 2, 3}
????????案例中，用數組[ 1,2,3 ]作為參數傳入，得到的變量s為Set { 1, 2, 3 }。
?
????????除了上面的方法，你還可以這樣：
? ?var s = new Set();
? ?//使用add方法添加成員
? ?s.add(1);
? ?s.add(2);
? ?s.add(3);
? ?console.log(s);
? ?//打印結果：Set {1, 2, 3}
????????如果你不想用數組作為參數來傳值初始化變量s，你還可以通過Set 結構提供的add方法來添加方法，也是沒問題的。
成員值唯一
????????不過，為Set 結構添加成員值的時候，要注意一點是，set結構的成員值是沒有重復的，每個值都是唯一的，如果人為地給它添加相同的成員值，會發生什么呢？
????????試試不就知道了嘛：
? ?var s = new Set();
? ?s.add(1);
? ?s.add(1);
? ?console.log(s);
? ?//打印結果： Set {1}
????????很明顯，set結構會自動忽略相同的值，只會保留一個相同的值。
?
????????Set 結構除了提供add方法用于添加成員以外，還提供了哪些方法和屬性呢？
size屬性
????????size屬性：獲取成員的個數。
? ?let s = new Set([1,2,3,4]);
? ?s.size; //結果：4
????????結果為4，跟我們預期一致，很簡單。
delete( )方法
????????delete( )方法：用戶刪除Set結構中的指定值，刪除成功返回：true，刪除失敗返回：fasle。
? ?//用數組作為參數初始化
? ?var s = new Set([1,2,3]);
? ?console.log(s);
? ?//打印結果：Set {1, 2, 3}
? ?//使用delete方法刪除指定值
? ?s.delete(2);//結果：true
? ?s.delete(4);//結果：false
? ?console.log(s);
? ?//打印結果：Set {1, 3}
????????案例中，我們使用delete( )方法刪除了指定值：2，結果返回true。刪除指定值：4的時候，返回false，原因是變量s中找不到數字4。
?
????????當Set結構的成員比較多，你覺得一個一個刪除比較麻煩的時候，你可以用下面這個方法。
?
clear( )方法
????????clear( )方法：清除所有成員。
? ?//用數組作為參數初始化
? ?var s = new Set([1,2,3]);
? ?console.log(s);
? ?//打印結果：Set {1, 2, 3}
? ?s.clear();
? ?console.log(s);
? ?//打印結果：Set {}
????????上面的代碼中，在使用clear( )方法之前和之后都打印了變量s的值，我們看到，clear( )方法使用之后，Set結構的成員都被清除了，一個不留。
?
has( )方法
????????has( )方法：判斷set結構中是否含有指定的值。如果有，返回true；如果沒有，返回fasle。
? ?//用數組作為參數初始化
? ?var s = new Set([1,2,3]);
? ?s.has(1);//結果：true
? ?s.has(4);//結果：false
????????當判斷變量s中是否含有數字1時，得到的結果是true，判斷是否含有數字4的時候，得到的結果是false。
?
????????還記得ES6為數組帶來的entries( )函數用于遍歷數組，第八節有講解，點擊可查看；Set結構也提供了這樣的方法。
entries( )方法
????????entries( )方法：返回一個鍵值對的遍歷器。
? ?//用數組作為參數初始化
? ?var s = new Set(['a','b','c']);
? ?s.entries();
? ?//結果：SetIterator {["a", "a"], ["b", "b"], ["c", "c"]}
????????注意得到的結果，成員值“a”對應的鍵值對是[“a”,”a”]，也就是說：Set結構是鍵名和鍵值是同一個值。
?
keys( ) 和 values( ) 方法
????????keys( )方法：返回鍵名的遍歷器。
????????values( )方法：返回鍵值的遍歷器。
? ?//用數組作為參數初始化
? ?var s = new Set(['a','b','c']);
? ?s.keys();
? ?//結果：SetIterator {"a", "b", "c"}
? ?s.values();
? ?//結果：SetIterator {"a", "b", "c"}
????????我把兩個函數放在一起演示，是因為上面entries()方法的使用告訴我們，Set結構的鍵名和鍵值是同一個值，那么我們就用Set結構提供的keys( )和values()方法來檢驗一下。從得到的結果可以看出：兩者確實一致。
????????我們在第十二節講過，for...of可以遍歷set和map結構等具有遍歷器接口的數據結構。正好上面說的entries()方法、key()方法、values( )方法會返回遍歷器，我們來補回用for...of遍歷Set結構的講解。
? ?//用數組作為參數初始化
? ?var s = new Set(['a','b','c']);
? ?//用for...of遍歷
? ?for(let [i,v] of s.entries()){
??? ? ? console.log(i+' '+v);
? ?}
? ?//打印結果：a? a ? ?
? ?//?????? ??b? b ?
? ?//?????? ??c? c? ?
????????我們用其中的entries( )方法演示（keys( )和values( )用法一樣），可以看得出，用法和數組的for...of遍歷是一樣的。
?
????????除了提供以上三個方法對Set結構進行遍歷以外，你還可以用這個方法遍歷。
forEach( )方法
????????forEach( )方法：遍歷每一個成員。
? ?//用數組作為參數初始化
? ?var s = new Set(['a','b','c']);
? ?//使用回調函數遍歷每個成員
? ?s.forEach(function(value,key){
?? ? ?? console.log(value,key)
? ?});
? ?//打印結果：a? a
? ?//??????? ?b? b
? ?//?????? ??c? c
????????使用方式跟數組的forEach一樣。當然，得到的value是key的值是一樣的。
?
Set的用途之一
????????利用Set結構的成員值不能重復的特點，我們可以輕松的完成一些效果。
????????比如：有一天面試官要小菜實現數組去重的效果。
????????這個時候，小菜想起了ES6的Set結構的特性，再也不需要去遍歷數組的元素，然后再一個個對比了。
????????然后自信地寫起下了代碼：
? ?? ?//目標數組arr，要求去重
? ?let arr = [1,2,2,3,4,4,4];
? ?let s = new Set(arr);
? ?//結果：Set {1,2,3,4}
? ?let newArr = Array.from(s);
? ?//結果：[1,2,3,4],完成去重
????????上面的代碼重點是一個含有重復元素的數組，作為參數，用于初始化一個Set實例對象，因為Set結構不會含有重復成員，就會自動忽略相同的元素，只保留一個相同的值。????????
????????看到答案以后，面試官微笑的點點頭~~~最后，小菜覺得上班路途太遠，拒絕了該公司的offer！（傲嬌臉）
?
????????上面用到的Array.from( )，屬于ES6為數組擴展的特性第八節有講解，點擊可查看。
WeakSet結構
????????講到Set結構，就不能不講WeakSet結構。Set和WeakSet兩者名字就很像，注定它們有很多一樣的地方。
?
????????WeakSet結構同樣不會存儲重復的值，不同的是，它的成員必須是對象類型的值。（嚴格來說是：具有 iterable 接口的對象）
? ?//初始化一個WeakSet對象
? ?let ws = new WeakSet([{"age":18}]);
? ?//結果：WeakSet {Object {age: 18}}
????????我們初始化一個WeakSet對象，參數一個數組，數組的成員必須是對象類型的值{"age":18}，否則就會報錯。
? ?//初始化一個WeakSet對象
? ?let ws = new WeakSet([1,2]);
? ?//結果：報錯
????????以上的寫法就會報錯，因為數組的元素不是對象類型的，是數字1,2。
????????實際上，任何可遍歷的對象，都可以作為WeakSet的初始化參數。比如：數組。
? ?let arr1 = [1];
? ?let arr2 = [2];
? ?//初始化一個WeakSet對象,參數是數組類型
? ?let ws = new WeakSet([arr1,arr2]);
? ?//結果：WeakSet {Object {age: 18}}
?
????????同樣，WeakSet結構也提供了add( ) 方法，delete( ) 方法，has( )方法給開發者使用，作用與用法跟Set結構完全一致。
?
????????另一個不同點是：WeakSet 結構不可遍歷。因為它的成員都是對象的弱引用，隨時被回收機制回收，成員消失。所以WeakSet 結構不會有keys( )，values( )，entries( )，forEach( )等方法和size屬性。
????????挺長的一個章節......
本節小結
總結：ES6新增了Set結構，用于都是存儲不重復的成員值，提供了一些方法和屬性供開發者使用；類似的結構還有WeakSet結構，不同點是后者的成員必須是對象類型，且不支持遍歷操作。
總結
以上是生活随笔為你收集整理的第十六节：ES6新增的 Set 和 WeakSet 是什么东西？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： center.php,mycenter.
- 下一篇： 往电子书里面挂书签