JavaScript
Set
Explica Set como colección de valores únicos, su comparación por identidad, operaciones de conjuntos, orden de inserción y diferencias frente a arrays.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
- Fundamentos de programación
JavaScript
Explica Set como colección de valores únicos, su comparación por identidad, operaciones de conjuntos, orden de inserción y diferencias frente a arrays.
Un Set es una colección ordenada de valores únicos.
const technologies = new Set([
"JavaScript",
"React",
"JavaScript",
]);
technologies.size; // 2Vacío:
const selectedIds = new Set();Desde cualquier iterable:
const selectedIds = new Set([
"product-1",
"product-2",
]);const letters = new Set("hello");
// "h", "e", "l", "o"El constructor consume los valores uno a uno mediante el protocolo iterable.
selectedIds.add("product-1");
selectedIds.add("product-2");add retorna el mismo Set y permite encadenamiento.
const selectedIds = new Set()
.add("product-1")
.add("product-2");Repetir un valor no cambia el tamaño.
selectedIds.add("product-1");
selectedIds.size; // 2selectedIds.has("product-1"); // truePara una colección cuya pregunta principal es “¿está incluido?”, un Set expresa mejor la intención que un array usado como lista de búsqueda.
const allowedRoles = new Set([
"owner",
"admin",
]);
if (allowedRoles.has(user.role)) {
openAdminPanel();
}No elijas una estructura únicamente por afirmaciones genéricas de rendimiento; considera también claridad, volumen y frecuencia de operaciones.
selectedIds.delete("product-1");delete devuelve true cuando encontró y eliminó el valor.
selectedIds.delete("missing"); // falsePara retirar todo:
selectedIds.clear();selectedIds.size;size es una propiedad.
Set utiliza una comparación equivalente a SameValueZero.
const values = new Set();
values.add(NaN);
values.add(NaN);
values.size; // 1También considera 0 y -0 como el mismo valor.
new Set([0, -0]).size; // 1Los objetos continúan comparándose por identidad.
const first = { id: 1 };
const second = { id: 1 };
new Set([first, second]).size; // 2Tienen la misma forma, pero son referencias diferentes.
const values = [1, 2, 2, 3, 3];
const uniqueValues = [...new Set(values)];
// [1, 2, 3]El Set conserva el orden de la primera aparición.
Esto funciona directamente cuando la igualdad de JavaScript representa la unicidad que necesitas.
const users = [
{ id: 1, name: "Ana" },
{ id: 1, name: "Ana" },
];
[...new Set(users)].length; // 2Son referencias distintas. Para unicidad por id, define la regla.
Con Map:
const uniqueUsers = [
...new Map(
users.map((user) => [user.id, user]),
).values(),
];La última entrada con el mismo ID reemplaza a la anterior. Si necesitas conservar la primera, debes comprobar existencia antes de insertar.
Un Set itera en el orden en que los valores fueron insertados.
const values = new Set(["B", "A", "C"]);
[...values]; // ["B", "A", "C"]Eliminar un valor y agregarlo otra vez lo coloca al final.
values.delete("B");
values.add("B");
[...values]; // ["A", "C", "B"]for (const value of values) {
console.log(value);
}También ofrece:
values.values();
values.keys();
values.entries();Por compatibilidad con Map, keys() es un alias de values().
entries() produce pares repetidos:
[...values.entries()];
// [["A", "A"], ["C", "C"], ["B", "B"]]values.forEach((value, repeatedValue, set) => {
console.log(value, repeatedValue);
});Los dos primeros argumentos contienen el mismo valor. Esta firma mantiene compatibilidad con el patrón (value, key) de Map.
Para una lectura sencilla, for...of suele ser más claro.
Array hacia Set:
const set = new Set(array);Set hacia Array:
const array = [...set];O:
const array = Array.from(set);La conversión es superficial: los objetos interiores conservan sus referencias.
Valores presentes en cualquiera de los conjuntos:
const frontend = new Set([
"JavaScript",
"React",
]);
const backend = new Set([
"JavaScript",
"Node.js",
]);
const all = frontend.union(backend);
// JavaScript, React, Node.jsunion produce un nuevo Set; no modifica los originales.
Valores presentes en ambos:
const shared = frontend.intersection(backend);
// JavaScriptValores presentes en el primer conjunto y ausentes en el segundo:
const onlyFrontend = frontend.difference(backend);
// ReactEl orden de los operandos cambia el resultado.
backend.difference(frontend);
// Node.jsValores presentes en uno de los conjuntos, pero no en ambos:
const exclusive = frontend.symmetricDifference(
backend,
);
// React, Node.jsrequired.isSubsetOf(granted);Pregunta si todos los valores de required existen en granted.
granted.isSupersetOf(required);Pregunta la relación inversa.
first.isDisjointFrom(second);Devuelve true cuando no comparten ningún valor.
Estas operaciones forman parte del estándar moderno de Set. Comprueba el soporte del runtime objetivo cuando trabajes con entornos antiguos.
const requiredPermissions = new Set([
"products:read",
"products:write",
]);
const userPermissions = new Set([
"products:read",
"products:write",
"orders:read",
]);
const canManageProducts =
requiredPermissions.isSubsetOf(userPermissions);La operación expresa directamente la relación entre permisos requeridos y concedidos.
Un array suele ser apropiado cuando:
Un Set suele aportar cuando:
Un Set conserva orden de inserción, pero no ofrece acceso directo por índice.
values[0]; // undefinedPara obtener el primer valor puedes usar el iterador, aunque si necesitas posiciones con frecuencia probablemente un array sea más adecuado.
const selected = new Set();
selected.add("product-1");Set es mutable aunque la variable use const.
Para representar una nueva versión sin modificar la anterior:
const nextSelected = new Set(selected);
nextSelected.add("product-2");La copia es superficial.
Las operaciones modernas como union y difference ya producen otro Set.
JSON.stringify(new Set([1, 2, 3]));
// "{}"JSON no serializa los valores automáticamente.
Una representación posible:
JSON.stringify([...set]);Al reconstruir:
const set = new Set(JSON.parse(serialized));Los objetos se reconstruyen como referencias nuevas, por lo que su identidad no se conserva entre procesos.
function toggleSelection(selectedIds, id) {
const next = new Set(selectedIds);
if (next.has(id)) {
next.delete(id);
} else {
next.add(id);
}
return next;
}La función preserva la colección anterior y garantiza que un ID no aparezca dos veces.
size con length.const vuelve inmutable el Set.difference depende del orden de los conjuntos.Set guarda valores únicos en orden de inserción.add, has, delete, clear y size forman su API básica.Array.from.¿Por qué este Set tiene tamaño 2?
const values = new Set([
{ id: 1 },
{ id: 1 },
]);Porque cada literal crea un objeto distinto. Set compara objetos por identidad de referencia, no por el contenido de sus propiedades.
WeakMap y WeakSet permiten asociar información a valores recolectables sin mantenerlos vivos únicamente por pertenecer a la colección.