Set 对象基础知识

引言

Map 对象的出现可以看作是对 Object 对象的一种扩展和延伸，让 JS 语言对键值对格式的数据处理方式"换了天地"。

Array 对象作为 Object 的万年兄弟，又怎会错过这"旷世奇遇"，于是，Set 对象也应运而生，对 Array 进行了扩展和延伸。

关于 Set 对象

Set 对象是值的集合，可以按照插入的顺序迭代它的元素。

Set 中的值可以是任意类型的值，包括数字、字符串、布尔值、对象等。

Set 中的元素只会出现一次，即 Set 中的元素是唯一的。

关键词：值的集合、值唯一、顺序、任意类型

Set 对象的操作方法基本和 Map 对象的类似，只是细节处略有不同而已。

add(value)

向 Set 中添加一个值，如果值已经存在，则不会进行任何操作。

javascript 复制代码

const set = new Set();
set.add("a"); // Set(1) {'a'}
set.add("b"); // Set(2) {'a', 'b'}
set.add("a"); // Set(2) {'a', 'b'}

注意：Set 对象中重复添加值，是不会进行任何操作（比如：覆盖）的，这点和 Map 不同。

has(value)

用于判断 Set 中是否包含指定的值，如果包含则返回 true，否则返回 false。

javascript 复制代码

const set = new Set();
set.has("a"); // false
set.add("a");
set.has("a"); // true

delete(value)

用于删除 Set 中指定的值，如果值存在则删除该值并返回 true，否则返回 false 并不会进行任何操作。

javascript 复制代码

const set = new Set();
set.delete("a"); // false
set.add("a");
set.delete("a"); // true

clear()

用于清空 Set 中的所有值，使其成为一个空的 Set。

csharp 复制代码

const set = new Set();
set.add('a'); // Set(1) {'a'}
set.add('b'); // Set(2) {'a', 'b'}
set.clear()
console.log(set); // Set(0) {size: 0}

size

返回 Set 中的值的数量。

javascript 复制代码

const set = new Set();
console.log(set.size); // 0
set.add("a");
console.log(set.size); // 1
set.add("b");
console.log(set.size); // 2

forEach(callbackFn, thisArg)

对 Set 中的每个值执行指定的回调函数，回调函数接受三个参数：当前值、当前值的键和 Set 对象本身。

javascript 复制代码

const set = new Set(["a", "b"]);
set.forEach((...args) => {
    console.log(args);
});

// 输出：
// (3) ['a', 'a', Set(2)]
// (3) ['b', 'b', Set(2)]

keys() 、values() 和 entries()

返回一个迭代器，用于遍历 Set 中的所有键和值。因为 Set 是值的集合，所以键和值是相同的。

javascript 复制代码

const set = new Set(["a", "b"]);
console.log(set.keys()); // SetIterator {'a', 'b'}
console.log(set.values()); // SetIterator {'a', 'b'}
console.log(set.entries()); // SetIterator {'a' => 'a', 'b' => 'b'}

Set 和 Array

前面也说了，Set 算是对 Array 的扩展延伸，因此它们之间也是"纠缠不清"。

使用 Array 对 Set 赋初值

在创建 Set 对象时，可以传入一个数组，这个数组中的元素就会成为 Set 的初值。

javascript 复制代码

const set = new Set(["a", "b"]);
console.log(set); // Set(2) {'a', 'b'}

因为 Set 中的值都是唯一的，如果在 Set 初始化时传入有重复值的数组，重复值会被自动过滤。

javascript 复制代码

const set = new Set(["a", "b", "a", "b", "c"]);
console.log(set); // Set(3) {'a', 'b', 'c'}

将 Set 转为 Array

可以通过 Array.from() 方法将 Set 对象转为 Array。

JavaScript 复制代码

const set = new Set(["a", "b", "c"]);
const arr = Array.from(set);
// const arr = [...set];
console.log(arr); // (3) ['a', 'b', 'c']

利用 Set 对数组去重

结合上面两点，我们可以实现对数组的去重。

javascript 复制代码

let arr = ["a", "b", "c", "a", "b"];
const set = new Set(arr);
arr = Array.from(set);
console.log(arr); // (3) ['a', 'b', 'c']

// 简化写法如下：
arr = [...new Set(arr)];

结束语

关于 Set 对象的基础知识就介绍这么多，希望能够对你有所帮助！

~ 全文完