当前位置:首页 > JavaScript

js实现集合

2026-03-15 09:31:14JavaScript

JavaScript 实现集合的方法

在 JavaScript 中,可以通过多种方式实现集合(Set)数据结构,以下是几种常见的方法:

使用 ES6 的 Set 类

ES6 引入了原生的 Set 类,可以直接使用它来创建集合。

const set = new Set();
set.add(1);
set.add(2);
set.add(1); // 重复元素会被忽略
console.log(set.has(1)); // true
set.delete(1);
console.log(set.size); // 1

使用对象模拟集合

在 ES6 之前,可以通过对象来模拟集合的功能。

const set = {};
set['1'] = true;
set['2'] = true;
set['1'] = true; // 重复元素会被覆盖
console.log('1' in set); // true
delete set['1'];
console.log(Object.keys(set).length); // 1

实现自定义集合类

如果需要更灵活的功能,可以自定义一个集合类。

class MySet {
  constructor() {
    this.items = {};
  }

  add(element) {
    if (!this.has(element)) {
      this.items[element] = element;
      return true;
    }
    return false;
  }

  delete(element) {
    if (this.has(element)) {
      delete this.items[element];
      return true;
    }
    return false;
  }

  has(element) {
    return Object.prototype.hasOwnProperty.call(this.items, element);
  }

  size() {
    return Object.keys(this.items).length;
  }

  values() {
    return Object.values(this.items);
  }
}

const set = new MySet();
set.add(1);
set.add(2);
console.log(set.values()); // [1, 2]

使用数组实现集合

虽然数组的性能不如对象或 Set,但在某些场景下也可以用数组模拟集合。

const set = [];
function add(element) {
  if (!set.includes(element)) {
    set.push(element);
  }
}
add(1);
add(2);
add(1);
console.log(set); // [1, 2]

集合操作

可以扩展集合的功能,实现并集、交集、差集等操作。

js实现集合

function union(setA, setB) {
  const unionSet = new Set();
  setA.forEach(value => unionSet.add(value));
  setB.forEach(value => unionSet.add(value));
  return unionSet;
}

function intersection(setA, setB) {
  const intersectionSet = new Set();
  setA.forEach(value => {
    if (setB.has(value)) {
      intersectionSet.add(value);
    }
  });
  return intersectionSet;
}

const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);
console.log(union(setA, setB)); // Set {1, 2, 3, 4}
console.log(intersection(setA, setB)); // Set {2, 3}

以上方法可以根据具体需求选择适合的实现方式。ES6 的 Set 是最推荐的方式,因为它提供了完整的集合操作且性能最优。

标签: js
分享给朋友:

相关文章

js实现轮播

js实现轮播

实现基础轮播效果 使用HTML结构创建轮播容器和图片元素: <div class="carousel"> <div class="carousel-inner">…

js实现分页

js实现分页

实现分页的基本思路 分页功能通常需要处理数据分割、页码生成和用户交互。核心逻辑包括计算总页数、根据当前页截取数据、渲染页码按钮等。 前端分页实现(静态数据) 假设已有全部数据,仅需前端分页展示:…

js实现vue

js实现vue

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

js实现继承

js实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现文件下载

js实现文件下载

使用 a 标签下载文件 通过动态创建 a 标签并设置 download 属性实现文件下载。适用于已知文件 URL 或 Blob 数据的情况。 function downloadFile(url, f…

js实现复制到剪贴板

js实现复制到剪贴板

使用document.execCommand方法(传统方式,已废弃但部分浏览器仍支持) 该方法适用于旧版浏览器,但已被标记为废弃。执行前需确保文本已被选中: function copyToClipb…