Remover duplicatas de um array

Resumo : neste tutorial, você aprenderá como remover duplicatas de um array em JavaScript.

1) Remova duplicatas de um array usando um Set

A Seté uma coleção de valores únicos. Para remover duplicatas de um array :

• Primeiro, converta uma matriz de duplicatas em um arquivo Set. O novo Setremoverá implicitamente os elementos duplicados.
• Em seguida, converta de setvolta em um array.

O exemplo a seguir usa a Setpara remover duplicatas de uma matriz:

let chars = ['A', 'B', 'A', 'C', 'B'];
let uniqueChars = [...new Set(chars)];

console.log(uniqueChars);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 'A', 'B', 'C' ]Linguagem de código:  JSON/JSON com comentários  ( json )

2) Remova duplicatas de um array usando métodos indexOf()efilter()

O indexOf()método retorna o índice da primeira ocorrência de um elemento em uma matriz. Por exemplo:

let chars = ['A', 'B', 'A', 'C', 'B'];
chars.indexOf('B');Linguagem de código:  JavaScript  ( javascript )

Saída:

1  

O item duplicado é o item cujo índice é diferente do seu indexOf()valor:

let chars = ['A', 'B', 'A', 'C', 'B'];

chars.forEach((c, index) => {
    console.log(`${c} - ${index} - ${chars.indexOf(c)}`);
});
Linguagem de código:  JavaScript  ( javascript )

Saída:

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

Para remover as duplicatas, você usa o filter()método para incluir apenas elementos cujos índices correspondem aos seus valores indexOf:

let chars = ['A', 'B', 'A', 'C', 'B'];

let uniqueChars = chars.filter((c, index) => {
    return chars.indexOf(c) === index;
});

console.log(uniqueChars);
Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 'A', 'B', 'C' ]
Linguagem de código:  JSON/JSON com comentários  ( json )

Para encontrar os valores duplicados, você precisa reverter a condição:

let chars = ['A', 'B', 'A', 'C', 'B'];

let dupChars = chars.filter((c, index) => {
    return chars.indexOf(c) !== index;
});

console.log(dupChars);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 'A', 'B' ]Linguagem de código:  JSON/JSON com comentários  ( json )

3) Remova duplicatas de um array usando forEach()einclude()

O include()retorno truese um elemento estiver em uma matriz ou falsenão.

O exemplo a seguir itera sobre os elementos de um array e adiciona a um novo array apenas os elementos que ainda não estão lá:

let chars = ['A', 'B', 'A', 'C', 'B'];

let uniqueChars = [];
chars.forEach((c) => {
    if (!uniqueChars.includes(c)) {
        uniqueChars.push(c);
    }
});

console.log(uniqueChars);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 'A', 'B', 'C' ]    Linguagem de código:  JSON/JSON com comentários  ( json )

4) Remova duplicatas de uma matriz de objetos por uma propriedade

Suponha que você tenha o seguinte array de objetos:

const members = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'Johnny' },
  { id: 4, name: 'Alice' },
];Linguagem de código:  JavaScript  ( javascript )

O id do primeiro é igual ao do terceiro elemento. Para remover a duplicata da matriz de pessoas, você pode usar o seguinte:

const unique = [...new Map(members.map((m) => [m.id, m])).values()];
console.log(unique);Linguagem de código:  JavaScript  ( javascript )

Saída:

[
  { id: 1, name: 'Johnny' },
  { id: 2, name: 'Jane' },
  { id: 4, name: 'Alice' }
]Linguagem de código:  JavaScript  ( javascript )

Como funciona.

Primeiro, crie um novo array a partir do array original usando o map()método:

members.map((m) => [m.id, m])Linguagem de código:  JavaScript  ( javascript )

Ele retorna uma matriz de matrizes. Cada array aninhado contém o valor do id e o objeto correspondente:

[
  [ 1, { id: 1, name: 'John' } ],
  [ 2, { id: 2, name: 'Jane' } ],
  [ 1, { id: 1, name: 'Johnny' } ],
  [ 4, { id: 4, name: 'Alice' } ]
]Linguagem de código:  JavaScript  ( javascript )

Segundo, remova a duplicata criando um novo objeto Map():

const newMap = new Map(newArray);
console.log(newMap);Linguagem de código:  JavaScript  ( javascript )

Saída:

Map(3) {
  1 => { id: 1, name: 'Johnny' },
  2 => { id: 2, name: 'Jane' },
  4 => { id: 4, name: 'Alice' }
}Linguagem de código:  PHP  ( php )

Como as chaves de um objeto Map são exclusivas, a criação de um Map a partir do array de array remove o objeto duplicado por chave (id neste caso).

Terceiro, obtenha o iterador das entradas do Mapa chamando o métodovalues():

const iterator = newMap.values();
console.log(iterator);Linguagem de código:  JavaScript  ( javascript )

Saída:

[Map Iterator] {
  { id: 1, name: 'Johnny' },
  { id: 2, name: 'Jane' },
  { id: 4, name: 'Alice' }
}Linguagem de código:  JavaScript  ( javascript )

Finalmente, converta o iterador em um array usando o operador spread:

const uniqueMembers = [...iterator];
console.log(uniqueMembers);Linguagem de código:  JavaScript  ( javascript )

Saída:

[
  { id: 1, name: 'Johnny' },
  { id: 2, name: 'Jane' },
  { id: 4, name: 'Alice' }
]Linguagem de código:  JavaScript  ( javascript )

Junte tudo:

const members = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'Johnny' },
  { id: 4, name: 'Alice' },
];

const newArray = members.map((m) => [m.id, m]);
const newMap = new Map(newArray);
const iterator = newMap.values();
const unique = [...iterator];

console.log(unique);Linguagem de código:  JavaScript  ( javascript )

As quatro linhas de código a seguir:

const newArray = members.map((m) => [m.id, m]);
const newMap = new Map(newArray);
const iterator = newMap.values();
const unique = [...iterator];Linguagem de código:  JavaScript  ( javascript )

…pode ser reduzido em um:

const unique = [...new Map(members.map((m) => [m.id, m])).values()];Linguagem de código:  JavaScript  ( javascript )

Então:

const members = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'Johnny' },
  { id: 4, name: 'Alice' },
];

const unique = [...new Map(members.map((m) => [m.id, m])).values()];

console.log(unique);Linguagem de código:  JavaScript  ( javascript )

A seguinte função unique() aceita um array de objetos e retorna o elemento exclusivo por uma propriedade:

const uniqueBy = (arr, prop) => {
  return [...new Map(arr.map((m) => [m[prop], m])).values()];
};Linguagem de código:  JavaScript  ( javascript )

Por exemplo, você pode usar a uniqueBy()função para remover elementos duplicados do membersarray assim:

const members = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'Johnny' },
  { id: 4, name: 'Alice' },
];

const uniqueBy = (arr, prop) => {
  return [...new Map(arr.map((m) => [m[prop], m])).values()];
};

console.log(uniqueBy(members, 'id'));Linguagem de código:  JavaScript  ( javascript )

5) Remova duplicatas de uma matriz de objetos por múltiplas propriedades

A seguinte função unique() remove duplicatas de uma matriz de objetos. A lógica duplicada é especificada por uma função de retorno de chamada :

function unique(a, fn) {
  if (a.length === 0 || a.length === 1) {
    return a;
  }
  if (!fn) {
    return a;
  }

  for (let i = 0; i < a.length; i++) {
    for (let j = i + 1; j < a.length; j++) {
      if (fn(a[i], a[j])) {
        a.splice(i, 1);
      }
    }
  }
  return a;
}Linguagem de código:  JavaScript  ( javascript )

Como funciona.

Primeiro, retorne o mesmo array se ele tiver zero ou um elemento:

if (a.length === 0 || a.length === 1) {
  return a;
}Linguagem de código:  JavaScript  ( javascript )

Segundo, retorne a matriz de entrada se o retorno de chamada não for passado:

if (!fn) {
  return a;
}Linguagem de código:  JavaScript  ( javascript )

Terceiro, itere o elemento da matriz de entrada duas vezes e compare sucessivamente o primeiro elemento com os outros elementos. Se dois elementos fizerem com que a função de retorno de chamada ( fn) retorne verdadeiro, remova esse elemento da matriz usando o splice()método.

for (let i = 0; i < a.length; i++) {
  for (let j = i + 1; j < a.length; j++) {
    if (fn(a[i], a[j])) {
      a.splice(i, 1);
    }
  }
}Linguagem de código:  JavaScript  ( javascript )

O exemplo a seguir usa a função unique() para remover duplicatas da membersmatriz pelas propriedades ide name:

function unique(a, fn) {
  if (a.length === 0 || a.length === 1) {
    return a;
  }
  if (!fn) {
    return a;
  }

  for (let i = 0; i < a.length; i++) {
    for (let j = i + 1; j < a.length; j++) {
      if (fn(a[i], a[j])) {
        a.splice(i, 1);
      }
    }
  }
  return a;
}

const members = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'John' },
  { id: 4, name: 'Joe' },
];

const uniqueMembers = unique(
  members,
  (a, b) => (a.id === b.id) & (a.name === b.name)
);

console.log(uniqueMembers);
Linguagem de código:  JavaScript  ( javascript )

Saída:

[
  { id: 2, name: 'Jane' },
  { id: 1, name: 'John' },
  { id: 4, name: 'Joe' }
]Linguagem de código:  JavaScript  ( javascript )

Neste tutorial, você aprendeu algumas técnicas para remover duplicatas de um array em JavaScript.