当前位置:首页 > JavaScript

js 实现集合

2026-02-02 05:36:58JavaScript

集合的基本概念

集合是一种无序且元素唯一的数据结构,常用于存储不重复的值。JavaScript 原生提供了 Set 对象来实现集合功能。

创建集合

使用 Set 构造函数可以创建一个空集合,或通过传递一个可迭代对象(如数组)初始化集合:

const emptySet = new Set();
const setFromArray = new Set([1, 2, 3, 2]); // 重复的 2 会被自动去重
console.log(setFromArray); // 输出: Set {1, 2, 3}

添加元素

通过 add 方法向集合中添加元素。如果元素已存在,集合不会发生变化:

const set = new Set();
set.add(1);
set.add(2);
set.add(1); // 重复添加无效
console.log(set); // 输出: Set {1, 2}

删除元素

使用 delete 方法移除集合中的指定元素,返回布尔值表示是否删除成功:

set.delete(2); // 返回 true
set.delete(99); // 返回 false

检查元素是否存在

通过 has 方法检查集合是否包含某个元素:

console.log(set.has(1)); // 输出: true
console.log(set.has(2)); // 输出: false

获取集合大小

使用 size 属性获取集合中元素的数量:

console.log(set.size); // 输出: 1

清空集合

调用 clear 方法清空集合中的所有元素:

set.clear();
console.log(set.size); // 输出: 0

遍历集合

集合可以通过 forEach 或迭代器(如 for...of)遍历:

const set = new Set(['a', 'b', 'c']);
set.forEach(value => console.log(value)); // 依次输出 'a', 'b', 'c'

for (const item of set) {
  console.log(item); // 依次输出 'a', 'b', 'c'
}

集合运算

原生 Set 不直接支持并集、交集、差集等操作,但可以通过以下方式实现:

并集:合并两个集合的所有元素

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

交集:获取两个集合共有的元素

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

差集:获取存在于集合 A 但不在集合 B 中的元素

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

集合与数组转换

集合可以通过扩展运算符或 Array.from 转换为数组:

js 实现集合

const set = new Set([1, 2, 3]);
const array1 = [...set];
const array2 = Array.from(set);

注意事项

  • 集合中的元素通过严格相等(===)比较唯一性。
  • NaN 在集合中被视为与自身相等,尽管 NaN !== NaN
  • 对象引用是唯一的,即使内容相同也会被视为不同元素。

标签: js
分享给朋友:

相关文章

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm安…

js实现抽奖

js实现抽奖

实现抽奖功能的基本思路 抽奖功能的核心是随机选择奖项并展示结果。可以通过数组存储奖项,利用随机数生成索引,最后通过动画增强用户体验。 准备奖项数据 定义一个数组存储奖项信息,每个奖项可以包含名称、图…

js实现 功能

js实现 功能

在 JavaScript 中实现功能通常涉及多个关键步骤,具体取决于功能需求。以下是常见功能的实现方法和示例: 基本功能实现 使用函数封装逻辑是最直接的方式。例如,实现一个计算两数之和的函数: f…

js计算器的实现

js计算器的实现

实现基础结构 HTML部分需要创建计算器的基本框架,包含显示区域和按钮。使用<div>容器包裹整个计算器,内部设置一个显示屏和多个按钮。 <div class="calculato…

js 实现页面刷新

js 实现页面刷新

使用 location.reload() location.reload() 是原生 JavaScript 提供的页面刷新方法。调用该方法会重新加载当前页面,相当于点击浏览器的刷新按钮。 // 基本…