JavaScript数据结构与算法之集合(Set)


Posted in Javascript onJanuary 29, 2016

集合(Set)

说起集合,就想起刚进高中时,数学第一课讲的就是集合。因此在学习集合这种数据结构时,倍感亲切。
集合的基本性质有一条: 集合中元素是不重复的。因为这种性质,所以我们选用了对象来作为集合的容器,而非数组。
虽然数组也能做到所有不重复,但终究过于繁琐,不如集合。

集合的操作

集合的基本操作有交集、并集、差集等。这儿我们介绍JavaScipt集合中交集、并集、差集的实现。

JavaScipt中集合的实现

首先,创建一个构造函数。

/**
 * 集合的构造函数
 */
function Set方法 {
 /**
  * 集合元素的容器,以对象来表示
  * @type {Object}
  */
 var items = {};
}

集合需要有如下方法:

  1. has(value): 检测集合内是否有某个元素
  2. add(value): 给集合内添加某个元素
  3. remove(value): 移除集合中某个元素
  4. clear(value): 清空集合
  5. size(): 返回集合长度
  6. values(): 返回集合转换的数组
  7. union(otherSet): 返回两个集合的并集
  8. intersection(otherSet): 返回两个集合的交集
  9. difference(otherSet): 返回两个集合的差集
  10. subset(otherSet): 判断该集合是否为传入集合的子集

has方法:

说明:集合中元素是不重复的。所以在其它任何操作前,必须用has方法确认集合是否有某个元素。这儿使用了hasOwnProperty方法来检测。
实现:

/**
 * 检测集合内是否有某个元素
 * @param {Any} value  要检测的元素
 * @return {Boolean}    如果有,返回true
 */
this.has = function(value) {
 // hasOwnProperty的问题在于
 // 它是一个方法,所以可能会被覆写
 return items.hasOwnProperty(value)
};

add方法:

说明: 给集合内添加某个元素。
实现:

/**
 * 给集合内添加某个元素
 * @param {Any} value 要被添加的元素
 * @return {Boolean}    添加成功返回True。
 */
this.add = function(value) {
 //先检测元素是否存在。
 if (!this.has(value)) {
  items[value] = value;
  return true;
 }
 //如果元素已存在则返回false
 return false;
};

remove方法:

说明: 移除集合中某个元素
实现:

/**
 * 移除集合中某个元素
 * @param {Any} value 要移除的元素
 * @return {Boolean}    移除成功返回True。
 */
this.remove = function(value) {
 //先检测元素是否存在。
 if (this.has(value)) {
  delete items[value];
  return true;
 }
 //如果元素不存在,则删除失败返回false
 return false;
};

clear方法:
说明: 清空集合
实现:

/**
 * 清空集合
 */
this.clear = function() {
 this.items = {};
};

size方法

说明: 返回集合长度,这儿有两种方法。第一种方法使用了Object.keys这个Api,但只支持IE9及以上。第二种则适用于所有浏览器。
实现:

/**
 * 返回集合长度,只可用于IE9及以上
 * @return {Number} 集合长度
 */
this.size = function() {
 // Object.keys方法能将对象转化为数组
 // 只可用于IE9及以上,但很方便
 return Object.keys(items).length;
}

/**
 * 返回集合长度,可用于所有浏览器
 * @return {Number} 集合长度
 */
this.sizeLegacy = function() {
 var count = 0;
 for (var prop in items) {
  if (items.hasOwnProperty(prop)) {
   ++count;
  }
 }
 return count;
}

values方法

说明: 返回集合转换的数组,这儿也有两种方法。理由同上。使用了Object.keys,只能支持IE9及以上。
实现:

/**
 * 返回集合转换的数组,只可用于IE9及以上
 * @return {Array} 转换后的数组
 */
this.values = function() {
 return Object.keys(items);
};

/**
 * 返回集合转换的数组,可用于所有浏览器
 * @return {Array} 转换后的数组
 */
this.valuesLegacy = function() {
 var keys = [];
 for (var key in items) {
  keys.push(key)
 };
 return keys;
};

union方法

说明: 返回两个集合的并集
实现:

/**
 * 返回两个集合的并集
 * @param {Set} otherSet 要进行并集操作的集合
 * @return {Set}     两个集合的并集
 */
this.union = function(otherSet) {
 //初始化一个新集合,用于表示并集。
 var unionSet = new Set();
 //将当前集合转换为数组,并依次添加进unionSet
 var values = this.values();
 for (var i = 0; i < values.length; i++) {
  unionSet.add(values[i]);
 }

 //将其它集合转换为数组,依次添加进unionSet。
 //循环中的add方法保证了不会有重复元素的出现
 values = otherSet.values();
 for (var i = 0; i < values.length; i++) {
  unionSet.add(values[i]);
 }

 return unionSet;
};

intersection方法

说明: 返回两个集合的交集
实现:

/**
 * 返回两个集合的交集
 * @param {Set} otherSet 要进行交集操作的集合
 * @return {Set}     两个集合的交集
 */
this.intersection = function(otherSet) {
 //初始化一个新集合,用于表示交集。
 var interSectionSet = new Set();
 //将当前集合转换为数组
 var values = this.values();
 //遍历数组,如果另外一个集合也有该元素,则interSectionSet加入该元素。
 for (var i = 0; i < values.length; i++) {

  if (otherSet.has(values[i])) {
   interSectionSet.add(values[i])
  }
 }

 return interSectionSet;
};

difference方法

说明: 返回两个集合的差集
实现:

/**
 * 返回两个集合的差集
 * @param {Set} otherSet 要进行差集操作的集合
 * @return {Set}     两个集合的差集
 */
this.difference = function(otherSet) {
 //初始化一个新集合,用于表示差集。
 var differenceSet = new Set();
 //将当前集合转换为数组
 var values = this.values();
 //遍历数组,如果另外一个集合没有该元素,则differenceSet加入该元素。
 for (var i = 0; i < values.length; i++) {

  if (!otherSet.has(values[i])) {
   differenceSet.add(values[i])
  }
 }

 return differenceSet;
};

subset方法

说明: 判断该集合是否为传入集合的子集。这段代码在我自己写完后与书上一比对,觉得自己超级low。我写的要遍历数组三次,书上的只需要一次,算法复杂度远远低于我的。
实现:

/**
 * 判断该集合是否为传入集合的子集
 * @param {Set} otherSet 传入的集合
 * @return {Boolean}   是则返回True
 */
this.subset = function(otherSet) {
 // 第一个判定,如果该集合长度大于otherSet的长度
 // 则直接返回false
 if (this.size() > otherSet.size()) {
  return false;
 } else {
  // 将当前集合转换为数组
  var values = this.values();

  for (var i = 0; i < values.length; i++) {

   if (!otherSet.has(values[i])) {
    // 第二个判定。只要有一个元素不在otherSet中
    // 那么则可以直接判定不是子集,返回false
    return false;
   }
  }

  return true;
 }
};

ES6中的集合

ES6也提供了集合,但之前看ES6的集合操作一直迷迷糊糊的。实现一遍后再去看,感觉概念清晰了很多。
具体的我掌握的不是很好,还在学习中,就不写出来啦~推荐看阮一峰老师的《ECMAScript 6入门》中对ES6 Set的介绍。
《ECMAScript 6入门》? Set和Map数据结构

感想

到了这儿,已经掌握了一些基本的数据结构。剩下的都是难啃的骨头了(对我而言)。

字典的散列表、图、树、排序算法。算是四大金刚,所以近期关于数据结构与算法系列的文章,可能会更新的很慢。对我来说,也算是一个坎。希望这个寒假,能跨过这个坎。

Javascript 相关文章推荐
javascript中字符串拼接需注意的问题
Jul 13 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
bootstrap响应式表格实例详解
May 15 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 #Javascript
JavaScript数据结构与算法之链表
Jan 29 #Javascript
动态创建按钮的JavaScript代码
Jan 29 #Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 #Javascript
javascript实现表单验证
Jan 29 #Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 #Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 #Javascript
You might like
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
php制作文本式留言板
2015/03/18 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
js实现随机点名
2021/01/19 Javascript
Python ldap实现登录实例代码
2016/09/30 Python
详解Python进程间通信之命名管道
2017/08/28 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
Django框架反向解析操作详解
2019/11/28 Python
Django app配置多个数据库代码实例
2019/12/17 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
北大青鸟学生求职信
2013/09/24 职场文书
妇产医师自荐信
2014/01/29 职场文书
企业员工培训感言
2014/02/26 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python