原生JS实现集合结构
1. 前言
集合是由一组无序且唯一(即不能重复)的项组成的。你可以把集合想象成一个既没有重复元素,也没有顺序概念的数组。在ES6中已经内置了集合这一数据结构——Set
。接下来,我们就用原生JS来实现这一数据结构。
2. 创建集合类
首先,我们先创建一个集合类,并且为其声明一些实例方法,如下:
class Set {
constructor() {
this.items = {}
}
has(value) {}
add(value) {}
remove(value) {}
clear() {}
size() {}
values() {}
union(otherSet) {}
intersection(otherSet) {}
difference(otherSet){}
isSubset(otherSet){}
}
在上述代码中,我们使用对象而不是数组来表示集合(items
),这是因为集合中的元素都是唯一的,而JavaScript
的对象不允许一个键指向两个不同的属性,刚好满足集合这一性质。在创建好Set
类后,我们还为其声明了一些方法:
- add(value):向集合添加一个新的项。
- remove(value):从集合删除一个值。
- has(value):判断一个值是否存在于集合中,返回
true
,否则返回false
。 - clear():清空集合。
- size():返回集合所包含元素的数量。
- values():返回一个包含集合中所有值的数组。
- union(otherSet) :求当前集合与给定集合
otherSet
的并集。 - intersection(otherSet):求当前集合与给定集合
otherSet
的交集。 - difference(otherSet):求当前集合与给定集合
otherSet
的差集。 - isSubset(otherSet):判断当前集合是否为给定集合
otherSet
的子集。
3. 方法实现
3.1 has(value)
首先要实现的是has(value)
方法。这是因为它会被其他方法调用。该方法用来判断一个值是否存在于集合中,返回true
,否则返回false
。如下:
// 判断value是否存在于集合内,返回true或false
has(value) {
return this.items.hasOwnProperty(value)
}
我们将集合内所有元素在items
中都以如下方式存储:
this.items = {
'元素1':'元素1',
'元素2':'元素3',
'元素3':'元素3',
//...
}
我们对象内的让每一对key
和value
都相等,表示一个元素。当我们需要判断一个值是否存在于集合中,我们只需判断该值是否为对象的属性即可,所以我们可以直接调用hasOwnProperty
方法。
3.2 add(value)
该方法用来向集合内添加一个新的项,实现如下:
// 向集合内添加一个数据,成功返回true,失败返回false
add(value) {
if (this.has(value)) {
return false
}
this.items[value] = value
return true
}
由于集合内不允许有重复元素,所以在添加之前先判断要添加的元素是否已经存在于集合内,如果已存在,则返回false
,不让添加。否则,将新元素通过对象赋值的方式加入集合内。
3.3 remove(value)
该方法用来从集合删除一个值。实现如下:
// 从集合内删除一个数据
remove(value) {
if (this.has(value)) {
delete this.items[value]
return true;
}
return false;
}
删除之前先判断要删除的元素是否存在于集合内,如果存在,就采用对象删除自身属性的方式将该元素从集合内删除,最后返回true
。如果不存在,则返回false
。
3.4 size()
该方法用来获取集合中元素的数量。实现如下:
size() {
return Object.keys(this.items).length
}
Object
类有一个keys
方法,它返回一个包含给定对象所有属性的数组。我们可以通过这个数组的length
属性来获取到items
对象的属性个数。
3.5 values()
该方法用于获取一个包含集合中所有值的数组。实现如下:
// 以数组形式返回集合内的所有元素
values() {
return Object.keys(this.items)
}
同size()
方法实现一样,Object.keys
方法返回一个包含给定对象所有属性的数组。
3.6 clear()
该方法用于将集合清空,即删除集合内的所有元素。实现如下:
// 清空集合
clear() {
this.items = {}
}
清空集合,即就是把this.itmes
变成空对象,那我们直接将空对象{}
赋值给this.items
即可。
3.7 union(otherSet)
该方法用于求当前集合与给定集合otherSet
的并集。
并集的数学概念是集合A和集合B的并集,表示为:
\]
该集合定义如下:
\]
意思是x
(元素)存在于A
中,或x
存在于B
中。下图展示了并集操作:
实现如下:
// 求并集
union(otherSet) {
let unionSet = new Set() // 创建一个新的集合,用于存储两个集合的并集
let values = this.values(); //获取第一个集合(当前的Set类实例)所有的值
for (let i = 0; i < values.length; i++) { // 遍历并全部添加到代表并集的集合中
unionSet.add(values[i]);
}
values = otherSet.values(); // 第二个集合同理
for (let i = 0; i < values.length; i++) {
unionSet.add(values[i]);
}
return unionSet;
}
首先需要创建一个新的集合,代表两个集合的并集。接下来,获取第一个集合(当前的Set类实例)所有的值,遍历并全部添加到代表并集的集合中。然后对第二个集合做同样的事。最后返回结果。
3.8 intersection(otherSet)
该方法用于求当前集合与给定集合otherSet
的交集。
交集的数学概念是集合A和集合B的交集,表示为:
\]
该集合定义如下:
\]
意思是x
(元素)存在于A
中,且x
存在于B
中。下图展示了交集操作:
实现如下:
// 求交集
intersection(otherSet) {
let intersectionSet = new Set() // 创建一个新的集合,用于存储两个集合的交集结果
let values = this.values();
for (let i = 0; i < values.length; i++) { // 遍历当前的集合中的元素,如果这个元素也存在与otherSet,则将该元素存入intersectionSet
if (otherSet.has(values[i])) {
intersectionSet.add(values[i])
}
}
return intersectionSet
}
首先需要创建一个新的集合intersectionSet
,代表两个集合的交集。接下来,获取第一个集合(当前的Set类实例)所有的值,遍历并判断每个元素是否存在于集合otherSet
中,如果存在,则表示该元素既存在于第一个集合,又存在于第二个集合otherSet
中,将其添加到代表交集的集合intersectionSet
中。最后返回结果。
3.9 difference(otherSet)
该方法用于求当前集合与给定集合otherSet
的差集。
差集的数学概念是集合A
和集合B
的差集,表示为:
\]
定义如下:
\]
意思是x
(元素)存在于A
中,且x
不存在于B
中。下图展示了集合A
和B
的差集操作:
实现如下:
// 求差集
difference(otherSet){
let differenceSet = new Set() // 创建一个新的集合,用于存储两个集合的交集结果
let values = this.values();
for (let i = 0; i < values.length; i++) { // 遍历当前的集合中的元素,如果这个元素不存在于otherSet中,则将该元素存入differenceSet
if (!otherSet.has(values[i])) {
differenceSet.add(values[i])
}
}
return differenceSet
}
首先需要创建一个新的集合differenceSet
,代表两个集合的差集。接下来,获取第一个集合(当前的Set类实例)所有的值,遍历并判断每个元素是否存在于集合otherSet
中,如果不存在,则表示该元素只存在于第一个集合中,将其添加到代表交集的集合differenceSet
中。最后返回结果。
3.10 isSubset(otherSet)
该方法用于判断当前集合是否为给定集合otherSet
的子集。
子集的数学概念是集合A
是集合B
的子集(或集合B
包含了A
),表示为:
\]
定义如下:
\]
意思是集合A
中的每一个x
(元素),也需要存在于B
中。下图展示了集合A
是集合B
的子集:
实现如下:
// 判断当前集合是否为otherSet的子集
isSubset(otherSet){
//如果当前实例中的元素比otherSet实例更多,它就不是一个子集。
// 子集的元素个数需要小于或等于要比较的集合。
if (this.size() > otherSet.size()){
return false
}
let values = this.values();
for (let i = 0; i < values.length; i++) { // 遍历当前的集合中的元素,判断这个元素是否存在于otherSet中,
// 如果有一个元素不存在于otherSet中,则表明不是子集
if (!otherSet.has(values[i])) {
return false
}
}
return true
}
首先判断当前集合的长度是否大于给定集合的长度,如果大于,则肯定不是给定集合的子集,因为子集的元素个数必须小于或等于要比较的集合。接下来要遍历集合中的所有元素,验证这些元素也存在于otherSet
中。如果有任何元素不存在于otherSet
中,就意味着它不是一个子集,返回false
。如果所有元素都存在于otherSet
中,则表明当前集合是给定集合的子集,返回true
。
4. 总结
以上就是实现了集合这一数据类型,包括其6个实例方法:has(value)
、 add(value)
、 remove(value)
、 clear()
、size()
、values()
;和3个集合操作方法: union(otherSet)
、intersection(otherSet)
、 difference(otherSet)
、isSubset(otherSet)
。完整代码请戳☞☞☞Set
(完)
原生JS实现集合结构的更多相关文章
- 原生JS实现栈结构
1. 前言 栈,是一种遵从后进先出(LIFO,Later-In-First-Out)原则的有序集合.新添加的元素都保存在栈的一端,称作栈顶,另一端叫做栈底.在栈中,新元素都靠近栈顶,旧元素都靠近栈底. ...
- 原生JS实现队结构及利用队列模拟‘击鼓传花’游戏
1. 前言 队列,是一种遵从先进先出(FIFO,First-In-First-Out)原则的有序集合.队列在尾部添加新元素,并从顶部移除元素,最新添加的元素必须排在队列的末尾. 2.功能说明 enqu ...
- (js描述的)数据结构[集合结构](6)
(js描述的)数据结构[集合结构](6) 一.集合结构特点 1.集合中的元素不能重复. 2.集合是无序的. 二.集合的代码实现 function Set() { this.items = {} //1 ...
- 原生JS实现树状结构列表
树状结构列表,这个技术点之前有写过了,是基于vue讲解,但似乎都没有解决痛点,最基础的原生JS该怎么实现呢? 这篇文章会全面详细的介绍树状结构列表的实现,从数据处理成树状结构,到动态生成dom节点渲染 ...
- 原生JS 表单提交验证器
转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...
- 原生js写的一个弧形菜单插件
弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...
- 原生JS插件(超详细)
作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦. ...
- JS中集合对象(Array、Map、Set)及类数组对象的使用与对比
原文地址 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型, ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
随机推荐
- orm加强版
目录 十三式 2式(针对外键查询优化) select_related和prefetch_related prefetch_related 查询返回值类型 不等式查询 关键字查询 时间查询 跨表查询 组 ...
- 网页布局——table布局
table 的特性决定了它非常适合用来做布局,并且表格中的内容可以自动居中,这是之前用的特别多的一种布局方式 而且也加入了 display:table;dispaly:table-cell 来支持 t ...
- SEER流量众筹模块开发测试网络及使用文档发布
SEER利用区块链奖励机制,可解决传统体育赛事痛点,提高行业运转效率.比如提高赛事方收入,让观众自由选择想看的比赛,给予赛事众筹的参与者贡献影响力,使其获得由智能合约量化的激励等.此功能可广泛应用于包 ...
- Ubuntu安装exfat工具
sudo apt-get undate sudo apt-get install exfat-utils
- 什么是IDS/IPS?
目录 摘要 0x00 基于网络的IDS和IPS0x01 设计考虑因素0X02 IDS/IPS 总结 摘要 摘要 这篇文章主要介绍的是入侵检测系统(IDS)和入侵防御系统(IPS ...
- Vmware Ubuntu 开机蓝屏
引用:http://tieba.baidu.com/p/4898482611 1. 这是vm的一个bug!!!打开你的虚拟系统目录,编辑虚拟机文件夹下面的.vmx 用记事本打开,加入代码. cpuid ...
- JavaScript专题之事件循环
准备知识 1. 进程(process) 进程是系统资源分配一个独立单位,一个程序至少有一个进程.比方说:一个工厂代表一个 CPU, 一个车间就是一个进程,任一时刻,只能有一个进程在运行,其他进程处于非 ...
- Git推送到多个远程仓库
Git推送到多个远程仓库 Grey 原文地址 准备工作 在码云和Github上分别新建两个不包括任何文件的空仓库(若是两个已经有文件的仓库,请参见关联已经存在的项目) https://github.c ...
- SDRAM
环境:STM32F769discovery板 SDRAM芯片:用的MT48LC4M32B2B5-6A 16Mbyte (sdram和flash一般标的容量都是bit) 硬件图: 第一步 配置FM ...
- vue——前端跨域
***针对的是不同域名.不同协议的跨域: 1.找到config文件中开发环境的配置文件——dev.env.js,在里面将要跨域的域名配置进去 2.找到config文件中线上环境的配置文件——prod. ...