PJCHENder 未整理筆記

[JS] JavaScript 集合(Set)

2017-12-26

@(JavaScript)

[TOC]

[JS] JavaScript 集合(Set)

ES6 中如果希望「陣列(Array)」的元素不會重複,可以使用 Set;如果是希望物件(Object)的鍵不會重複,則可以使用 Map

Set @ MDN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const obj = {
foo: 'bar',
};
const mySet = new Set();
mySet.add(1); // [1]
mySet.add(5); // [1, 5]
mySet.add(5); // [1, 5],重複的元素不會被加進去,依然是
mySet.add(obj); // [ 1, 5, { foo: 'bar' } ]

mySet.has(5); // true
mySet.has(obj); // true
mySet.has({
foo: 'bar',
}); // false

mySet.delete(5); // true,刪除成功
mySet.delete(2); // false,刪除失敗
mySet.size; // 2

// for ... of
mySet.entries(); // [key, value] 內容相同
mySet.values(); // 和 mySet.keys 得到相同的內容
mySet.keys(); // 和 mySet.values 得到相同的內容

mySet.forEach(item => console.log('item', item));
mySet.clear();

基本使用

set 裡面的鍵不會重複,是 unique 的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// new Set Type
let classroom = new Set(); // 建立教室這個 set
let Aaron = {name: 'Aaron', country: 'Taiwan'};
let Jack = {name: 'Jack', country: 'USA'};
let Johnson = {name: 'Johnson', country: "Korea"};

// 把物件放入 set 中
classroom.add(Aaron);
classroom.add(Jack);
classroom.add(Johnson);

// 檢驗 set 中是否包含某物件
if(classroom.has(Aaron)) console.log("Aaron is in the classroom");

// 把物件移除 set 中
classroom.delete(Jack);
console.log(classroom.size); // 看看 set 中有多少元素
console.log(classroom);

陣列與集合間轉換

1
2
3
4
5
// Set 轉成 Array
let SetToArray = [...classroom] // Array.from(classroom);

// Array 轉成 Set
let ArrayToSet = new Set(SetToArray);

過濾陣列中重複的元素

keywords: filter array, unique array element

利用 Set 中元素不會重複的特性,可以用來過濾掉陣列中重複的元素,留下唯一

1
2
3
const arr = [1, 1, 3, 5, 5, 7];
const arrToSet = new Set(arr); // Set { 1, 3, 5, 7 }
const uniqueArray = [...arrToSet]; // [ 1, 3, 5, 7 ]

例子

1
2
3
4
5
6
7
8
9
10
var mySet = new Set();

mySet.add(1); // Set { 1 }
mySet.add(5); // Set { 1, 5 }
mySet.add("some text"); // Set { 1, 5, 'some text' }
var o = {a: 1, b: 2};
mySet.add(o); // Set { 1, 5, 'some text', { a: 1, b: 2 } }

// // o is referencing a different object so this is okay
mySet.add({a: 1, b: 2}); // Set { 1, 5, 'some text', { a: 1, b: 2 }, { a: 1, b: 2 } }

Sample Code

掃描二維條碼,分享此文章