当前位置:首页 > JavaScript

js实现集合

2026-04-07 03:01:06JavaScript

集合的基本概念

在JavaScript中,集合(Set)是一种存储唯一值的数据结构,不允许重复元素。ES6引入了原生Set对象,但也可以手动实现类似功能。

使用原生Set对象

ES6的Set对象提供集合功能:

const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(1); // 重复值不会被添加

console.log(mySet.size); // 2
console.log(mySet.has(1)); // true
mySet.delete(2);

手动实现集合类

可以创建一个自定义集合类:

js实现集合

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

  has(value) {
    return this.items.hasOwnProperty(value);
  }

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

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

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

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

集合操作

实现常见的集合操作:

// 并集
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;
}

// 差集
function difference(setA, setB) {
  const differenceSet = new Set();
  setA.forEach(value => {
    if (!setB.has(value)) {
      differenceSet.add(value);
    }
  });
  return differenceSet;
}

集合与数组转换

集合与数组之间可以相互转换:

js实现集合

// 数组转集合
const arr = [1, 2, 3, 3];
const setFromArr = new Set(arr); // {1, 2, 3}

// 集合转数组
const arrFromSet = [...setFromArr]; // [1, 2, 3]

集合的迭代

可以使用各种方式迭代集合:

const mySet = new Set([1, 2, 3]);

// for...of循环
for (let item of mySet) {
  console.log(item);
}

// forEach方法
mySet.forEach(value => {
  console.log(value);
});

WeakSet

对于对象集合,可以使用WeakSet,它只存储对象引用且是弱引用:

const weakSet = new WeakSet();
const obj = {};
weakSet.add(obj);
console.log(weakSet.has(obj)); // true

标签: js
分享给朋友:

相关文章

jquery.js

jquery.js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,用于简化 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它的设计宗旨是“Write Less, Do Mor…

js实现轮播

js实现轮播

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

js实现继承

js实现继承

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

js实现vr

js实现vr

使用WebXR API实现VR体验 WebXR是浏览器中实现VR和AR体验的标准API,它取代了早期的WebVR。现代浏览器如Chrome、Edge和Firefox已支持WebXR。 // 初始化W…

js jquery

js jquery

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够…

js实现滑动

js实现滑动

实现滑动效果的方法 在JavaScript中实现滑动效果可以通过多种方式完成,以下是几种常见的实现方法: 使用CSS过渡和JavaScript触发 通过CSS定义过渡效果,JavaScript控制触…