JavaScript 实现集合(Set)数据结构:从原理到 ES6

作者:木棉时间:2026-10-29 21:08:12浏览:478

本文详细讲解如何在 JavaScript 中手动实现集合(Set)数据结构,涵盖构造函数、has、add、remove 等核心方法,以及并集、交集、差集和子集判断的算法逻辑。同时对比了兼容性与 ES6 原生 Set 的使用,帮助开发者深入理解集合特性与底层实现。

集合的基本概念与容器选择

集合(Set)

提到集合,不禁让人联想到高中数学的第一课,因此学习这种数据结构时倍感亲切。集合的核心特性在于元素不重复,基于这一性质,我们选择使用对象而非数组作为集合的底层容器。尽管数组也能通过额外逻辑实现去重,但操作繁琐,远不如集合直观高效。

集合的操作

集合的基础操作包括交集、并集和差集等。本文将重点介绍在 JavaScript 中如何实现这些集合运算。

JavaScript 集合类的核心方法实现

JavaScript 中集合的实现

首先,我们需要定义一个构造函数来初始化集合。


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

集合需要具备以下方法:

  1. has(value):检测集合中是否包含指定元素
  2. add(value):向集合中添加元素
  3. remove(value):从集合中移除元素
  4. clear():清空集合中的所有元素
  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 方法

说明:用于判断当前集合是否为传入集合的子集。作者自述初版代码需遍历数组三次,而参考书籍中的实现仅需一次遍历,算法复杂度显著降低。 实现:


/**
 * 判断该集合是否为传入集合的子集
 * @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 标准也提供了原生的集合支持。此前对 ES6 集合的操作理解较为模糊,通过手动实现一遍后,概念变得清晰许多。由于作者自认掌握尚不深入,此处不再赘述具体实现,推荐参考阮一峰老师的《ECMAScript 6 入门》中关于 Set 和 Map 数据结构的章节。 《ECMAScript 6 入门》– Set 和 Map 数据结构

感想

至此,已掌握部分基础数据结构。剩余部分如字典的散列表、图、树及排序算法等,堪称“四大金刚”,对我而言难度较大。因此,近期关于数据结构与算法系列的更新可能会放缓。这对我来说是一个挑战,希望能在寒假期间克服这一难关。

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

作者最新文章