3 formas de remover duplicados en un Array en Javascript

#webdev #showdev #javascript #frontend

Vamos a checar, muchas veces (o pocas) surge la necesidad de eliminar elementos duplicados dados en un array, que se yo... puede ser por que tienes que imprimir una lista del super, quitar a un alumno que duplico su registro en un form, infinidad de cosas, así que vamos a ver algunas formas de hacer esto:

1) Usando Set

Usando Set(), se creara una instancia de valores únicos, implícitamente al usar esta instancia borrara los duplicados .

Así que podemos hacer uso de esta instancia y de ahi tendremos que convertir esa instancia en un nuevo array, y eso seria todo:

let letras = ['A', 'B', 'A', 'C', 'B'];
let letrasUnicas = [...new Set(letras)];

console.log(letrasUnicas);

Esto nos regresa:

[ 'A', 'B', 'C' ]
```



## 2) Usando los métodos indexOf() y filter()

El método indexOf() regresa el índice de la primer aparicion del elemento en el array:



````javascript
let letras = ['A', 'B', 'A', 'C', 'B'];
letras.indexOf('B');
```
{% endraw %}


Esto regresa:
{% raw %}


````javascript
1
```



El elemento duplicado es el elemento cuyo índice es diferente de su valor de indexOf():



````javascript
let letras = ['A', 'B', 'A', 'C', 'B'];

letras.forEach((elemento, index) => {
    console.log(`${elemento} - ${index} - ${letras.indexOf(elemento)}`);
});
```
{% endraw %}


Salida:
{% raw %}


````javascript
A - 0 - 0
B - 1 - 1
A - 2 - 0
C - 3 - 3
B - 4 - 1
```



Para eliminar los duplicados, se utiliza el método filter() para incluir sólo los elementos cuyos índices coinciden con sus valores indexOf, ya que sabemos que el método filer regresa un nuevo array con base a las operaciones que se hacen dentro de este:



````javascript
let letras = ['A', 'B', 'A', 'C', 'B'];

let letrasUnicas = letras.filter((elemento, index) => {
    return letras.indexOf(elemento) === index;
});

console.log(letrasUnicas);
```
{% endraw %}


Salida:
{% raw %}


````javascript
['A', 'B', 'C']
```



Y si de casualidad necesitamos los duplicados, podemos modificar un poco nuestras función, solo con cambiar nuestra regla:



````javascript
let letras = ['A', 'B', 'A', 'C', 'B'];

let letrasDuplicadas = letras.filter((elemento, index) => {
    return letras.indexOf(elemento) !== index;
});

console.log(letrasDuplicadas);
```
{% endraw %}


salida:
{% raw %}


````javascript
['A', 'B']
```



## 3) Usando los métodos includes() y forEach()

La función include() devuelve true si un elemento está en un array o false si no lo está.

El siguiente ejemplo itera sobre los elementos de un array y añade a un nuevo array sólo los elementos que no están ya allí:



````javascript
let letras = ['A', 'B', 'A', 'C', 'B'];

let letrasUnicas = [];
letras.forEach((elemento) => {
    if (!letrasUnicas.includes(elemento)) {
        letrasUnicas.push(elemento);
    }
});

console.log(letrasUnicas);
```
{% endraw %}


Salida:
{% raw %}


````javascript
['A', 'B', 'C']  
```



Básicamente, tenemos opciones para solucionar este tipo de problemas, así que no te estanques mas y puedes usar cualquiera que te resulta mas atractiva.


<center>
Si te gusto el contenido puedes seguirme en mis redes sociales como @soyleninjs 
</center>

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/G2G42SCZF)