hand Inicio
hand JSBloqs
hand GutenBloqs
Qu茅?
noched铆a

DESARROLLO WEB con
REACT y WORDPRESS

Ap煤ntate a la newsletter (escribo algo de tanto en cuanto)

C贸mo eliminar duplicados de un array en JavaScript?

200 palabras
1 minutos
October 9, 2020
blogjavascript

La manera m谩s r谩pida, transformar el array en un Set y luego volver a un array

  1. Arrays y Objects
  2. Sets
  3. Filter
  4. Reduce

Multitud de veces necesitaremos eliminar duplicados de un array, y sorprendentemente no tenemos una funci贸n espec铆fica para eso

Pero no todo est谩 perdido, vamos a ver las distintas estrategias que tenemos con las diferentes estructuras de datos

Arrays y Objects

En un array no tenemos problemas en almacenar duplicados

js
// definimos el array
const myArr = []
myArr[0] = '馃槑'
myArr[1] = '馃槑'
myArr[2] = '馃槑'
// lo mismo, pero de forma m谩s concisa
const myArr = ['馃槑', '馃槑', '馃槑']
// lo mismo, m谩s compacto si tuvi茅semos que definir 10 o 20 elementos
const myArr = Array.from({ length: 3 }, () => '馃槑')

Si en nuestros datos hay duplicados, un array los almacenar谩 sin problemas

Esto, sin embargo, no pasa con un object

js
const myObj = { url: '馃槑', url: '馃槑', url: '馃槑' }
console.log(myObj) // {url: '馃槑'}

En este caso no hemos almacenado ning煤n duplicado, s贸lo una copia del mismo valor

Esto lo podemos aprovechar para eliminar duplicados de un array, aunque el c贸digo no es demasiado elegante

js
const myArr = ['馃槑', '馃槑', '馃槑', '馃槄'] // tenemos duplicados!
const newArr = []
const myObj = {}
myArr.forEach(el => {
// comprobamos si el valor existe en el objeto
if (!(el in myObj)) {
// si no existe creamos ese valor y lo a帽adimos al array final, y si s铆 existe no lo a帽adimos
myObj[el] = true
newArr.push(el)
}
})
console.log(myArr) // ["馃槑", "馃槑", "馃槑", "馃槄"]
console.log(newArr) // ["馃槑", "馃槄"]
Ver en CodeSandBox

Conseguido, hemos eliminado los duplicados, y en verdad podemos compactar m谩s el c贸digo

js
const myArr = ['馃槑', '馃槑', '馃槑', '馃槄'] // tenemos duplicados!
const newArr = []
const myObj = {}
myArr.forEach(el => !(el in myObj) && (myObj[el] = true) && newArr.push(el))
console.log(myArr) // ["馃槑", "馃槑", "馃槑", "馃槄"]
console.log(newArr) // ["馃槑", "馃槄"]
Ver en CodeSandBox

Esta soluci贸n funciona, pero es ofuscada y algo complicada de leer la primera vez

Sets

Los sets son como los arrays pero con caracter铆sticas de los object, y lo que nos interesa aqu铆 es que NO pueden tener duplicados

js
const myArr = ['馃槑', '馃槑', '馃槑', '馃槄'] // tenemos duplicados!
const newArr = Array.from(new Set(myArr)) // con Array.from
const newArr2 = [...new Set(myArr)] // con el spread operator
console.log(myArr)
console.log(newArr)
console.log(newArr2)
/*
["馃槑", "馃槑", "馃槑", "馃槄"]
["馃槑", "馃槄"]
["馃槑", "馃槄"]
*/
Ver en CodeSandBox

Lo que hacemos es crear un array utilizando un set de intermediario, sirve perfectamente

Filter

Otra opci贸n es "filtrar" el array y quedarnos s贸lo con elementos 煤nicos, con la funci贸n filter()

js
const myArr = ['馃槑', '馃槑', '馃槑', '馃槄']
const newArr = myArr.filter((el, index) => myArr.indexOf(el) === index)
console.log(myArr)
console.log(newArr)
/*
["馃槑", "馃槑", "馃槑", "馃槄"]
["馃槑", "馃槄"]
*/
Ver en CodeSandBox

Es algo m谩s ofuscado que el set de antes, pero no tanto como las primeras opciones

Con indexOf recuperamos el primer 铆ndice de ese elemento del array, es decir, tendremos para el array unos n煤meros de [0, 0, 0, 3]

Y con la comparaci贸n con indexOf(el) === index tendr铆amos [0 === 0, 0 === 1, 0 === 2, 3 === 3] con lo que s贸lo en el primer y 煤ltimo elemento recibir铆amos un true y por lo tanto el filter devolver铆a s贸lo ese valor, eliminando por lo tanto los duplicados

Reduce

Y tambi茅n tenemos el reduce, una funci贸n ofuscada por naturaleza pero increiblemente potente

js
const myArr = ['馃槑', '馃槑', '馃槑', '馃槄']
const newArr = myArr.reduce((newTempArr, el) => (newTempArr.includes(el) ? newTempArr : [...newTempArr, el]), [])
console.log(myArr)
console.log(newArr)
/*
["馃槑", "馃槑", "馃槑", "馃槄"]
["馃槑", "馃槄"]
*/
Ver en CodeSandBox

Con reduce empezamos con un array vac铆o y lo vamos llenando de valores siempre que no est茅n incluidos en el array original, lo que lo vemos con .includes()

Perfectamente v谩lido, pero terrible para leer si no tienes acostumbrada la vista

Qu茅 tal la entrada?

馃憣 Bien 馃檶馃檶
馃憤 Bien, pero algunas cosas podr铆an explicarse mejor 馃槵
馃し鈥嶁檪锔 Da por sentadas demasiadas cosas 馃槖
馃し鈥嶁檪锔 A ver, hay poca chicha 馃槵
馃し鈥嶁檪锔 Los ejemplos no son muy claros 馃檱鈥嶁檪锔
馃し鈥嶁檪锔 No se entiende, est谩 mal escrito 馃憥
鉁嶏笍 Hay errores, rev铆salo en cuanto puedas 馃檹
Enviar Feedback 鉁嶏笍
El texto est谩 en blanco!
Gracias por enviarme tu opini贸n
馃憤

Si quieres explorar m谩s cursos y m谩s entradas en el blog, los tienes todos en la p谩gina principal, y si el contenido te ha ayudado si lo compartes me ayudas a dar difusi贸n 馃憤

Privacidad
by kuworking.com
[ 2020 >> kuworking ]