Set

作者: 多叉树；转载须注明出处

Set 是 JavaScript 中的一种数据结构，具有以下特点：

• 无序集合：元素在 Set 中的顺序不固定
• 唯一性：Set 中的每个元素都是唯一的，不存在重复值
• 不支持索引访问：无法像数组那样通过下标访问元素

方法和属性

size	返回 Set 中元素的数量
add(value)	向 Set 中添加一个新元素
has(value)	检查 Set 中是否存在某个值
delete(value)	从 Set 中删除指定的元素
clear()	清空 Set 中的所有元素
forEach(callback, thisArg)	遍历 Set 中的每个元素并执行回调函数

forEach 方法接受两个参数：一个回调函数 callback 和一个可选参数thisArg。 回调函数可以有三个参数 , value(当前元素的值), key(当前元素的键，在 Set 中与 value 相同）, set（被遍历的 Set 本身） thisArg 确定回调函数中的this指向 ， 这个参数实际使用中不太常见，可以省略； 但是在回调函数中访问dom时特别有用

应用举例

Set 在以下情况下特别有用：

• 数组或字符串去重
• 需要频繁检查元素是否存在的场景(has方法)
• 只需要遍历元素而不需要通过索引访问的情况

// 创建一个新的 Set
const mySet = new Set();

// 添加元素
mySet.add(1);
mySet.add("hello");
mySet.add({name: "John"});

// 检查元素是否存在
console.log(mySet.has(1)); // true
console.log(mySet.has(2)); // false

// 删除元素
mySet.delete("hello");

// 获取 Set 的大小
console.log(mySet.size); // 2

// 遍历 Set
mySet.forEach(value => {
  console.log(value);
});

// 使用 forEach 遍历 Set
mySet.forEach(function(value, key, set) {
  console.log(`Value: ${value}, Key: ${key}, Is Original Set: ${set === mySet}`);
  console.log(`This keyword is: ${this}`);
}, document);

// 清空 Set
mySet.clear();

注意事项

Set 在判断元素相等时基本遵循严格相等（===），但有一个例外, NaN 在 Set 中被认为是相等的，即 Set集合中只能存在一个 NaN

构造函数

Set 构造函数可以接受各种可迭代对象作为参数

数组

// 使用数组创建 Set
const arraySet = new Set([1, 2, 3, 3, 4, 5]);
console.log(arraySet); // Set(5) { 1, 2, 3, 4, 5 }

字符串

// 使用字符串创建 Set
const stringSet = new Set("hello");
console.log(stringSet); // Set(4) { 'h', 'e', 'l', 'o' }

arguments 对象

arguments 对象是一个类数组对象，表示传递给函数的参数。我们可以直接将 arguments 对象传递给 Set 构造函数来创建一个新的 Set。这在函数需要处理不定数量的参数时特别有用。以下是一个使用 arguments 创建 Set 的例子：

function createSetFromArguments() {
  // 使用 arguments 创建 Set
  const argsSet = new Set(arguments);
  console.log(argsSet);
  return argsSet;
}

// 调用函数并传入多个参数
const mySet = createSetFromArguments(1, 2, 3, 3, 4, 5);
console.log(mySet); // Set(5) { 1, 2, 3, 4, 5 }

// 可以传入任意数量和类型的参数
const mixedSet = createSetFromArguments('a', 'b', 1, {name: 'John'}, 'a');
console.log(mixedSet); // Set(4) { 'a', 'b', 1, {name: 'John'} }

在这个例子中，createSetFromArguments 函数接受任意数量的参数。通过将 arguments 对象传递给 Set 构造函数，我们创建了一个包含所有传入参数的 Set。这个方法自动去除了重复的值（如第一个例子中的 3），并保持了参数的唯一性。

NodeList

NodeList 是一个类数组对象，表示一组 DOM 节点的集合。它通常由诸如 document.querySelectorAll() 或 element.childNodes 等方法返回。虽然 NodeList 看起来像数组，但它实际上是一个对象，不具备数组的所有方法。

要通过 NodeList 创建 Set，可以直接将 NodeList 传递给 Set 构造函数。例如：

// 假设我们有一些段落元素
const paragraphs = document.querySelectorAll('p');

// 使用 NodeList 创建 Set
const paragraphSet = new Set(paragraphs);

console.log(paragraphSet.size); // 输出段落元素的数量

// 现在我们可以使用 Set 的方法操作这些元素
paragraphSet.forEach(paragraph => {
  console.log(paragraph.textContent);
});

在这个例子中，document.querySelectorAll('p') 返回一个包含所有

元素的 NodeList。我们将这个 NodeList 直接传递给 Set 构造函数，创建了一个新的 Set 实例。这个 Set 包含了所有的段落元素，没有重复。

其他 Set 实例

// 使用另一个 Set 创建新的 Set
const newSet = new Set(arraySet);
console.log(newSet); // Set(5) { 1, 2, 3, 4, 5 }

总的来说， Set还是一个比较好用的去重工具。