JavaScript的Set数据结构详解

馥琳 · 发表于 2022-3-26 11:00:51

1. 什么是 Set

Set 可以简单的看作是数学上的集合。
它是一系列无序，没有重复数值的数据集合。

2. Set 构造函数

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

2.1) 数组

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

复制代码

这里传递了一个数组

[1, 2, 1]

复制代码

作为参数，由于 Set 是无重复数值的集合，所以第三个 1 自动删除了。

2.2) 字符串

const s = new Set("Hello World!");
console.log(s);

复制代码

2.3) arguments

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

复制代码

2.4) NodeList

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>set</title>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
const s = new Set(document.querySelectorAll('p'));
console.log(s);
</script>
</body>
</html>

复制代码

这里将三个

p

复制代码

标签的引用放进了

Set

复制代码

s中；
当我们要用的时候，就可以遍历这个

Set

复制代码

，然后分别将

p

复制代码

标签的引用取出来，然后就可以对

p

复制代码

标签进行修改了。

2.5) Set

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

复制代码

这里相当于把

s1

复制代码

复制过去，给了

s2

复制代码

，不过它们不是同一个

Set

复制代码

console.log(s1 === s2);

复制代码

3. Set 的实例属性和方法

Set 的属性，有一个属性

size

复制代码

，用来存储它的成员个数

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

复制代码

Set的方法

add

给 Set 中添加成员

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

复制代码

delete

用来删除 Set 中的成员

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

复制代码

has

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

const s = new Set([1, 2, 3]);
console.log(s.has(1));
console.log(s.has(5));

复制代码

clear

将会删除 Set 的所有成员

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

复制代码

4. Set 的成员访问

它的成员访问要通过

forEach

复制代码

方法实现，遍历 Set，它的遍历是按成员的添加顺序来进行遍历的。
它有两个参数，第一个参数为回调函数，第二个参数设定回调函数中

this

复制代码

指向什么，即

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

复制代码

我们先来看第一个参数：
对于第一个参数回调函数，它有三个参数：

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

复制代码

通过一个例子理解一下：

const s = new Set([1, 2, 3]);
s.forEach(function(value, key, set) {
console.log(value, key, value === key);
console.log(set, set === s);
});

复制代码

再来看第二个参数：

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

复制代码

5. Set 的注意事项

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

===

复制代码

的判断
不过对于

NaN

复制代码

，在 Set 中，

NaN

复制代码

等于

NaN

复制代码

6. Set 的使用场景

数组去重

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

复制代码

字符串去重

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

复制代码

存放 DOM 元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>set</title>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
const s = new Set(document.querySelectorAll('p'));
s.forEach((elem) => {
console.log(elem)
});
</script>
</body>
</html>

复制代码

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册

JavaScript的Set数据结构详解

本帖子中包含更多资源