前言

【笔记内容】

关于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的板块分开发布。

【感谢】

感谢各位读者能看到最后!!!

【笔记】【JavaScript】JSchallenger-set对象-练习笔记相关推荐

【笔记】【JavaScript】JSchallenger-Arrays对象-练习笔记
前言 [笔记内容] 关于JSchallenger中Arrays对象题目的复盘本人的提交.以及做题时的思路分析作者答案涉及的知识快速了解,注意:并不深入分析具体知识,只是围绕题目展开 [笔记目的] ...
JavaScript中的对象学习笔记（属性操作）
本文是笔者学习JavaScript时做的笔记,大部分内容来自<JavaScript权威指南>,记录学习中的重点,并引入一些其他博文和与其他程序员讨论的内容,供本人日常翻阅.如有疑问,请留言 ...
javascript 内置对象学习笔记：
一. JavaScript 对象1.function 对象创建: function xxx(参数1,参数2,...参数n){方法体;}调用: xxx(参数1,参数2,...参数n)特点:a 方法定义时 ...
JavaScript学习笔记02【基础——对象（Function、Array、Date、Math）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记03【基础——对象（RegExp、Global）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
《JavaScript高级程序设计》读书笔记 -12.1 window对象
<JavaScript高级程序设计>读书笔记 -12.1 window对象 12.1 window对象 12.1.1 Global作用域 12.1.2 窗口关系[不是很懂] 12.1.3 ...
JavaScript学习笔记03-数组-Data对象-Math对象-包装类-字符串-正则
目录一.数组索引数组的特点 1.1.数组的创建 1.1.1.使用new关键字(构造函数) 1.1.2.使用字面量形式 1.1.3.创建数组的注意事项 1.2.数组的基本使用 1.2.1.存操作( ...
JavaScript语言精粹：对象——读书笔记
1 对象简单数据类型 number string boolean null undefined 对象类型 array function regularExpression object 对象简介可 ...
JavaScript学习笔记2——JavaScript操作BOM对象
BOM模型 BOM:浏览器对象模型(Browser Object Model) BOM提供了独立于内容的.可以与浏览器窗口进行互动的对象结构 BOM可实现功能弹出新的浏览器窗口移动.关闭浏览器窗口 ...

【笔记】【JavaScript】JSchallenger-set对象-练习笔记

前言

Set对象快速了解

什么是Set对象？

JSchallenger Javascript Sets

Check if value is present in Set

涉及知识（set.has()方法）

Set.prototype.has()

Convert a Set to Array

涉及知识（Set对象与数组对象的相互转换、Array.from()方法、扩展运算符）

Set对象与数组对象的相互转换

数组对象 ==>Set对象

Set对象 ==>数组对象

Array.from()方法

扩展运算符

Get union of two sets

涉及知识（拼接两个Set对象的方法、扩展运算符、forEach()方法、set.add()方法、箭头函数）

拼接两个Set对象的方法

扩展运算符

forEach()方法

set.add()方法

箭头函数

Creating Javascript Sets

涉及知识（构建Set对象方法、set.add()方法）

构建Set对象方法

set.add()方法

Delete element from Set

涉及知识（set.delete()方法）

set.delete()

Add multiple elements to Set

涉及知识（数组与Set对象拼接思路）

数组与Set对象拼接思路

Get Intersection of two Javascript Sets

涉及知识（array.filter()方法、Set对象取交集思路）

array.filter()方法

Set对象取交集思路

结语

【笔记】【JavaScript】JSchallenger-set对象-练习笔记相关推荐

最新文章

热门文章