¿Por qué Set?

Es una estructura de datos que te permite almacenar valores únicos de cualquier tipo. Es similar a un array, pero no permite valores duplicados. Es una excelente manera de mantener valores únicos de cualquier tipo. A veces, deseas almacenar valores únicos en un array, pero no quieres recorrer el array para verificar si el valor ya existe. Ahí es donde Set resulta útil.

En un artículo anterior, hablamos sobre Javascript Map. Set es similar a Map, pero solo almacena las claves, no los valores. Es una excelente manera de mantener valores únicos de cualquier tipo. Es abrumador usar Map en tantos casos. Es por eso que hablemos de Set.

¿Qué es JavaScript Set?

Los objetos Set son colecciones de valores. Un valor en Set solo puede ocurrir una vez; es único en la colección de Set. Puedes iterar a través de los elementos de un set en orden de inserción. El orden de inserción corresponde al orden en que cada pieza se insertó en Set mediante el método add() correctamente (es decir, no había un elemento idéntico ya en Set cuando Set llamó a add()).

La especificación requiere que los conjuntos se implementen "de modo que, en promedio, proporcionen tiempos de acceso que sean sublineales en el número de elementos en la colección". Por lo tanto, podría representarse internamente como una tabla hash (con búsqueda O(1)), un árbol de búsqueda (con búsqueda O(log(N))) o cualquier otra estructura de datos, siempre que la complejidad sea mejor que O(N).

Cómo crear un Set

Hay dos maneras de crear un Set. La primera forma es usar el constructor Set. La segunda forma es usar el literal de objeto Set.

Constructor Set

El constructor Set crea un nuevo objeto Set. Puedes pasar un objeto iterable como argumento al constructor. Los elementos del objeto iterable se agregarán al nuevo Set.

const set = new Set([1, 2, 3, 4, 5])

Literal de objeto Set

El literal de objeto Set crea un nuevo objeto Set. Puedes pasar un objeto iterable como argumento al literal de objeto. Los elementos del objeto iterable se agregarán al nuevo Set.

const set = {1, 2, 3, 4, 5};

Métodos y propiedades de Set

Método	Descripción
add()	Agrega un nuevo elemento con un valor especificado al objeto Set.
clear()	Elimina todos los elementos del objeto Set.
delete()	Elimina el elemento asociado con el valor y devuelve el valor que Set.prototype.has(value) habría devuelto previamente. Set.prototype.has(value) devolverá false después.
entries()	Devuelve un nuevo objeto Iterator que contiene un array de [value, value] para cada elemento en el objeto Set, en orden de inserción.
forEach()	Ejecuta una función proporcionada una vez por cada valor en el objeto Set, en orden de inserción.
has()	Devuelve un booleano que afirma si un elemento está presente con el valor dado en el objeto Set.
keys()	Devuelve un nuevo objeto Iterator que contiene los valores para cada elemento en el objeto Set en orden de inserción.
values()	Devuelve un nuevo objeto Iterator que contiene los valores para cada elemento en el objeto Set en orden de inserción.

Propiedad	Descripción
size	Devuelve el número de valores en el objeto Set.

Ejemplos de Set

Agregar un valor a Set

const set = new Set([1, 2, 3, 4, 5])
set.add(6)
console.log(Set) // Set { 1, 2, 3, 4, 5, 6 }

Eliminar un valor de Set

const set = new Set([1, 2, 3, 4, 5])
set.delete(3)
console.log(set) // Set { 1, 2, 4, 5 }

Verificar si un valor existe en Set

const set = new Set([1, 2, 3, 4, 5])
console.log(set.has(3)) // true

Iterar a través de Set

const set = new Set([1, 2, 3, 4, 5])
for (const item of Set) {
  console.log(item)
}
// 1
// 2
// 3
// 4
// 5

Convertir Set a Array

const set = new Set([1, 2, 3, 4, 5])
const array = Array.from(set)
console.log(array) // [1, 2, 3, 4, 5]

Convertir Array a Set

const Array = [1, 2, 3, 4, 5]
const set = new Set(array)
console.log(Set) // Set { 1, 2, 3, 4, 5 }

Obtener el tamaño de Set

const set = new Set([1, 2, 3, 4, 5])
console.log(set.size) // 5

Limpiar Set

const set = new Set([1, 2, 3, 4, 5])
set.clear()
console.log(set) // Set {}

Fusionar Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
const set3 = new Set([...set1, ...set2])
console.log(set3) // Set { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }

Obtener la intersección de dos Sets

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => set2.has(x)))
console.log(set3) // Set { 4, 5 }

Obtener la diferencia entre dos Sets

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => !set2.has(x)))
console.log(set3) // Set { 1, 2, 3 }

Verificar si Set es un subconjunto de otro Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set2].every((x) => set1.has(x))) // true

Verificar si Set es un superconjunto de otro Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set1].every((x) => set2.has(x))) // false

Verificar si dos Sets son disjuntos

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
console.log([...set1].every((x) => !set2.has(x))) // true

Verificar si dos Sets son iguales

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([1, 2, 3, 4, 5])
console.log(set1.size === set2.size && [...set1].every((x) => set2.has(x))) // true

Soporte del navegador

Chrome	Firefox	Edge	Safari	Opera
49+	44+	12+	10.1+	36+

Set vs. Array

Set	Array
Valor único, no permitir valores duplicados	Permitir valores duplicados
Set es una colección de valores sin un orden en particular	Array es una colección de valores en un orden particular
Set es iterable	Array es iterable
Set es más lento que un array en la inicialización porque usa un proceso hash.	Array es más rápido en términos de inicialización
El rendimiento es mejor al verificar la existencia de un elemento	El rendimiento es mejor al acceder a un elemento

Este artículo se publicó originalmente en blog.imam.dev.

JavaScript Set, algo que todo junior debe saber