0

0

JavaScript的Set数据结构是什么?怎么用?

煙雲

煙雲

发布时间:2025-07-09 21:43:01

|

356人浏览过

|

来源于php中文网

原创

set是javascript中用于存储唯一值的数据结构,其核心特点是元素不可重复。1. 创建实例后通过add添加元素,重复值不会被加入;2. 使用has检查存在性,delete删除元素,size获取数量;3. set遍历可用for...of或foreach;4. 清空使用clear方法;5. 常见用途包括数组去重、快速查找判断、集合运算(如并集、交集、差集);6. 与数组相比,set更适合需要唯一性和高效成员检测的场景,而数组适合依赖索引顺序和允许重复的情况;7. set可存储原始值和对象引用,但对象比较基于引用地址,相同内容不同实例仍视为不同元素;8. set在判断nan时将其视为相等,解决数组中nan无法自比较的问题。

JavaScript的Set数据结构是什么?怎么用?

Set是JavaScript中一种特殊的数据结构,它允许你存储任何类型的唯一值,无论是原始值还是对象引用。它的核心特点就是“唯一性”,当你往Set里添加重复的元素时,它只会保留一份。用起来也很直观,主要通过adddeletehassize等方法来操作,是一个非常实用的数据集合。

JavaScript的Set数据结构是什么?怎么用?

Set的用法其实挺直接的,就像操作一个集合。 首先,你需要创建一个Set实例:

const mySet = new Set();

然后,你可以往里面添加元素:

JavaScript的Set数据结构是什么?怎么用?
mySet.add(1);
mySet.add('hello');
mySet.add({ name: 'Alice' });
mySet.add(1); // 这一行不会有任何效果,因为1已经存在了

检查某个元素是否存在:

立即学习Java免费学习笔记(深入)”;

console.log(mySet.has(1));      // true
console.log(mySet.has('world')); // false

删除元素:

JavaScript的Set数据结构是什么?怎么用?
mySet.delete('hello');
console.log(mySet.has('hello')); // false

获取Set的大小(元素的数量):

console.log(mySet.size); // 2 (因为1和{name: 'Alice'}还在)

遍历Set:Set是可迭代的,所以你可以用for...of循环或者forEach

for (const item of mySet) {
  console.log(item);
}
// 输出:
// 1
// { name: 'Alice' }

mySet.forEach((value, key, set) => {
  console.log(value); // Set的forEach回调函数中,value和key是同一个值
});

清空Set:

mySet.clear();
console.log(mySet.size); // 0

一个挺常见的场景是数组去重:

const numbers = [1, 2, 3, 2, 1, 4, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Set与数组(Array)有哪些关键区别?我什么时候该用Set而不是数组?

Set和数组虽然都能存储数据,但它们的设计哲学和用途有着本质的不同。我个人觉得,理解这些差异是决定何时使用它们的关键。

最大的区别当然是唯一性。数组允许重复元素,你可以在一个数组里放无数个1[1, 1, 1]完全没问题。但Set不行,new Set([1, 1, 1])最后只会得到一个包含1的Set。这意味着如果你需要一个集合来确保所有成员都是独一无二的,Set是首选,它帮你省去了手动去重的麻烦和潜在的bug。

然后是查找效率。虽然具体实现可能因JavaScript引擎而异,但通常情况下,Set在检查元素是否存在(has()方法)时,理论上比数组的includes()indexOf()要快,尤其是在处理大量数据时。这是因为Set内部通常会使用哈希表或其他优化结构来存储元素,实现接近O(1)的查找时间复杂度。而数组的查找往往是O(n)的线性扫描。所以,如果你的核心操作是频繁地检查某个元素是否在集合中,Set会是性能更好的选择。

再者是元素顺序。数组是有序的,元素的插入顺序和索引位置是固定的。arr[0]永远是第一个元素。Set在ES6规范中是有序的,它会保持元素的插入顺序,但你不能通过索引来访问元素。这一点和Map类似,它们的迭代顺序是按照元素添加的顺序来的。但在实际开发中,我们通常不依赖Set的插入顺序来做逻辑判断,因为它的主要价值在于“成员资格”而非“位置”。

魔法映像企业网站管理系统
魔法映像企业网站管理系统

技术上面应用了三层结构,AJAX框架,URL重写等基础的开发。并用了动软的代码生成器及数据访问类,加进了一些自己用到的小功能,算是整理了一些自己的操作类。系统设计上面说不出用什么模式,大体设计是后台分两级分类,设置好一级之后,再设置二级并选择栏目类型,如内容,列表,上传文件,新窗口等。这样就可以生成无限多个二级分类,也就是网站栏目。对于扩展性来说,如果有新的需求可以直接加一个栏目类型并新加功能操作

下载

所以,什么时候用Set?

  • 需要去重时:这是Set最直观也最常用的场景。比如收集用户访问过的页面ID,确保每个ID只记录一次。
  • 需要快速判断某个元素是否存在于集合中时:如果你有一个“黑名单”或者“白名单”,需要频繁地检查某个项是否在其中,Set的has()方法会非常高效。
  • 处理数学上的集合操作时:比如求两个集合的交集、并集、差集,Set能让你更优雅地实现这些逻辑。虽然JavaScript本身没有直接提供这些操作符,但通过Set的方法组合,实现起来非常简洁。
    • 并集: new Set([...setA, ...setB])
    • 交集: new Set([...setA].filter(x => setB.has(x)))
    • 差集: new Set([...setA].filter(x => !setB.has(x)))

什么时候用数组?

  • 需要保持元素顺序并依赖索引访问时:比如一个列表、一个队列、一个栈,或者任何需要通过位置来操作数据的场景。
  • 允许重复元素时:比如一个日志记录,你可能需要记录每次操作,即使操作内容相同。
  • 需要更丰富的数组方法时:数组有mapfilterreducesort等大量高阶函数,这些是Set所不具备的。当然,你可以把Set转换成数组再用这些方法,但如果一开始就知道需要这些操作,直接用数组会更自然。

总的来说,Set是“我关心里面有什么,不关心有多少个,不关心它们的位置”,而数组是“我关心里面有什么,有多少个,它们都在哪儿”。

Set能存储哪些类型的数据?它如何判断元素是否重复?

Set能够存储几乎所有JavaScript支持的数据类型,这包括:

  • 原始值(Primitives)numberstringbooleannullundefinedSymbolBigInt
  • 对象(Objects):包括普通对象字面量、数组、函数、Date对象等等。

关于Set如何判断元素是否重复,这是它的一个核心机制,也是有时会让人感到困惑的地方。Set内部使用了一种叫做“Same-value-zero equality”的算法来比较值。这基本上就是JavaScript的严格相等操作符===,但有几个特殊之处:

  1. +0-0被认为是相同的。 new Set([-0]).add(+0),Set里最终只会有一个-0(或者+0,取决于实现,但它们被视为等价)。

  2. NaN被认为是相同的。 这是一个非常重要的特性!在JavaScript中,NaN === NaNfalse,但Set里new Set([NaN]).add(NaN)只会存储一个NaN。这解决了在数组中处理NaN去重时的痛点。

    const s = new Set();
    s.add(NaN);
    s.add(NaN);
    console.log(s.size); // 1
  3. 对象引用:这是最容易踩坑的地方。对于对象类型(包括数组、函数等),Set判断重复是基于引用地址的。这意味着,即使两个对象看起来内容完全一样,只要它们是不同的对象实例,Set就会把它们当作不同的元素。

    const obj1 = { id: 1, name: 'A' };
    const obj2 = { id: 1, name: 'A' };
    const arr1 = [1, 2];
    const arr2 = [1, 2];
    
    const mySet = new Set();
    mySet.add(obj1);
    mySet.add(obj2); // obj2和obj1是不同的引用,所以会被添加
    mySet.add(arr1);
    mySet.add(arr2); // arr2和arr1是不同的引用,所以会被添加
    
    console.log(mySet.size); // 4
    console.log(mySet.has(obj1)); // true
    console.log(mySet.has({ id: 1, name: 'A' })); // false,因为这是新的对象引用

    如果你想让Set根据对象的内容来判断重复,你需要做一些额外的工作,比如在添加对象前,先将对象“序列化”成字符串(例如JSON.stringify),或者维护一个Map来映射对象到它们的唯一标识符。但这通常意味着你正在处理更复杂的数据结构,Set的这种“浅比较”行为是其设计的一部分,目的是保持高效。

所以,理解Set的Same-value-zero equality对于正确使用它来去重至关重要,特别是当涉及到NaN和对象时。

除了基本的添加、删除、查询,Set还有哪些高级用法或常见应用场景?

Set除了那些基础操作,在实际开发中还有一些很巧妙或者说高级一点的应用,能让代码变得更简洁、更有效率。

一个我个人觉得非常优雅的用法是轻松实现集合运算。虽然JavaScript没有像Python那样直接的集合操作符(比如&|),但借助Set和展开运算符,以及数组的filter方法,我们可以非常简洁地实现并集、交集、差集。

const setA = new Set([1, 2, 3, 4]);
const setB = new Set([3, 4,

相关专题

更多
python开发工具
python开发工具

php中文网为大家提供各种python开发工具,好的开发工具,可帮助开发者攻克编程学习中的基础障碍,理解每一行源代码在程序执行时在计算机中的过程。php中文网还为大家带来python相关课程以及相关文章等内容,供大家免费下载使用。

707

2023.06.15

python打包成可执行文件
python打包成可执行文件

本专题为大家带来python打包成可执行文件相关的文章,大家可以免费的下载体验。

625

2023.07.20

python能做什么
python能做什么

python能做的有:可用于开发基于控制台的应用程序、多媒体部分开发、用于开发基于Web的应用程序、使用python处理数据、系统编程等等。本专题为大家提供python相关的各种文章、以及下载和课程。

734

2023.07.25

format在python中的用法
format在python中的用法

Python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

616

2023.07.31

python教程
python教程

Python已成为一门网红语言,即使是在非编程开发者当中,也掀起了一股学习的热潮。本专题为大家带来python教程的相关文章,大家可以免费体验学习。

1234

2023.08.03

python环境变量的配置
python环境变量的配置

Python是一种流行的编程语言,被广泛用于软件开发、数据分析和科学计算等领域。在安装Python之后,我们需要配置环境变量,以便在任何位置都能够访问Python的可执行文件。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

547

2023.08.04

python eval
python eval

eval函数是Python中一个非常强大的函数,它可以将字符串作为Python代码进行执行,实现动态编程的效果。然而,由于其潜在的安全风险和性能问题,需要谨慎使用。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

573

2023.08.04

scratch和python区别
scratch和python区别

scratch和python的区别:1、scratch是一种专为初学者设计的图形化编程语言,python是一种文本编程语言;2、scratch使用的是基于积木的编程语法,python采用更加传统的文本编程语法等等。本专题为大家提供scratch和python相关的文章、下载、课程内容,供大家免费下载体验。

695

2023.08.11

笔记本电脑卡反应很慢处理方法汇总
笔记本电脑卡反应很慢处理方法汇总

本专题整合了笔记本电脑卡反应慢解决方法,阅读专题下面的文章了解更多详细内容。

1

2025.12.25

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
最新Python教程 从入门到精通
最新Python教程 从入门到精通

共4课时 | 0.6万人学习

Django 教程
Django 教程

共28课时 | 2.4万人学习

SciPy 教程
SciPy 教程

共10课时 | 0.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号