Javascript - Set物件

名稱 類形 說明
Set 物件 ES6 新的資料結構，類似於陣列，但元素中並不會有重複的值，並且它沒辦法直接用索引取特定元素的值，只能用列舉的方法取值；預設是會幫我們確保值都是唯一的，重複的值會被忽略，但有個例外，如果傳入 Set 的是物件，即使物件是空的也會被當作不同的值；要列舉 Set 的值基本上是要用 for...of 語法，這和以前的 for...in 語法不一樣，是直接取值出來的，也是 ES6 新的東西。

下面的範例示範了新增一個 Set，並通過 add 方法向 Set 結構加入成員，顯示 Set 結構不會添加重複的值： 
var Ary = [2, 1, 3, 2, 3];
var newSet = new Set();
for(let value of Ary){
	newSet.add(value);
}
for(let value of newSet){
	console.log(value);
}
// 3
// 1
// 2

var mySet = new Set();
[2, 1, 3, 2, 3].map(value => mySet.add(value));
for(let v of mySet){
	console.log(v);
}
// 3
// 1
// 2
Set 也可以直接傳入一個陣列（或類陣列的物件）作為它的資料，如下例： 
var mySet = new Set([3, 1, 2, 2, 3]);
console.log([...mySet]); // 使用展開運算子將mySet中的值顯示為陣列
// [3, 1, 2]
console.log(mySet.size);
// 3

// 類陣列的物件
var mySet = new Set([...document.querySelectorAll('div')]);
console.log(mySet.size);
// 10

// 它類似於：
var mySet = new Set();
[...document.querySelectorAll('div')].forEach(value => {
	mySet.add(value);
});
console.log(mySet.size);
// 10
使用 Set 快速清除重複的陣列值，如下例： 
let arr = [3, 5, 2, 2, 5, 5];
let uniArr = [...new Set(arr)];
console.log(uniArr); // [3, 5, 2]
size 屬性 返回Set實例的成員總數，如下例： 
var mySet = new Set([1,2,2]);
console.log(mySet.size); // 2
add() 方法 添加某個值，返回 Set 結構本身，如下例： 
var mySet = new Set();
mySet.add(1).add(2).add(2); // 注意 2 被加入了两次
console.log(mySet.size); // 2
clear() 方法 清除所有成員，沒有返回值，如下例： 
var mySet = new Set([1,2]);
mySet.clear();
console.log(mySet.size); // 0
delete() 方法 刪除某個值，返回一個布爾值，表示刪除是否成功，如下例： 
var mySet = new Set([1,2]);
console.log(mySet.delete(2)); //true
console.log(mySet.has(2)); // false
has() 方法 返回一個布林值，表示該值是否為Set的成員，如下例： 
var mySet = new Set([1,2]);
console.log(mySet.has(3)); // false
entries() 遍歷方法 返回一個鍵值對的遍歷器 
var mySet = new Set(['red', 'green', 'blue']);
for(var value of mySet.entries()){
	console.log(value);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
forEach() 遍歷方法 使用回調函數遍歷每個成員。
Set 結構實例的 forEach 方法，用於對每個成員執行某種操作，沒有返回值，如下例： 
let mySet = new Set([1, 2, 3]);
mySet.forEach((v) => console.log(v * 2));
// 2
// 4
// 6
console.log([...mySet]);
// [1, 2, 3]
由上例可見，原本的資料並沒有受到更動，如果想在遍歷操作中，同步改變原來的 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
keys() 遍歷方法 返回一個鍵名的遍歷器，由於Set結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值），所以key方法和value方法的行為完全一致。 
var mySet = new Set(['red', 'green', 'blue']);
for(var value of mySet.keys()){
	console.log(value);
}
// red
// green
// blue

// 其實不寫.key()得到的結果是一樣的
values() 遍歷方法 返回一個鍵值的遍歷器，由於Set結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值），所以key方法和value方法的行為完全一致。 
var mySet = new Set(['red', 'green', 'blue']);
for(var value of mySet.values()){
	console.log(value);
}
// red
// green
// blue

// 其實不寫.values()得到的結果是一樣的