Jimmy 的架站筆記

嗨~我是 Jimmy!我可能不是你認識的第 1 個 Jimmy,但一定是最帥的那個。


JavaScript Set 筆記

By Jimmy 2022-09-14
發表於 javascript
JavaScript Set 筆記

延續上一篇:JavaScript Map 筆記,這篇就來筆記一下 Set 的用法吧!

JavaScript Set

1. 特性

2. 宣告 Set

基本上使用 new Set(),argument 可以為空或是 array,如果是 array,會自動把重複的元素過濾掉:

const set = new Set();
console.log(set);
// Set(0) {}

const set1 = new Set([1, 2, 3]);
console.log(set1);
// Set(3) { 1, 2, 3 }

const set2 = new Set([1, 1, 2, 2]);
console.log(set2);
// Set(2) { 1, 2 }

3. 操作 Set

const arr = [1, 5, 4, 3, 2];
const set = new Set(arr);

console.log(set.size);
// 5

console.log(set.has(1));
// true
console.log(set.has(6));
// false

set.add(7);
set.add('hello world');
console.log(set);
// Set(7) { 1, 5, 4, 3, 2, 7, 'hello world' }

set.delete('hello world');
console.log(set);
// Set(6) { 1, 5, 4, 3, 2, 7 }

set.clear()
console.log(set)
// Set(0) {}

4. 迭代 Set

const arr = [1, 2, 'hello', { name: 'Jimmy' }];
const set = new Set(arr);

// method 1
for (const item of set) {
  console.log(item);
}

// method 2
for (const item of set.keys()) {
  console.log(item);
}

// method 3
for (const item of set.values()) {
  console.log(item);
}

// method 4
set.forEach((s) => console.log(s));

/* 以上皆會 console 出:
1
2
hello
{ name: 'Jimmy' }
*/

5. 轉換成 Array

const set = new Set([1, 2, 5]);

console.log(Array.from(set));
// [ 1, 2, 5 ]
console.log([...set]);
// [ 1, 2, 5 ]

參考資料

Set - JavaScript - MDN Web Docs - Mozilla


你可能也會喜歡

JavaScript Array Methods — 陣列方法整理

JavaScript Array Methods — 陣列方法整理

陣列(array)屬於物件(object)的一種,在Javacript中有許多陣列方法(array methods)可做轉換或運算,來整理一下在看到陣列常見和相關的方法。 1. Array and String:陣列與字串的轉換 字串與陣列相關的方法 1.1 字串轉換成陣列 1.1.1 **Array.from()** 這個方法不只可以轉換字串,還可以轉換類陣列等等。 語法: > Array.f

Read More
JavaScript 效能測試的好幫手 ⏤ console.time

JavaScript 效能測試的好幫手 ⏤ console.time

記得有一次想要測試一下自己 2 種 function 寫法的效能,但當時的我連關鍵字都不知道要下什麼於是作罷,直到後來偶然看到這篇文章:,才意外發現可以用 console.time 這個語法來測試 function 的效能,以下簡單介紹一下用法。

Read More
JavaScript - 費氏數列的 3 種解法

JavaScript - 費氏數列的 3 種解法

面試的時候經常會問到怎麼用 JavaScript 解費氏數列,面試到後面整理了一下常見的 3 種解法: 首先說明一下費氏數列:[0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55] ,通常會請你用 JavaScript 求解陣列的最後一個值。 1. JavaScript 費氏數列 - 遞迴解 2. JavaScript 費氏數列 - 迴圈解 3. JavaScript 費氏數列 - Memoization

Read More