前言
【筆記內容】
- 關于JSchallenger中Set物件題目的復盤
- 本人的提交、以及做題時的思路
- 分析作者答案
- 涉及的知識快速了解，注意：并不深入分析具體知識，只是圍繞題目展開
【筆記目的】
- 幫助本人進一步了解Javascript的Set物件以及涉及的方法
- 對自己做題后的復盤，進一步了解自己的不足之處
【相關資源】
- JSchallenger
【溫馨提示】
- 筆記中有些個人理解后整理的筆記，可能有所偏差，也懇請讀者幫忙指出，謝謝，
- 若是有其他的解題方法也請讀者分享到評論區，一起學習，共同進步，謝謝，
- 我的提交有不足之處也懇請讀者幫忙指出，不吝賜教，謝謝，
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的板塊分開發布，
【感謝】
感謝各位讀者能看到最后!!!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/462936.html
標籤：JavaScript
上一篇：復習 - ajax
下一篇：復習 - ajax