Cómo eliminar duplicados de una matriz en JavaScript

En este tutorial, aprenderemos cómo eliminar duplicados de una matriz en JavaScript y devolver solo valores únicos.

Aquí hay una descripción general rápida de las diferentes formas de eliminar duplicados de una tabla:

// Array:
const fruits = ['apple', 'orange', 'orange', 'apple', 'banana', 'apple'];

// 1. ES6 Set
[...new Set(fruits)];

// 2. filter
fruits.filter((item, index) => fruits.indexOf(item) == index);

// 3. forEach
fruits.forEach(item => !uniqueFruits.includes(item) && uniqueFruits.push(item));

// 4. reduce
fruits.reduce((newarray, item) => newarray.includes(item) ? newarray : [...newarray, item], []);

// Result:
// ▶ Set(3) {"apple", "orange", "banana"}
Índice
  1. Usando el conjunto ES6 ()
  2. Usar Array.filter()
  3. Utilice Array.forEach()
  4. Utilice Array.reduce()
  5. Rendimiento

Usando el conjunto ES6 ()

Si comenzó a usar ES6, se recomienda usar Set objeto.

Set object le permite almacenar valores únicos de cualquier tipo, ya sean valores primitivos o una referencia de objeto.

Cuando pasas una matriz a new Set() objeto, elimina todos los valores duplicados. Veamos el código donde suceden dos cosas:

  1. Primero, creamos un nuevo Set objeto pasando una matriz que elimina los duplicados.
  2. En segundo lugar, volvemos a convertir este objeto en una matriz utilizando el operador de propagación ...
const fruits = ['apple', 'orange', 'orange', 'apple', 'banana', 'apple'];

const uniqueSet = new Set(fruits);
// ▶ Set(3) {"apple", "orange", "banana"}

const backToArray = [...uniqueSet];
// ▶ (3) ["apple", "orange", "banana"]

Alternativamente, también puede usar Array.from convertir un Set en una tabla:

const fruits = ['apple', 'orange', 'orange', 'apple', 'banana', 'apple'];

const uniqueFruits = Array.from(new Set(fruits));
// ▶ Set(3) {"apple", "orange", "banana"}

Usar Array.filter()

los filter() filtra los elementos de una matriz en función de la condición que proporcionamos. Dicho de otro modo,

  • si la condición devuelve verdadero, se incluirá en la matriz filtrada
  • si la condición devuelve falso, NO se incluirá en la matriz filtrada
const fruits = ['apple', 'orange', 'orange', 'apple', 'banana', 'apple'];

const uniqueFruits = fruits.filter((item, index) => fruits.indexOf(item) == index);
// ▶ Set(3) {"apple", "orange", "banana"}

Aquí el uso de Array.indexOf() El método es muy importante, ya que le brinda la primera aparición del elemento en caso de que haya duplicados. Veamos el código:

const fruits = ['apple', 'orange', 'orange', 'apple', 'banana', 'apple'];
fruits.indexOf('apple');    //0
fruits.indexOf('orange');   //1
fruits.indexOf('banana');   //4

En el caso anterior, nuestro filter() El método filtra la primera aparición de cada elemento único.

Utilice Array.forEach()

los forEach() también se puede utilizar para recorrer los elementos de una matriz y push() elementos a la nueva matriz que aún no está allí.

const fruits = ['apple', 'orange', 'orange', 'apple', 'banana', 'apple'];

const uniqueFruits = [];
fruits.forEach(item => !uniqueFruits.includes(item) && uniqueFruits.push(item));

console.log(uniqueFruits);
// ▶ Set(3) {"apple", "orange", "banana"}

Utilice Array.reduce()

los reduce() El método se usa para reducir los elementos de la matriz y combinarlos en una nueva matriz basada en una función de reducción que pasa.

En este caso, nuestra función reduce verifica si nuestra nueva matriz contiene el elemento. Si no, coloque ese elemento en nuestra nueva matriz. De lo contrario, ignore este elemento y simplemente devuelva nuestra nueva matriz tal como está.

Reducir es siempre un poco difícil de entender. Veamos el código:

const fruits = ['apple', 'orange', 'orange', 'apple', 'banana', 'apple'];

const uniqueFruits = 
  fruits.reduce((newarray, item) => newarray.includes(item) ? newarray : [...newarray, item], []);

console.log(uniqueFruits);
// ▶ Set(3) {"apple", "orange", "banana"}

Rendimiento

Creamos una matriz con 1 millón de números aleatorios (que van del 1 al 1000). Vamos a comprobar el rendimiento de cada método.

// Array:
var numbers = [];
for ( var i = 0; i < 1000000; i++ ) {
    numbers.push(Math.floor((Math.random() * 1000) + 1));
}

// 1. ES6 Set
console.time("set");
[...new Set(numbers)];
console.timeEnd("set");

// 2. filter
console.time("filter");
numbers.filter((item, index) => numbers.indexOf(item) == index);
console.timeEnd("filter");

// 3. forEach
console.time("forEach");
var uniqueNumbers = [];
numbers.forEach(item => !uniqueNumbers.includes(item) && uniqueNumbers.push(item));
console.timeEnd("forEach");

// 4. reduce
console.time("reduce");
numbers.reduce((newarray, item) => newarray.includes(item) ? newarray : [...newarray, item], []);
console.timeEnd("reduce");

Aquí está el resultado cuando ejecuté el código anterior en Google Chrome v83.0.4103.106 (64 bit) de MacBook Pro:

set:      23.051025390625ms
filter: 1004.9609375ms
forEach: 471.6630859375ms
reduce:  472.902099609375ms

Vemos que ES6 Set el objeto es un claro ganador seguido de forEach lazo. Se recomienda encarecidamente utilizar ES6. Set para eliminar duplicados de una matriz debido a su sintaxis abreviada y rendimiento.

Si quieres conocer otros artículos parecidos a Cómo eliminar duplicados de una matriz en JavaScript puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas