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获得选中文本内容的方法
Dec 02 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
Vue.js快速入门教程
Sep 07 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 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
php桌面中心(一) 创建数据库
2007/03/11 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
Laravel实现表单提交
2017/05/07 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
淘宝搜索框效果实现分析
2011/03/05 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
理解Python中的With语句
2016/03/18 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
大学辅导员事迹材料
2014/02/05 职场文书
购房协议书范本
2014/10/02 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
教师党员自我评价范文
2015/03/04 职场文书
2015团员个人年度总结
2015/11/24 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
七年级生物教学反思
2016/02/20 职场文书
《春酒》教学反思
2016/02/22 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
Vue的过滤器你真了解吗
2022/02/24 Vue.js
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python