es6學習筆記7--Set

Set

基本用法

ES6提供了新的數據結構Set。它類似於數組，但是成員的值都是唯一的，沒有重復的值。

Set本身是一個構造函數，用來生成Set數據結構。

var s = new Set();

[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4

上面代碼通過add方法向Set結構加入成員，結果表明Set結構不會添加重復的值。

Set函數可以接受一個數組（或類似數組的對象）作為參數，用來初始化。

// 例一
var set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

// 例二
var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

// 例三
function divs () {
  return [...document.querySelectorAll('div')];
}

var set = new Set(divs());
set.size // 56

// 類似於
divs().forEach(div => set.add(div));
set.size // 56

上面代碼中，例一和例二都是Set函數接受數組作為參數，例三是接受類似數組的對象作為參數。

上面代碼中，也展示了一種去除數組重復成員的方法。

// 去除數組的重復成員
[...new Set(array)]

向Set加入值的時候，不會發生類型轉換，所以5和"5"是兩個不同的值。Set內部判斷兩個值是否不同，使用的算法叫做“Same-value equality”，它類似於精確相等運算符（===），主要的區別是NaN等於自身，而精確相等運算符認為NaN不等於自身。在Set內部，兩個NaN是相等。

Set實例的屬性和方法

Set結構的實例有以下屬性。

• Set.prototype.constructor：構造函數，默認就是Set函數。
• Set.prototype.size：返回Set實例的成員總數。

Set實例的方法分為兩大類：操作方法（用於操作數據）和遍歷方法（用於遍歷成員）。下面先介紹四個操作方法。

• add(value)：添加某個值，返回Set結構本身。
• delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。
• has(value)：返回一個布爾值，表示該值是否為Set的成員。
• clear()：清除所有成員，沒有返回值。

上面這些屬性和方法的實例如下。

s.add(1).add(2).add(2);
// 注意2被加入了兩次

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2);
s.has(2) // false

Array.from方法可以將Set結構轉為數組。

var items = new Set([1, 2, 3, 4, 5]);
var array = Array.from(items);

這就提供了去除數組重復成員的另一種方法。

function dedupe(array) {
  return Array.from(new Set(array));
}

dedupe([1, 1, 2, 3]) // [1, 2, 3]

遍歷操作

Set結構的實例有四個遍歷方法，可以用於遍歷成員。

• keys()：返回一個鍵名的遍歷器
• values()：返回一個鍵值的遍歷器
• entries()：返回一個鍵值對的遍歷器
• forEach()：使用回調函數遍歷每個成員

key方法、value方法、entries方法返回的都是遍歷器對象。由於Set結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值），所以key方法和value方法的行為完全一致。

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

Set結構的實例默認可遍歷，它的默認遍歷器生成函數就是它的values方法。

Set.prototype[Symbol.iterator] === Set.prototype.values
// true

這意味着，可以省略values方法，直接用for...of循環遍歷Set。

WeakSet

WeakSet結構與Set類似，也是不重復的值的集合。但是，它與Set有兩個區別。

首先，WeakSet的成員只能是對象，而不能是其他類型的值。

其次，WeakSet中的對象都是弱引用，即垃圾回收機制不考慮WeakSet對該對象的引用，也就是說，如果其他對象都不再引用該對象，那么垃圾回收機制會自動回收該對象所占用的內存，不考慮該對象還存在於WeakSet之中。這個特點意味着，無法引用WeakSet的成員，因此WeakSet是不可遍歷的。

var ws = new WeakSet();
ws.add(1)
// TypeError: Invalid value used in weak set
ws.add(Symbol())
// TypeError: invalid value used in weak set

上面代碼試圖向WeakSet添加一個數值和Symbol值，結果報錯，因為WeakSet只能放置對象。

WeakSet是一個構造函數，可以使用new命令，創建WeakSet數據結構。

var ws = new WeakSet();

作為構造函數，WeakSet可以接受一個數組或類似數組的對象作為參數。（實際上，任何具有iterable接口的對象，都可以作為WeakSet的參數。）該數組的所有成員，都會自動成為WeakSet實例對象的成員。

WeakSet結構有以下三個方法。

• WeakSet.prototype.add(value)：向WeakSet實例添加一個新成員。
• WeakSet.prototype.delete(value)：清除WeakSet實例的指定成員。
• WeakSet.prototype.has(value)：返回一個布爾值，表示某個值是否在WeakSet實例之中。

下面是一個例子。

var ws = new WeakSet();
var obj = {};
var foo = {};

ws.add(window);
ws.add(obj);

ws.has(window); // true
ws.has(foo);    // false

ws.delete(window);
ws.has(window);    // false

WeakSet沒有size屬性，沒有辦法遍歷它的成員。

WeakSet不能遍歷，是因為成員都是弱引用，隨時可能消失，遍歷機制無法保證成員的存在，很可能剛剛遍歷結束，成員就取不到了。WeakSet的一個用處，是儲存DOM節點，而不用擔心這些節點從文檔移除時，會引發內存泄漏。