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中的继承实例代码
Apr 27 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
微信小程序实现转盘抽奖
Sep 21 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数组中的重复值的实现代码
2011/07/17 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
asp 取文本框名称代码
2008/12/02 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
python简单贪吃蛇开发
2019/01/28 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
小学生暑假家长评语
2014/04/17 职场文书
小学清明节活动总结
2014/07/04 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
实习指导教师评语
2014/12/30 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers