JavaScript 玩转数据集合：探索 Set 对象迭代、转换和应用场景

一、前语

从上一篇文章中，咱们学习到 Set 目标是 JavaScript 中用于存储独一无二值的调集，与数组或目标不同，Set 目标中的每个值都是仅有的，重复的值将被主动疏忽，这使得 Set 目标成为处理需求去重的数据调集时的有力工具。详细了解请参考上一篇文章：

JavaScript Set 必备攻略：深化理解 Set 的特性和办法

在本篇文章中，咱们将探究 JavaScript Set 目标的迭代、转化和运用场景。经过了解和熟练掌握 Set 目标的特性和办法，咱们将可以更高效、更灵敏地处理数据，并运用于实践开发中。

咱们将从迭代开端，经过 Set 目标内建的迭代器办法，可以轻松地遍历 Set 中的每个元素，并对其履行自界说的操作。不仅如此，Set 还供给了多种转化办法，可以将 Set 转化为数组或其他数据结构，为咱们供给更多的处理选项。

在了解了 Set 的迭代和转化后，咱们将探究一些实践运用场景，无论是数据去重、调集运算（如并集、交集和差集）还是构建简略的缓存机制，Set 目标都可以发挥重要的作用。咱们将深化研究这些运用场景，并展现怎么运用 Set 目标来完成更简练、高效的代码。

二、Set 的迭代

1. 运用 for…of 迭代 Set

当需求遍历 Set 中的元素时，可以运用 for...of 循环语句来轻松地完成。这里供给了一个简略的示例来展现怎么运用 for...of 迭代 Set：

let mySet = new Set([1, 2, 3, 4]);
for (let item of mySet) {
  console.log(item);
}

在上面的示例中，咱们首要创立了一个包括一些整数的 Set。然后，咱们运用 for...of 循环遍历 Set 中的每个元素。这样便可以轻松地遍历和操作 Set 中的元素。

在 for...of 循环中，每次迭代都会将 Set 中的一个元素赋给 item 变量，因而你可以在循环体内对其进行操作或处理。

2. 运用 Set 的 forEach 办法

当你需求对 Set 中的每个元素履行相同的操作时，可以运用 forEach 办法。以下是一个示例，展现了怎么运用 forEach 办法来迭代 Set 中的元素：

let mySet = new Set([1, 2, 3, 4]);
mySet.forEach((value, valueAgain, set) => {
  console.log(value);
});

在这个示例中，咱们运用 forEach 办法来遍历 Set 中的每元素。在这里，回调函数承受三个参数：

• value: 当前迭代的元素的值
• value: 与 value 相同，这个参数的存在是为了与 Map的回调保持一致。
• set: 原始 Set 目标。

你可以在回调函数内部履行与每个元素相关的操作。

3. 将 Set 转化为数组进行迭代

假如你想将 Set 转化为数组以便进行迭代，可以运用 Array.from() 办法或者扩展运算符 ... 来完成。以下是两个示例：

• 运用 Array.from() 办法：

let mySet = new Set([1, 2, 3, 4]);
let myArray = Array.from(mySet);
for (let item of myArray) {
  console.log(item);
}

• 运用扩展运算符 ...：

let mySet = new Set([1, 2, 3, 4]);
let myArray = [...mySet];
for (let item of myArray) {
  console.log(item);
}

无论是运用 Array.from() 还是扩展运算符 ...，都可以将 Set 转化为数组，然后你可以运用 for...of 循环遍历数组的每个元素。

4. 运用 Set 中的 entries(), values(), keys() 办法进行迭代

在 JavaScript 中，咱们可以运用 entries(), values(), keys() 办法从 Set 中获取迭代器，然后运用这些迭代器来进行迭代。

• 运用 entries() 办法将回来一个迭代器，该迭代器的每个元素都是形如[value, value]的数组，其中两个值相同，表示 Set 中的每个项。

示例如下：

let mySet = new Set([1, 2, 3]);
let iterator = mySet.entries();
for (let entry of iterator) {
  console.log(entry);
}

• 运用 values() 办法将回来一个迭代器，该迭代器的每个元素都是 Set 中的值。

示例如下：

let mySet = new Set([1, 2, 3]);
let iterator = mySet.values();
for (let value of iterator) {
  console.log(value);
}

• 运用 keys() 办法将回来一个迭代器，该迭代器的每个元素都是 Set 中的值。因为 Set 中的键和值相同，因而 keys() 与 values() 回来的成果相同。

示例如下：

let mySet = new Set([1, 2, 3]);
let iterator = mySet.keys();
 for (let key of iterator) {
  console.log(key);
}

在上述示例中，咱们运用不同的办法从 Set 中获取迭代器，并且运用 for...of 循环遍历迭代器中的值或键值对，这些办法都能协助你完成对 Set 的迭代操作。

三、Set 与数组、目标的转化

1. 从数组创立 Set

你可以运用数组的内容来创立一个 Set，Set 结构函数可以承受一个可迭代目标作为参数，这样就可以将数组作为参数传递给 Set 结构函数，然后创立一个包括数组内容的 Set。

以下是一个示例，展现了怎么从数组创立一个 Set：

let myArray = [1, 2, 3, 2, 1];
let mySet = new Set(myArray);
console.log(mySet); // 输出: Set(3) {1, 2, 3}

在这个示例中，咱们首要界说了一个包括重复元素的数组 myArray，然后咱们将 myArray 作为参数传递给 Set 结构函数，这样就创立了一个包括数组内容的 Set mySet。因为 Set 中不允许重复的元素，所以重复的元素会被主动去重，终究创立的 Set 中只包括仅有的元素。

2. 从 Set 创立数组

在 JavaScript 中，你可以经过几种办法从 Set 创立数组。以下是两种常见的办法：

• 运用 Array.from 办法： 你可以运用 Array 办法从 Set 中创立数组，这个办法将 Set 转化为一个新的数组。下面是一个示例：

let mySet = new Set([1, 2, 3 ])
let myArray = Array.from(mySet);
console.log(myArray); // 输出: [1, 2, 3]

上面的示例中，咱们首要创立了一个包括一些元素的 Set Set，然运用 Array.from 办法将 mySet换为一个数组 myArray。

• 运用打开运符（Spread Operator） 你还可以运用展运算符 ... 从 Set 中创立数组。这个办法为简练，示下：

let mySet = new Set([1, 2, 3]);
myArray = [...mySet];
console.log(myArray); // 输出: [1 2, 3]

在这个示例中，咱们运用了打开运算符 ... 将 mySet 中的元素打开到一个新的数组 Array 中。

3. 从目标创立 Set

在 JavaScript 中，你可以运用 Set 结构函数来从目标创立 Set。Set 结构函数需求接纳一个可迭代目标（iterable）作为参数，因而你需求将目标的键或值转化为可迭代的形式，然后将其作为参数传递给 Set 结构函数。

以下是一个示例，展现了怎么从目标创立一个 Set：

let myObject = { a: 1, b: 2, c: 3 };
let mySet = new Set(Object.keys(myObject));
console.log(mySet); // 输出: Set(3) {"a", "b", "c"}

在这个示例中，咱们首要界说了一个目标 myObject，然后咱们运用 Object.keys 办法来获取目标的键，即将目标的键转化为一个数组。接下来，咱们将这个数组作为参数传递给 Set 结构函数，这样就创立了一个包括目标键的 Set mySet。

除了运用 Object.keys，你还可以运用其他办法来将目标转化为可迭代的形式，比方 Object.values 或 Object.entries。

四、实践运用场景

1. 运用 Set 去重

Set 的一个常见实践运用场景就是用来去重。在 JavaScript 中，Set 是一种可以存储仅有值的数据结构，这意味着你可以运用 Set 来从数组或其他数据调集中快速去除重复的元素。

以下是一个示例，展现了怎么运用 Set 来去重一个数组：

let arrayWithDuplicates = [1, 2, 3, 1, 2, 4];
let set = new Set(arrayWithDuplicates);
let arrayWithoutDuplicates = Array.from(set);
console.log(arrayWithoutDuplicates); // 输出: [1, 2, 3, 4]

在这个示例中，咱们首要界说了一个包括重复元素的数组 arrayWithDuplicates，然后咱们经过将它传递给 Set 结构函数，创立了一个 Set set，这样就主动去除了重复的元素。接着，咱们经过 Array.from 办法将 Set 转化回数组，得到了一个不包括重复元素的新数组 arrayWithoutDuplicates。

这是 Set 去重的一个常见实践运用场景，特别适用于需求处理大量数据并保证仅有性的状况。

2. 运用 Set 进行交集、并集、差集等操作

运用 Set 进行调集操作（如交集、并集、差集等）是 数据结构的一个重要运用场景。在 JavaScript 中，你可以运用 Set 供给的办法和运算符来完成这些调集操作。

下面是一些示例代码，演示了怎么运用 Set 进行交集、并集、差集等操作：

• 交集（Intersection）：

let set1 = new Set([1, 2, 3]);
let set2 = new Set([2, 3, 4]);
let intersection = new Set([...set1].filter(x => set2.has(x)));
console.log(intersection); // 输出: Set(2) {2, 3}

在这个示例中，咱们创立了两个 Set set1 和 set2，然后经过运用扩展运算符 filter办法，找两个 Set 的交集，并将成果存储在新的 Set intersection 中。

• 并集（Union）：

let set1 = new Set([1, 2, 3]);
let set2 = new Set([3, 4, 5]);
let union = new Set([...set1, ...set2]);
console.log(union); // 输出: Set(5) {1, 2, 3, , 5}

在这个示例中，咱们了两个 Set set1 和 set2，然后经过将它们合并并创立一个新的 Set union，然后得两个 Set 的并集。

• 差集 Difference）：

let set1 = new Set([1, 2, 3]);
let set2 = new Set([3, 4, 5]);
let difference = new Set([...set1].filter(x => !set2.has(x)));
console.log(difference); // 输出: Set(2) {1, 2}

在这个示例中，咱们创立了两个 set1 和 set2，然后经过运用 filter办法找到 set1 相对于 set 的差集，并将成果存储在新的difference 中。

经过这些示例，你可以看到怎么运用 Set 数据结进行交集、并集、差集等集操作。

3. 其他常见运用场景

除了去重和调集操作外，Set 还有一些其他常见的用场景，以下是一些示例：

• 数据调集的快速查找：

运用 Set 来存储大量数据，并运用其 O(1)查找功率，够快速判别某个元素是否已存在于调集中。

let dataSet = new Set([1, 2, 3, 4, 5]);
console.log(dataSet.has(3)); // 输出: true
console.log(dataSet.has(6)); // 输出: false

• 事情订阅与删去：

运用 Set 贮存订阅者，保证每个订阅者只订阅一次，防止重复订阅。

let subscribers = new Set();
function subscribe(subscriber) {
    subscribers.add(subscriber);
}
function unsubscribe(subscriber) {
    subscribers.delete(subscriber);
}
subscribe('click') // 添加订阅
console.log(subscribers)
unsubscribe('click') // 删去订阅
console.log(subscribers)

• 字符去重：

对字符串去重操作，防止重复字符出现，常用一些需求处理仅有字符的场景。

function uniqueChars(arr) {
    return [...new Set(arr)];
}
const arr = ['a', 'b', 'c', 'a', 'd', 'e', 'b', 'c'];
uniqueArr = uniqueChars(arr);
console.log(uniqueArr);

运转上述代码，输出成果为：["a", "b", "c", "d", "e"]，即成功去除了重复的字符。

• 数据比照：

将数据存储在 Set 中，可以方便地进行数据比照，找出交集、差集等

let setA = new Set([1, 2, 3]);
let setB = new Set([3, 4, 5]);
let intersection = new Set([...setA].filter(x => setB.has(x)));
console.log(intersection); // 输出 Set(1) {3}

这些都是 Set 数据结的一些常见运用场景，它的高效的去重和调集操作特性，使得它在实践开发中有着广泛的运用。

五、总结

在本文中，咱们探究了 JavaScript Set 目标的迭代、转化和运用场景。经过对 Set 目标在实践开发中的运用，咱们了解到它在处理独一无二的值调集时具有许多强壮的特性。

首要，经过 Set 目标内建的迭代器办法，如 forEach、keys、values 和 entries，咱们可以轻松地遍历 Set 中的所有元素，并对其中的每个元素履行特定的操作。这使得咱们可以快速而直观地处理数据调集。

其次，Set 目标还可以很容易地与其他数据结构进行转化。咱们可以将 Set 转化为数组，运用打开运算符，或经过 Array.from 办法进行转化。这为咱们供给了灵敏的选项，使咱们可以在不同的场景下灵地操作和运用数据。

最终，经过总结常见的运用场景，对 Set 目标的特性得到了充沛的运用。无复值的特性使得特别适用于数据去重、检查是否存在重项和数组并集、交集、差集等操作。此外，Set 目标还可以用于保存插入的顺序和快速的查找，用于构建简略的缓存机制等。

总的来说，Set 目标为开发者供给了一种简略而强壮的机制来处理独一无二的值调集它的迭代、转化和运用场景让咱们可以愈加灵敏地处理数据，并提高代码的可读性和性能。

期望本文为你在开发过程中运用 Set 带来启示，无论是处理数据调集、去重、运算等，Set 都是一个强壮的工具。