ES6中set的用法回顧

ES6中的set相似一個數組，可是其中的值都是惟一的，Set自己是一個構造函數，用來生成 Set 數據結構。

set函數能夠接受一個數組做爲參數，用來初始化：

const set = new Set([1, 2, 3, 4, 4, 4]);
[...set]
//輸出結果：[1, 2, 3, 4]

也能夠接受相似數組的對象做爲參數：

const set = new Set(document.querySelectorAll('div'));
set.size // 輸出結果： 56

固然，當遇到數組去重的時候，能夠這樣：

　　[...new Set(Array)]；

若是用於去除字符串裏的重複字符，也是能夠的：

　　[...new Set('string')].join(' ')；

向 Set 加入值的時候，不會發生類型轉換，好比說0和"0"是兩個不一樣的值。Set 內部判斷兩個值是否不一樣相似於精確相等運算符（===），主要的區別是NaN等於自身，而精確相等運算符認爲

NaN


不等於自身。Set 遇到NaN認爲相等，遇到多個空認爲不等。

Set 結構的實例有如下屬性:

一、Set.prototype.constructor：構造函數，默認就是Set函數。

二、Set.prototype.size：返回成員總數，

Set 實例的方法分爲兩大類：操做方法（用於操做數據）和遍歷方法（用於遍歷成員）。

其中操做方法有四個：

　　add(value)：添加某個值，返回 Set 結構自己。

　　delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。

　　has(value)：返回一個布爾值，表示該值是否爲Set的成員。

　　clear(value)：清除全部成員，沒有返回值。

如：

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

s.size // 2

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

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

Array.from()方法能夠將 Set 結構轉爲數組，這就提供了去除數組重複成員的另外一種方法。

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

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

遍歷方法有四個：

　　keys()：返回鍵名的遍歷器

　　vaules()：返回鍵值的遍歷器

　　entries()：返回鍵值對的遍歷器

　　forEach()：使用回調函數遍歷每一個成員

如：

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"]

keys方法、vaules方法、entries方法返回的都是遍歷器對象。因爲 Set 結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值），因此keys方法和vaules方法的行爲徹底一致。entries方法返

回的遍歷器，同時包括鍵名和鍵值，因此每次輸出一個數組，它的兩個成員徹底相等。Set 結構的實例默承認遍歷，它的默認遍歷器生成函數就是它的vaules方法。

Set 結構的實例與數組同樣，也擁有forEach方法，用於對每一個成員執行某種操做，沒有返回值。

let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9

forEach方法的參數就是一個處理函數。該函數的參數與數組的forEach一致，依次爲鍵值、鍵名、集合自己（上例省略了該參數）。這裏須要注意，Set 結構的鍵名就是鍵值（二者是同一個

值），所以第一個參數與第二個參數的值永遠都是同樣的。forEach方法還能夠有第二個參數，表示綁定處理函數內部的this對象。

擴展運算符（...）內部使用for...of循環，因此也能夠用於 Set 結構。擴展運算符和 Set 結構相結合，就能夠去除數組的重複成員：

let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]

並且，數組的map和filter方法也能夠間接用於 Set 了：

let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set結構：{2, 4, 6}

let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set結構：{2, 4}

若是想在遍歷操做中，同步改變原來的 Set 結構，目前沒有直接的方法，但有兩種變通方法。一種是利用原 Set 結構映射出一個新的結構，而後賦值給原來的 Set 結構；另外一種是利用Array.from方法：

// 方法一
let set = new Set([1, 2, 3]);
set = new Set([...set].map(val => val * 2));
// set的值是2, 4, 6

// 方法二
let set = new Set([1, 2, 3]);
set = new Set(Array.from(set, val => val * 2));
// set的值是2, 4, 6

 

 

 

 

借鑑《ECMAScript 6 入門》一書，做者：阮一峯。