ES6 - 基礎學習(10): Set 和 WeakSet 數據結構

Set 數據結構

ES6 提供了新的數據結構 Set，註意不是數據類型，而是數據結構。它類似於數組，但是成員的值(可以是任何類型，無論是原始值或者是對象引用都行)都是唯一的，沒有重覆的值。

Set 中的特殊值

Set 數據結構存儲的成員 值總是唯一的，所以Set數據結構在添加新成員時需要判斷兩個值是否恆等，有幾個特殊值需要特殊對待：

　　1、+0 與 -0 在存儲判斷唯一性的時候是恆等的，所以不重覆；

　　2、undefined 與 undefined 是恆等的，所以不重覆；

　　3、NaN 與 NaN 是不恆等的，但是在 Set 中只能存一個，不重覆(Set 內部認為兩個NaN是相等的)。

　　4、兩個數組或兩個對象 不同引用 不恆等，即便兩個數組或兩個對象值完全相同也不恆等(不同引用 它們存儲位置不一樣)，故能重覆。

Set 數據結構基本用法

// Set本身是一個構造函數，用來生成 Set數據結構。
let testSet = new Set();
testSet.add(1);                        // Set(1) {1}　　　　在數組Array時，用unshift()或push()進行值的添加；Set 稍有不同，它用更語義化的add()進行添加
testSet.add(5);                        // Set(2) {1, 5}
testSet.add(5);                        // Set(2) {1, 5}　　這裡體現了值的唯一性
testSet.add("testSet");                // Set(3) {1, 5, "testSet"}　　這裡體現了存儲類型的多樣性
testSet.add(true);                     // Set(4) {1, 5, "testSet", true}
testSet.add(null);                     // Set(5) {1, 5, "testSet", true, null}
testSet.add(undefined);                // Set(6) {1, 5, "testSet", true, null, undefined}
testSet.add(undefined);                // Set(6) {1, 5, "testSet", true, null, undefined}        undefined跟undefined恆等，不能重覆，只能添加一個
testSet.add([1, 2, 3]);                // Set(7) {1, 5, "testSet", true, null, undefined, [1,2,3]}
testSet.add([1, 2, 3]);                // Set(8) {1, 5, "testSet", true, null, undefined, [1,2,3]}    對象之間不同引用 不恆等，即使兩個對象值完全相同，Set也能存儲
testSet.add({a: 1, b: 2});             // Set(9) {1, 5, "testSet", true, null, undefined, [1,2,3], {a: 1, b: 2}}
testSet.add({a: 1, b: 2});             // Set(10) {1, 5, "testSet", true, null, undefined, [1,2,3], {a: 1, b: 2}}    對象之間不同引用 不恆等，即使兩個對象值完全相同，Set也能存儲
console.log(testSet);                  // Set(8) {1, 5, "testSet", true, null, …}
// Set和 Array的區別： Set不允許內部有重覆的值，如果有，則只顯示一個，相當於做了去重。雖然 Set很像數組，但不是數組。

// Set構造函數可以接受一個數組或字元串或具有 iterable介面的其他數據結構作為參數，用來初始化 Set數據結構。
// Array 轉 Set
let arrayToSet = new Set(["value1", "value2", "value3"]);
console.log(arrayToSet);                        　　// Set(3) {"value1", "value2", "value3"}
// String 轉 Set
let stringToSet = new Set('TestDemo');
console.log(stringToSet);                          // Set(7) {"T", "e", "s", "t", "D", "m", "0"}

// Set 對象作用
// 去除數組重覆成員
let deduplication = new Set([1, 2, 3, 4, 3, 2, '4']);    // Set數據結構不會做數據類型轉換，所以 4和"4" 是兩個不同的值
console.log(deduplication);                        // Set(5) {1, 2, 3, 4, "4"}
// 去除字元串重覆字元
let deduplicationChar = new Set('TestTestTest');
console.log(deduplicationChar);                    // Set(4) {"T", "e", "s", "t"}

// 註：join方法不能格式化 Set數據結構，同時 toString方法也不能將 Set數據結構轉換成 String。
console.log(deduplicationChar.join());             // index_set.js:36 Uncaught TypeError: deduplicationChar.join is not a function
console.log(deduplicationChar.toString());         // [object Set]

Set 實例的屬性和方法

Set 實例具有以下原型屬性：　　

　　1、Set.prototype.constructor：構造函數，即預設的 Set函數。

　　2、Set.prototype.size：返回 Set實例的成員數量總數。

Set 實例具有以下原型方法，主要分為：操作方法(用於操作數據) 和 遍歷方法(用於遍歷成員)。

　　1、Set.prototype.add(value)：添加某個值，返回 Set實例本身。

　　2、Set.prototype.delete(value)：刪除當前 Set實例內某個值，返回一個布爾值，表示該值刪除是否成功。

　　3、Set.prototype.has(value)：返回一個布爾值，表示該值是否為當前 Set實例內成員。

　　4、Set.prototype.clear()：清除所有成員(清空當前 Set實例)，沒有返回值。

　　5、Set.prototype.keys()：返回鍵名的遍歷器。

　　6、Set.prototype.values()：返回鍵值的遍歷器。

　　7、Set.prototype.entries()：返回鍵值對的遍歷器。

　　8、Set.prototype.forEach()：遍歷每個成員的回調函數，可以遍歷當前 Set實例內每個成員。

Set 實例原型方法 - 操作方法：add()、delete()、has()、clear()

// add()
let addSet = new Set([1,'Test']);
addSet.add(NaN);
console.log(addSet);                         // Set(3) {1, "Test", NaN}
addSet.add(null).add(undefined);             // add可以鏈式操作，連續添加
console.log(addSet);                         // Set(5) {1, "Test", NaN, null, undefined}

// delete()
let deleteState = addSet.delete(null);
console.log(deleteState);                    // true
console.log(addSet.delete(0));               // false
console.log(addSet);                         // Set(4) {1, "Test", NaN, undefined}

// has()
let hasValue = addSet.has(NaN);
console.log(hasValue);                       // true
console.log(addSet.has(0));                  // false

// clear()
let clearSet = addSet.clear();
console.log(clearSet);                       // clear方法沒有返回值，所以是 undefined

Set 實例原型方法 - 遍歷方法：keys()、values()、entries()、forEach()

// Set的遍歷順序就是值的添加順序，所以 Set數據結構的順序是固定的，因此這個特性可以用來保存 流程化操作的回調函數，在 Promise中非常有用，用 Set實例保存一個回調函數列表，Promise就可以按照 Set實例內成員排列順序 進行順序調用執行。
// 由於 Set數據結構(類似數組)沒有鍵名，只有鍵值(或者說鍵名和鍵值是同一個值)，所以 keys方法 和 values方法的行為完全一樣。
let testSet = new Set([1, "Test", NaN]);

// keys()
for (let item of testSet.keys()) {
    console.log(item);
}
// 1
// Test
// NaN

// values()
for (let item of testSet.values()) {
    console.log(item);
}
// 1
// Test
// NaN

// entries()：entries方法返回的遍歷器都是以數組的形式呈現，同時包括鍵名和鍵值(前是名後是值)，只是兩個成員完全相等。
for (let item of testSet.entries()) {
    console.log(item);
}
// [1, 1]
// ["Test", "Test"]
// [NaN, NaN]

// Set 數據結構的實例預設可遍歷，它的預設遍歷器生成函數就是它的values方法，這意味著，可以省略values方法，直接用for...of迴圈遍歷 Set。
for (let item of testSet) {
    console.log(item);
}
// 1
// Test
// NaN