JavaScript的Set数据结构详解

更新时间:2023-04-04 09:44:30 阅读：评论：0

1. 什么是 t

t 可以简单的看作是数学上的集合。

它是一系列无序，没有重复数值的数据集合。

2. t 构造函数

对于 t 的构造函数的参数，可以传递以下几种形式。

2.1) 数组

const s = new t([1, 2, 1]);console.log(s);

这里传递了一个数组[1, 2, 1]作为参数，由于 t 是无重复数值的集合，所以第三个 1 自动删除了。

2.2) 字符串

const s = new t("hello world!");console.log(s);

2.3) arguments

function fun() {    const s = new t(arguments);    console.log(s);}fun(1, 2, 3);

2.4) nodelist

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <meta http-equiv="x-ua-compatible" content="ie=edge">    <meta name="viewport" content="width=device-width, initial-scale=1励志素材.0">    <title>t</title></head><body>    <p>1</p>    <p>2</p>    <p>3</p>        <script>        const s = new t(document.querylectorall('p'));        console.log(s);    </script></body></html>

这里将三个p标签的引用放进了ts中；

当我们要用的时候，就可以遍历这个t，然后分别将p标签的引用取出来，然后就可以对p标签进行修改了。

2.5) t

const s1 = new t([1, 2, 3]);const s2 = new t(s1);console.log(s2);

这里相当于把s1复制过去，给了s2，不过它们不是同一个t

console.log(s1 === s2);

3. t 的实例属性和方法

t 的属性，有一个属性size，用来存储它的成员个数

const s = new t([1, 2, 3]);console.log(s.size);

t的方法

add

给 t 中添加成员

const s = new t([1, 2, 3]);// 它的参数只能传一个s.add(5);console.log(s);// 可以连缀 adds.add(7).add(9);console.log(s);

特长和爱好怎么写

delete

用来删除 t 中的成员

const s = new t([1, 2, 3]);s.delete(2);// 如果要删除的东西在 t 中找不到，将什么也不会发生，也不会报错s.delete(5);console.log(s);

has

用来判断 t 是否含有某个成员

const s = new t([1, 2, 3]);console.log(s.has(1));c安徽名优特产onsole.log(s.has(5));

clear

将会删除 t 的所有成员

const s = new t([1, 2, 3]);s.clear();console.log(s);

4. t 的成员访问

它的成员访问要通过foreach方法实现，遍历 t，它的遍历是按成员的添加顺序来进行遍历的。

它有两个参数，第一个参数为回调函数，第二个参数设定回调函数中this指向什么，即

s.foreach(回调函数, 回调函数的指向)

我们先来看第一个参数：

对于第一个参数回调函数，它有三个参数：

s.foreach(function(value, key, t){value 就是 t 的成员在 t 中，value 和 key 是相等的t 就是前面t的本身，即这里 t === s});

通过一个例子理解一下：

const s 逍遥游原文= new t([1, 2, 3]);s.foreach(function(value, key, t) {    console.log(value, key, value === key);    console.log(t, t === s);});

再来看第二个参数：

const s = new t([1, 2, 3]);s.foreach(function(value, key, t) {    console.log(this);}, document);

5. t 的注意事项

t 对重复值的判断基本遵循严格相等===的判断

不过对于nan，在 t 中，nan等于nan

6. t 的使用场景

数组去重

let arr = [1, 2, 1];const s = new t(arr);arr = [...s];// 也可以合成一句// arr问道游戏 = [...new t(arr)];console.log(arr);

字符串去重

let str = "11231131242";const s = new t(str);str = [...s].join("");// 也可以写成一句// str = [...new t(str)].join("");console.log(str);

存放 dom 元素

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <meta http-equiv="x-ua-compatible" content="ie=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>t</title></head><body>    <p>1</p>    <p>2</p>    <p>3</p>        <script>        const s = new t(document.querylectorall('p'));        s.foreach((elem) => {            console.log(elem)        });    </script></body></html>