当前位置:首页 > JavaScript

js实现的集合

2026-02-02 14:28:34JavaScript

JavaScript 中的集合实现

JavaScript 提供了多种方式来实现集合(Set)数据结构,以下是常见的几种方法:

使用原生 Set 对象

ES6 引入了原生的 Set 对象,它允许存储任何类型的唯一值:

const mySet = new Set();
mySet.add(1);
mySet.add(5);
mySet.add('some text');
console.log(mySet.has(1)); // true
console.log(mySet.size); // 3
mySet.delete(5); // 移除5

Set 对象自动处理唯一性,重复添加的值会被忽略。

js实现的集合

使用对象模拟集合

在 ES6 之前,可以使用普通对象来模拟集合:

const set = {};
set['key1'] = true;
set['key2'] = true;
if (set['key1']) {
    console.log('key1 exists');
}
delete set['key1'];

这种方法只能使用字符串作为键,且无法直接存储对象引用。

js实现的集合

实现完整集合功能

如需完整集合功能(并集、交集等),可以扩展 Set 类:

class EnhancedSet extends Set {
    union(otherSet) {
        return new EnhancedSet([...this, ...otherSet]);
    }

    intersection(otherSet) {
        return new EnhancedSet([...this].filter(x => otherSet.has(x)));
    }

    difference(otherSet) {
        return new EnhancedSet([...this].filter(x => !otherSet.has(x)));
    }
}

使用数组实现集合

虽然效率较低,但可以用数组模拟集合:

const set = [];
function add(item) {
    if (!set.includes(item)) {
        set.push(item);
    }
}
function has(item) {
    return set.includes(item);
}
function remove(item) {
    const index = set.indexOf(item);
    if (index > -1) {
        set.splice(index, 1);
    }
}

性能考虑

  • 原生 Set 对象在查找、添加和删除操作上都是 O(1) 时间复杂度
  • 数组实现的集合在查找操作上是 O(n) 时间复杂度
  • 对象实现的集合在查找操作上是 O(1),但仅限于字符串键

集合操作示例

实现常见集合操作:

// 并集
const union = (setA, setB) => new Set([...setA, ...setB]);

// 交集
const intersection = (setA, setB) => new Set([...setA].filter(x => setB.has(x)));

// 差集
const difference = (setA, setB) => new Set([...setA].filter(x => !setB.has(x)));

对于大多数应用场景,推荐使用原生 Set 对象,它提供了最佳性能和最简洁的语法。需要额外功能时,可以扩展原生 Set 或使用第三方库如 lodash 的集合操作方法。

标签: js
分享给朋友:

相关文章

js实现vue

js实现vue

Vue.js 简介 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。其核心库专注于视图层,易于与其他库或现有项目整合。 实现 Vue.js 的基本步骤 安装 Vue.j…

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的HT…

js实现轮播图

js实现轮播图

基础轮播图实现 使用HTML、CSS和JavaScript实现一个简单的自动轮播图。HTML结构包含一个容器和多个图片项。 <div class="slider"> <div…

js实现验证码

js实现验证码

使用Canvas生成图形验证码 在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合,并添加干扰线、噪点等干扰元素增强安全性。 <canvas i…

js实现乘

js实现乘

JavaScript 实现乘法运算 在 JavaScript 中实现乘法运算可以通过多种方式完成,包括基本运算符、函数封装以及高级算法(如大数乘法)。以下是几种常见方法: 使用基本乘法运算符 Jav…

js实现预览

js实现预览

文件上传预览实现 使用JavaScript实现文件上传预览功能,可以通过FileReader对象读取文件内容并显示预览。以下代码支持图片、文本和PDF文件的预览: // HTML部分需要包含…