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 結構的實例有以下屬性:

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

2、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 入門》一書，作者：阮一峰。