前言

【筆記內(nèi)容】

成都創(chuàng)新互聯(lián)公司擁有網(wǎng)站維護(hù)技術(shù)和項目管理團(tuán)隊，建立的售前、實施和售后服務(wù)體系，為客戶提供定制化的成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、網(wǎng)站維護(hù)、托管服務(wù)器解決方案。為客戶網(wǎng)站安全和日常運(yùn)維提供整體管家式外包優(yōu)質(zhì)服務(wù)。我們的網(wǎng)站維護(hù)服務(wù)覆蓋集團(tuán)企業(yè)、上市公司、外企網(wǎng)站、成都做商城網(wǎng)站、政府網(wǎng)站等各類型客戶群體，為全球成百上千企業(yè)提供全方位網(wǎng)站維護(hù)、服務(wù)器維護(hù)解決方案。

• 關(guān)于JSchallenger中Set對象題目的復(fù)盤
• 本人的提交、以及做題時的思路
• 分析作者答案
• 涉及的知識快速了解，注意：并不深入分析具體知識，只是圍繞題目展開

【筆記目的】

• 幫助本人進(jìn)一步了解Javascript的Set對象以及涉及的方法
• 對自己做題后的復(fù)盤，進(jìn)一步了解自己的不足之處

【相關(guān)資源】

• JSchallenger

【溫馨提示】

• 筆記中有些個人理解后整理的筆記，可能有所偏差，也懇請讀者幫忙指出，謝謝。
• 若是有其他的解題方法也請讀者分享到評論區(qū)，一起學(xué)習(xí)，共同進(jìn)步，謝謝。
• 我的提交有不足之處也懇請讀者幫忙指出，不吝賜教，謝謝。

---

Set對象快速了解

什么是Set對象？

• 允許你存儲任何類型的唯一值
• 是值的集合，Set中的元素只會出現(xiàn)一次，即 Set 中的元素是唯一的。
• 常見方法

方法名	描述
Set()	創(chuàng)建一個新的Set對象
Set.prototype.add()	在Set對象尾部添加一個元素。返回該Set對象。
Set.prototype.clear()	移除Set對象內(nèi)的所有元素。
Set.prototype.has()	has() 方法返回一個布爾值來指示對應(yīng)的值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()

• 返回一個布爾值來指示對應(yīng)的值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對象與數(shù)組對象的相互轉(zhuǎn)換、Array.from()方法、擴(kuò)展運(yùn)算符）

Set對象與數(shù)組對象的相互轉(zhuǎn)換

數(shù)組對象 ==>Set對象

var arr=[1,2,3]
var set = new Set(arr);

Set對象 ==>數(shù)組對象

Array.from()從set生成數(shù)組

var set = new Set([1,2,3]);
var arr = Array.from(set);

[ ]

var set = new Set([1,2,3]);
var arr = [...set];

PS：數(shù)組對象與Set對象的區(qū)別

	Set對象	數(shù)組對象
元素	唯一	可重復(fù)
數(shù)組	偽數(shù)組	真正數(shù)組

---

Array.from()方法

• 創(chuàng)建數(shù)組對象

了解更多

---

擴(kuò)展運(yùn)算符

• 又稱對象展開符，由...表示

• 用于取出參數(shù)對象所有可遍歷屬性然后拷貝到當(dāng)前對象。

  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對象的方法、擴(kuò)展運(yùn)算符、forEach()方法、set.add()方法、箭頭函數(shù)）

拼接兩個Set對象的方法

方法一：通過拓展運(yùn)算符，合并兩個偽數(shù)組

var a=new Set([1,2,3]);
var b=new Set([4,5,6]);
var arr = new Set([...a,...b]);

方法二：通過循環(huán)將一個Set對象中元素添加到另一個Set對象中

具體實現(xiàn)正如上述作者答案，就不在贅述了。

---

擴(kuò)展運(yùn)算符

• 可用于合并兩個對象

  let age = {age: 15};
  let name = {name: "Amy"};
  let person = {...age, ...name};
  person;  //{age: 15, name: "Amy"}
  

點此了解更多

---

forEach()方法

• 用于調(diào)用數(shù)組的每個元素，并將元素傳遞給回調(diào)函數(shù)。

格式（注意該格式不完整，之針對本題的格式）

array.forEach(function(currentValue), thisValue)

functuion(currentValue)（數(shù)組中每個元素需要調(diào)用的函數(shù)）：必需

• currentValue（當(dāng)前元素）:必需

thisValue：可選

• 傳遞給函數(shù)的值一般用 this 值。
• 如果這個參數(shù)為空， undefined 會傳遞給 this 值

返回值：undefined

了解更多

---

set.add()方法

• 用來向一個 Set 對象的末尾添加一個指定的值。

格式

mySet.add(value);

value（需要添加到 Set對象的元素的值）：必需

返回值：Set 對象本身

注意：不能添加重復(fù)的值

---

箭頭函數(shù)

• 使函數(shù)表達(dá)式更簡潔
• 更適用于那些本來需要匿名函數(shù)的地方
• 它不能用作構(gòu)造函數(shù)

格式：

(param1, param2, …, paramN) => expression
(param1, param2, …, paramN) => { statements }
//相當(dāng)于：(param1, param2, …, paramN) =>{ return expression; }

param：參數(shù)

expression：表達(dá)式

其他格式	前提
singleParam => { statements }	當(dāng)只有一個參數(shù)時，圓括號是可選的：
() => { statements }	沒有參數(shù)的函數(shù)應(yīng)該寫成一對圓括號。

了解更多

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;
}

涉及知識（構(gòu)建Set對象方法、set.add()方法）

構(gòu)建Set對象方法

格式

var myset = new Set();

var myset = new Set(iterable);

iterable(可迭代對象)：數(shù)組或類數(shù)組對象

【PS】可迭代對象是什么？

就是可以重復(fù)、改進(jìn)、升級的對象

具體可以看這篇博客究竟什么是迭代？。

---

set.add()方法

之前解釋過就不再贅述了，點擊此處跳轉(zhuǎn)

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;
}

涉及知識（數(shù)組與Set對象拼接思路）

數(shù)組與Set對象拼接思路

思路一：

1、構(gòu)建一個以數(shù)組元素為元素的Set對象

2、兩個Set對象拼接

思路二：

用set.add()方法將數(shù)組元素一個加到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()方法

• 創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。

【注意】

• 不會對空數(shù)組進(jìn)行檢測
• 不會改變原始數(shù)組

格式（注意該格式不完整，之針對本題的格式）

array.filter(function(currentValue))

functuion(currentValue)（數(shù)組中每個元素需要調(diào)用的函數(shù)）：必需

• currentValue（當(dāng)前元素）:必需

返回值：

• 數(shù)組：包含了符合條件的所有元素
• 空數(shù)組：如果沒有符合條件的元素。

了解更多

---

Set對象取交集思路

思路一

1、先以處理數(shù)組交集的方法來處理

2、把數(shù)組轉(zhuǎn)換成Set對象

思路二

1、通過遍歷其中一個Set對象，逐個判斷另一個Set對象中也有的對象。

2、若有則加入新的Set對象中。

結(jié)語

【創(chuàng)作背景】

? 偶然在抖音上刷到JSchallenger這個可以訓(xùn)練Javascript基礎(chǔ)的網(wǎng)站，自己在完成所有的Schallenger題之后，想要通過博客來記錄自己的做題痕跡，以便日后快速回顧。原本打算把JSchallenger的所有題目以及分析整理成一篇博客發(fā)出來，但是我整理完后發(fā)現(xiàn)，已經(jīng)快有1w多字，為了方便讀者和自己觀看，因此打算按照J(rèn)Schallenger的板塊分開發(fā)布。

【感謝】

感謝各位讀者能看到最后!!!

本文標(biāo)題：【筆記】【JavaScript】JSchallenger-set對象-練習(xí)筆記
轉(zhuǎn)載來于：http://weahome.cn/article/dsojppo.html