前言 【筆記內容】 關於JSchallenger中Set對象題目的復盤 本人的提交、以及做題時的思路 分析作者答案 涉及的知識快速瞭解，註意：並不深入分析具體知識，只是圍繞題目展開 【筆記目的】 幫助本人進一步瞭解Javascript的Set對象以及涉及的方法 對自己做題後的復盤，進一步瞭解自己的不 ...
前言
【筆記內容】
- 關於JSchallenger中Set對象題目的復盤
- 本人的提交、以及做題時的思路
- 分析作者答案
- 涉及的知識快速瞭解，註意：並不深入分析具體知識，只是圍繞題目展開
【筆記目的】
- 幫助本人進一步瞭解Javascript的Set對象以及涉及的方法
- 對自己做題後的復盤，進一步瞭解自己的不足之處
【相關資源】
【溫馨提示】
- 筆記中有些個人理解後整理的筆記，可能有所偏差，也懇請讀者幫忙指出，謝謝。
- 若是有其他的解題方法也請讀者分享到評論區，一起學習，共同進步，謝謝。
- 我的提交有不足之處也懇請讀者幫忙指出，不吝賜教，謝謝。
Set對象快速瞭解
什麼是Set對象？
- 允許你存儲任何類型的唯一值
- 是值的集合，Set中的元素只會出現一次，即 Set 中的元素是唯一的。
- 常見方法
| 方法名 | 描述 |
|---|---|
| Set() | 創建一個新的Set對象 |
| Set.prototype.add() | 在Set對象尾部添加一個元素。返回該Set對象。 |
| Set.prototype.clear() | 移除Set對象內的所有元素。 |
| Set.prototype.has() | has() 方法返回一個布爾值來指示對應的值value是否存在Set對象中。 |
| Set.prototype.values() | 返回一個新的迭代器對象，該對象包含Set對象中的按插入順序排列的所有元素的值 |
JSchallenger Javascript Sets
Check if value is present in Set
需求：
Write a function that takes a Set and a value as arguments
Check if the value is present in the Set
我的提交（作者答案）
function myFunction(set, val) {
return set.has(val);
}
涉及知識（set.has()方法）
Set.prototype.has()
- 返回一個布爾值來指示對應的值value是否存在Set對象中。
格式
mySet.has(value);
value（需要測試的值）：必須。用來判斷該值是否存在Set對象中
返回值：
- 布爾值。
true：存在false：不存在
Convert a Set to Array
需求：
Write a function that takes a Set as argument
Convert the Set to an Array
Return the Array
我的提交
function myFunction(set) {
return Array.from(set);
}
作者答案
function myFunction(set) {
return [...set];
}
涉及知識（Set對象與數組對象的相互轉換、Array.from()方法、擴展運算符）
Set對象與數組對象的相互轉換
數組對象 ==>Set對象
var arr=[1,2,3]
var set = new Set(arr);
Set對象 ==>數組對象
Array.from()從
set生成數組
var set = new Set([1,2,3]);
var arr = Array.from(set);
[ ]
var set = new Set([1,2,3]);
var arr = [...set];
PS：數組對象與Set對象的區別
| Set對象 | 數組對象 | |
|---|---|---|
| 元素 | 唯一 | 可重覆 |
| 數組 | 偽數組 | 真正數組 |
Array.from()方法
- 創建數組對象
擴展運算符
-
又稱對象展開符，由
...表示 -
用於取出參數對象所有可遍歷屬性然後拷貝到當前對象。
let person = {name: "Amy", age: 15}; let someone = { ...person }; someone; //{name: "Amy", age: 15}
Get union of two sets
需求：
Write a function that takes two Sets as arguments
Create the union of the two sets
Return the result
Tipp: try not to switch to Arrays, this would slow down your code
我的提交
function myFunction(a, b) {
return new Set([...a, ...b]);
}
作者答案
function myFunction(a, b) {
const result = new Set(a);
b.forEach((el) => result.add(el));
return result;
}
涉及知識（拼接兩個Set對象的方法、擴展運算符、forEach()方法、set.add()方法、箭頭函數）
拼接兩個Set對象的方法
方法一：通過拓展運算符，合併兩個偽數組
var a=new Set([1,2,3]);
var b=new Set([4,5,6]);
var arr = new Set([...a,...b]);
方法二：通過迴圈將一個Set對象中元素添加到另一個Set對象中
具體實現正如上述作者答案，就不在贅述了。
擴展運算符
-
可用於合併兩個對象
let age = {age: 15}; let name = {name: "Amy"}; let person = {...age, ...name}; person; //{age: 15, name: "Amy"}
forEach()方法
- 用於調用數組的每個元素，並將元素傳遞給回調函數。
格式（註意該格式不完整，之針對本題的格式）
array.forEach(function(currentValue), thisValue)
functuion(currentValue)（數組中每個元素需要調用的函數）：必需
currentValue（當前元素）:必需
thisValue：可選
- 傳遞給函數的值一般用
this值。 - 如果這個參數為空，
undefined會傳遞給this值
返回值：undefined
set.add()方法
- 用來向一個
Set對象的末尾添加一個指定的值。
格式
mySet.add(value);
value（需要添加到 Set 對象的元素的值）：必需
返回值：Set 對象本身
註意：不能添加重覆的值
箭頭函數
- 使函數表達式更簡潔
- 更適用於那些本來需要匿名函數的地方
- 它不能用作構造函數
格式：
(param1, param2, …, paramN) => expression
(param1, param2, …, paramN) => { statements }
//相當於：(param1, param2, …, paramN) =>{ return expression; }
param：參數
expression：表達式
| 其他格式 | 前提 |
|---|---|
| singleParam => { statements } | 當只有一個參數時，圓括弧是可選的： |
| () => { statements } | 沒有參數的函數應該寫成一對圓括弧。 |
Creating Javascript Sets
需求：
Write a function that takes three elements of any type as arguments
Create a Set from those elements
Return the result
我的提交
function myFunction(a, b, c) {
return new Set([a,b,c])
}
作者答案
function myFunction(a, b, c) {
const set = new Set();
set.add(a);
set.add(b);
set.add(c);
return set;
}
涉及知識（構建Set對象方法、set.add()方法）
構建Set對象方法
格式
var myset = new Set();
var myset = new Set(iterable);
iterable(可迭代對象)：數組或類數組對象
【PS】可迭代對象是什麼？
就是可以重覆、改進、升級的對象
具體可以看這篇博客究竟什麼是迭代？。
set.add()方法
之前解釋過就不再贅述了，點擊此處跳轉
Delete element from Set
需求：
Write a function that takes a Set and a value as argument
If existing in the Set, remove the value from the Set
Return the result
我的提交（作者答案）
function myFunction(set, val) {
set.delete(val);
return set;
}
涉及知識（set.delete()方法）
set.delete()
- 可以從一個
Set對象中刪除指定的元素
語法
mySet.delete(value);
value（將要刪除的元素）
返回值：布爾值
true：成功刪除false：刪除失敗
Add multiple elements to Set
需求：
Write a function that takes a Set and an array as arguments
If not already existing, add each element in the array to the Set
Return the modified Set
我的提交
function myFunction(set, arr) {
const set1=new Set(arr);
return new Set([...set,...set1]);
}
【不足之處】
- 需求要的是一個modified Set（修改過的Set）對象（即在原來的Set對象上修改），而不是新的Set對象。
作者答案
function myFunction(set, arr) {
arr.forEach((e) => set.add(e));
return set;
}
涉及知識（數組與Set對象拼接思路）
數組與Set對象拼接思路
思路一：
1、構建一個以數組元素為元素的Set對象
2、兩個Set對象拼接
思路二：
用set.add()方法將數組元素一個加到Set對象中。
Get Intersection of two Javascript Sets
需求：
Write a function that takes two sets (a and b) as arguments
Get the intersection of the sets
In other words, return a set containing all elements that are both in a as well as b
我的提交
function myFunction(a, b) {
return new Set([...a].filter(item=>b.has(item)));
}
作者答案
function myFunction(a, b) {
const int = new Set();
a.forEach(el => b.has(el) && int.add(el));
return int;
}
涉及知識（array.filter()方法、Set對象取交集思路）
array.filter()方法
- 創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。
【註意】
- 不會對空數組進行檢測
- 不會改變原始數組
格式（註意該格式不完整，之針對本題的格式）
array.filter(function(currentValue))
functuion(currentValue)（數組中每個元素需要調用的函數）：必需
currentValue（當前元素）:必需
返回值：
數組：包含了符合條件的所有元素空數組：如果沒有符合條件的元素。
Set對象取交集思路
思路一
1、先以處理數組交集的方法來處理
2、把數組轉換成Set對象
思路二
1、通過遍歷其中一個Set對象，逐個判斷另一個Set對象中也有的對象。
2、若有則加入新的Set對象中。
結語
【創作背景】
偶然在抖音上刷到JSchallenger這個可以訓練Javascript基礎的網站，自己在完成所有的Schallenger題之後，想要通過博客來記錄自己的做題痕跡，以便日後快速回顧。原本打算把JSchallenger的所有題目以及分析整理成一篇博客發出來，但是我整理完後發現，已經快有1w多字，為了方便讀者和自己觀看，因此打算按照JSchallenger的板塊分開發佈。
【感謝】
感謝各位讀者能看到最後!!!
