跳至主要内容

[JS] JavaScript 集合（Set）

ES6 中如果希望「陣列（Array）」的元素不會重複，可以使用 Set；如果是希望物件（Object）的鍵不會重複，則可以使用 Map。

Set @ MDN

Set 的特色是有 has() 這個方法，可以快速判斷該 Set 中是否包含某個元素，重點不是讓我們把 Set 中的元素取出來用。

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 的。

// 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);

陣列與集合間轉換​

// Set 轉成 Array
let SetToArray = [...classroom]; // Array.from(classroom);

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

過濾陣列中重複的元素​

keywords: filter array, unique array element​

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

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 ]

例子​

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​