¿Necesita valores únicos en JavaScript? Ahí es donde entra en juego el objeto Establecido. Te mostramos cómo usar Set para filtrar una lista de valores primitivos únicos, objetos por referencia u objetos por su contenido (valores).
A Set es una colección única de elementos, y tiene la ventaja sobre los objetos JavaScript de que puede iterar a través de los elementos de un Set en orden de inserción.
«El objeto
Setle permite almacenar valores únicos de cualquier tipo, ya sean valores primitivos o referencias a objetos.»- MDN Docs
En otras palabras, puede recorrer un Set como una matriz, y los elementos permanecen en el orden en que se encontraron. Las propiedades de un objeto JavaScript no conservan su orden de inserción, por lo que el orden en que se agregaron las propiedades a un objeto se pierde en la traducción si se usa intentar filtrar elementos únicos utilizando un objeto.
Set es una función ES6 compatible con todos los navegadores modernos, incluido IE11, de acuerdo con la página de Set() en CanIUse.com.
En este artículo, aprenderá a usar Set para manejar la tarea común de encontrar una lista de elementos únicos en una matriz, ya sea que necesite encontrar valores primitivos únicos (como números o cadenas) u objetos.
Cubriré tanto el uso de Set con referencias de objetos (el comportamiento predeterminado) como con el contenido de esos objetos (encontrar objetos únicos por valor).
Cómo Set Comprueba la Igualdad de valores
Set utiliza el operador de triple igualdad (===) también conocido como el operador de igualdad estricta para comprobar la igualdad de valores u objetos primitivos.
«Un valor en
Setsolo puede aparecer una vez; es único en la colección deSet.»- MDN Docs
Sin embargo, hay algunas diferencias clave con la implementación de la comparación de igualdad entre Set y ===, al menos desde ECMAScript 2015 (ES6).
Para Set, +0 (cero positivo) y -0 (cero negativo) se considera el mismo valor, aunque +0 !== -0 en JavaScript.
De manera similar, Set trata NaN (no un número) de manera diferente a ===, en que Set hace que todos los valores NaNsean iguales y solo almacenará uno en Set.
NaN es típicamente el único valor que no se iguala a sí mismo en JavaScript, lo que significa que NaN === NaN es falso y NaN !== NaN es verdadero.
Para obtener más información sobre cómo funciona NaN, consulte mi artículo sobre Cómo verificar NaN:
Los valores indefinidos (undefined) también se pueden almacenar en un Set, y de nuevo solo se conservará un valor undefined. Sin embargo, ese es un comportamiento normal para ===.
En conjunto, el comportamiento de Set es un poco más cercano al de otra característica de ES6 Object.is() en comparación con ===.
Usar Set para Valores Primitivos Únicos en una matriz
Usar Set es sencillo, en lo que respecta a los objetos JavaScript: llamas al constructor Set() con la palabra clave new: new Set() // Set .
El equivalente al método .push() de matrices (Array.prototype.push()) para un Set se llama .add() (Set.prototype.add()). Funciona de la misma manera, excepto que solo se agregará uno de cada valor único a Set.
Eso significa que puede recorrer un array usando .forEach() (Array.prototype.forEach()) o un bucle for...of, luego .add()cada elemento a un nuevo Set. El objeto Set resultante tendrá solo los valores únicos.
Más simplemente, puede pasar la matriz al constructor Set() directamente. Esto funciona porque el constructor Set() acepta un objeto iterable, como una matriz, como su único parámetro.
» objetos iterables incorporados
String,Array, objetos tipo matriz (p. ej.,argumentsoNodeList),TypedArray,Map,Set, e iterables definidos por el usuario.»- MDN Docs
El parámetro del constructor es opcional; new Set() crea un Set vacío.
Para convertir un Set de vuelta a una matriz, un método para hacerlo es Array.from(). Hablaré de otro método que usa el operador de propagación (...) más adelante, pero el método Array.from() funciona igual de bien y es fácil de leer.
Aquí hay un fragmento de código que muestra el uso de Set con valores primitivos, como números y cadenas, para encontrar los valores únicos en una matriz JavaScript.
¿te gusta el one-liner para encontrar el único de los elementos de una matriz con Set?
Sí, a mí también! Thanks Gracias ES6.
Tenga en cuenta que el orden de la matriz resultante Set es el «orden de inserción», el orden en que se encontraron los valores en la matriz o lista original.
Referencias de objetos únicas en una matriz Que Utiliza Set
Cuando se trabaja con valores primitivos como números o cadenas, un objeto Set funciona tal y como cabría esperar, solo se conservan valores únicos.
Sin embargo, cuando se trabaja con objetos, los objetos que contienen los mismos datos se consideran objetos diferentes para Set porque tienen referencias de objetos diferentes, los «punteros» reales en la memoria a esos objetos.
Para decirlo de otra manera, una matriz con solo el número 1 en ella nunca será igual a otra matriz, incluso si también solo contiene 1: !== // true
Sin embargo, todavía podemos usar Set para encontrar referencias de objetos únicas en una matriz u otro objeto iterable. Esto es muy útil si el mismo objeto puede haber sido agregado varias veces a una matriz, y solo queremos los objetos únicos.
Por ejemplo, si asigna un objeto a una variable y, a continuación, agrega esa variable a una matriz repetidamente, puede usar Set para eliminar los duplicados:
Comprender el concepto de referencias a objetos en JavaScript es algo que he abordado antes, en mi artículo sobre copiar objetos en profundidad en JavaScript:
Más adelante en este artículo, hablaré sobre el uso de Set para comparar objetos por los valores que contienen en lugar de las referencias a objetos que apuntan a ellos.
Cómo hacer un Array a partir de un Conjunto
Mi método favorito para convertir un Set en un array es usar el operador de propagación (...) con un par de corchetes : .
Usted puede incluso escribir como un one-liner:
Wow! Por supuesto, usar el operador de propagación (...) es exactamente equivalente al método Array.from() que estaba usando antes. Siéntase libre de usar cualquiera de los dos.
Una vez que tenga una matriz, puede iterar a través de ella con sus métodos de matriz habituales, como un bucle for...of, .forEach(), .map() y .reduce().
También puede iterar a través de Set directamente, como analizo en la siguiente sección, porque un Set también es un tipo de objeto iterable, al igual que las matrices en sí.
Iterar a través de un Conjunto de Valores únicos
Hay un par de formas básicas para iterar a través de un Set en JavaScript, pero no son los mismos métodos que usaría para matrices:
1 — Usar Conjunto.prototipo.keys() o Set.prototipo.values ()
Estos dos métodos son equivalentes; ambos devuelven un nuevo objeto Iterator que incluye los valores de cada elemento en el Set en orden de inserción.
Tener un objeto Iterator nos permite llamar al método .next() directamente, si es algo que necesita hacer en su código JavaScript.
Arfat Salman tiene un bonito artículo que explica los iteradores CodeBurst.io.
Juego de 2 usos.prototipo.forEach () con una función de devolución de llamada
El método .forEach() para un Set es similar al método del mismo nombre para matrices, por lo que puede llamarlo directamente en un objeto Set.
»
callbackFnuna vez por cada valor presente en el objetoSet, en orden de inserción. Si se proporciona un parámetrothisArg, se utilizará como valorthispara cada invocación decallbackFn.»- MDN Docs
Por supuesto, puede usar una función de flecha como función de devolución de llamada, lo mismo que haría cuando trabaja con una matriz.
3-Utilice a para…de Bucle Directamente Con el Nuevo Conjunto
Como Set es un tipo de objeto iterable, un bucle for...of funcionará de la misma manera con un Set que con un array JavaScript.