Cómo eliminar duplicados de una matriz en JavaScript

En este tutorial, aprenda cómo eliminar duplicados de una matriz en JavaScript con Set, forEach(), reduce(), include() y filter().

Introducción

Al consumir API o recuperar datos de una matriz, es posible que encuentre datos que se repiten, pero solo desea seleccionar los valores únicos.

Por ejemplo, suponga que tiene una matriz que representa el menú de un restaurante, como se muestra a continuación. Es posible que deba recuperar las categorías disponibles de esa matriz; en ese caso, deberá filtrar la matriz para obtener las categorías solo una vez, evitando duplicados:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
const menu = [
    {
        name: "buttermilk pancakes",
        category: "breakfast"
    },
    {
        name: "diner double",
        category: "lunch"
    },
    {
        name: "godzilla milkshake",
        category: "dinner"
    },
    {
        name: "country delight",
        category: "breakfast"
    },
    {
        name: "egg attack",
        category: "lunch"
    }
];

En este artículo, aprenderemos cómo eliminar duplicados de una matriz en JavaScript, esencialmente creando una matriz de valores únicos. Echaremos un vistazo a varios métodos diferentes para que pueda seleccionar el que mejor se adapte a su proyecto.

La mejor solución: utilice el constructor Set()

Un Conjunto es una colección de elementos que son únicos, lo que significa que ningún elemento puede repetirse. Supongamos que tenemos una variedad de materias escolares y queremos eliminar todos los duplicados:

1
let subjects = ["mathematics", "french", "english", "french", "mathematics"];

JavaScript nos proporciona un constructor útil para crear conjuntos - Set(). Puede aceptar una matriz como argumento. En ese caso, crea un conjunto y lo llena con valores únicos de la matriz pasada. El problema con este enfoque es que un constructor Set() crea un conjunto, no una matriz (que necesitamos).

Omitiremos el comportamiento no deseado usando el operador de propagación - también conocido como el operador de tres puntos (...). Cuando se combina con un conjunto (producido con un constructor Set()), el operador de propagación puede distribuir los valores establecidos en una matriz:

1
2
3
let uniqueSubjects = [...new Set(subjects)];

console.log(uniqueSubjects); // ["mathematics", "french", "english"]

También podemos hacer esto para una matriz de objetos, ilustrémoslo en el ejemplo de la matriz menú:

1
2
3
let categories = [...new Set( menu.map((menu) => menu.category))];

console.log(categories); // ["breakfast","lunch","dinner"]

{.icon aria-hidden=“true”}

Nota: Eliminar duplicados de una matriz usando el constructor Set() lleva un tiempo lineal - O(n) (n es el número de elementos en la matriz original). Todos los demás métodos para eliminar duplicados toman tiempo O(n²). Por lo tanto, le recomendamos encarecidamente que utilice el constructor Set() en cualquier caso posible.

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

El método filter() se usa para recorrer una matriz y devolver una nueva matriz que consta solo de elementos que cumplen con los criterios dados, mientras que el método indexOf() se usa para devolver el índice del primer elemento. ocurrencia en la matriz.

Por ejemplo, supongamos que tenemos una matriz de temas y queremos verificar el índice de cada elemento:

1
2
3
4
5
6
7
8
let subjects = ["mathematics", "french", "english", "french", "mathematics"];

let subjectsIndex = [];
subjects.map((subject) => {
    subjectsIndex.push(subjects.indexOf(subject));
});

console.log(subjectsIndex); // [0,1,2,1,0]

Como sabemos que el método de filtro devuelve una nueva matriz basada en los criterios dados, ahora podemos usarlo para incluir solo los elementos cuyos índices coincidan con sus valores indexOf():

1
2
3
4
5
6
7
let subjects = ["mathematics", "french", "english", "french", "mathematics"];

let uniqueSubjects = subjects.filter((subject, index) => {
    return subjects.indexOf(subject) === index;
});

console.log(uniqueSubjects); // ["mathematics","french","english"]

Supongamos que queremos hacer uso de la matriz menu, primero tendríamos que recorrer la matriz para almacenar las categorías en una nueva matriz, luego usar el método filter() e indexOf():

1
2
3
4
5
6
7
let categoriesArray = menu.map((menu)=>menu.category)

let uniqueCategories = categoriesArray.filter((category, index) => {
    return categoriesArray.indexOf(category) === index;
});

console.log(uniqueCategories); // ["breakfast","lunch","dinner"]

If you'd like to read more about the filter() method - read our Guía del método filter() de JavaScript!

Usando los métodos reduce() e includes()

Reducir siempre es un poco más difícil de comprender, pero realiza una operación de reducción muy poderosa, tomada de la programación funcional. El método reduce() se usa para reducir los elementos de la matriz y combinarlos en una matriz final basada en alguna función de reducción que pase, mientras que el método includes() devuelve verdadero si un elemento está en una array y false en caso contrario.

El siguiente ejemplo itera sobre los elementos de una matriz y verifica si un elemento en particular está en el resultado; de lo contrario, lo agregamos:

1
2
3
4
5
6
7
let subjects = ["mathematics", "french", "english", "french", "mathematics"];

let uniqueSubjects = subjects.reduce((result, subject) => {
    return result.includes(subject) ? result : [...result, subject];
}, []);

console.log(uniqueSubjects); // ["mathematics","french","english"]

Supongamos que queremos hacer uso de la matriz de menú, primero tendríamos que recorrer la matriz para almacenar las categorías en una matriz, luego ahora utilizar el método reduce() e includes() como se explicó anteriormente:

1
2
3
4
5
6
7
let categoriesArray = menu.map((menu)=>menu.category)

let uniqueCategories = categoriesArray.reduce((result, category) => {
    return result.includes(category) ? result : [...result, category];
}, []);

console.log(uniqueCategories); // ["breakfast","lunch","dinner"]

{.icon aria-hidden=“true”}

Nota: Tenga en cuenta que también hemos utilizado el operador de propagación en esta sección.

Usar los métodos forEach() e includes()

Esto funciona casi como usar los métodos filter() e includes(). Simplemente estamos usando el método forEach() para iterar a través de la matriz y luego agregar a una nueva matriz solo los elementos que aún no están allí:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
let subjects = ["mathematics", "french", "english", "french", "mathematics"];

let uniqueSubjects = [];
subjects.forEach((subject) => {
    if (!uniqueSubjects.includes(subject)) {
        uniqueSubjects.push(subject);
    }
});

console.log(uniqueSubjects); // ["mathematics","french","english"]

Supongamos que queremos hacer uso de la matriz menu, primero tendríamos que recorrer la matriz para almacenar las categorías en una matriz, luego ahora usar el método forEach() e includes() como antes explicado:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
let categoriesArray = menu.map((menu)=>menu.category)

let uniqueCategories = [];
categoriesArray.forEach((category) => {
    if (!uniqueCategories.includes(category)) {
        uniqueCategories.push(category);
    }
});

console.log(uniqueCategories); // ["breakfast","lunch","dinner"]

Conclusión

Hemos visto cuatro métodos diferentes para eliminar duplicados de una matriz en este artículo. La introducción de Set() en ES6 hizo esto mucho más fácil y eficiente. Eliminar duplicados de una matriz usando el constructor Set() lleva un tiempo lineal - O(n) (n es el número de elementos en la matriz original). Todos los demás métodos para eliminar duplicados toman tiempo O(n²). Por lo tanto, le recomendamos encarecidamente que utilice el constructor Set() en cualquier caso posible.