logo

Supprimer les éléments en double du tableau JavaScript

Les tableaux JavaScript sont des structures de données qui peuvent stocker plusieurs valeurs. Cependant, il peut y avoir de nombreux cas où un tableau contient des éléments en double. Ce guide vous guidera à travers différentes méthodes pour supprimer ces doublons et créer un tableau avec des éléments uniques.

Note: En savoir plus sur les tableaux JavaScript



supprimer-le-tableau-en double-de-javascript

Méthodes pour supprimer les éléments en double du tableau JavaScript

Table des matières



Utilisation de la méthode JavaScript filter()

Le Méthode filtre() crée un nouveau tableau d'éléments qui correspond à la condition transmise via la fonction de rappel. Il inclura uniquement les éléments pour lesquels true est renvoyé.

Exemple: Le code ci-dessous utilise le Méthode filtre() pour supprimer le doublon d'un élément dans un tableau JavaScript.

Javascript
let arr = ['apple', 'mango', 'apple',  'orange', 'mango', 'mango']; function removeDuplicates(arr) {  return arr.filter((item,  index) =>arr.indexOf(item) === index); } console.log(removeDuplicates(arr));>

Sortir
[ 'apple', 'mango', 'orange' ]>

Utilisation de la méthode JavaScript set()

Cette méthode définit un nouveau type d'objet avec ES6 (ES2015) qui vous permet de créer des collections de valeurs uniques.



Exemple: Cet exemple utilise le JavaScript méthode set() pour supprimer les doublons d'un tableau.

Javascript
let arr = ['apple', 'mango', 'apple',  'orange', 'mango', 'mango']; function removeDuplicates(arr) {  return [...new Set(arr)]; } console.log(removeDuplicates(arr));>

Sortir
[ 'apple', 'mango', 'orange' ]>

Utilisation de la méthode JavaScript forEach()

En utilisant le Méthode forEach() , nous pouvons parcourir les éléments du tableau, et nous les pousserons dans le nouveau tableau s'il n'existe pas dans le tableau.

Exemple: La méthode forEach() est utilisée pour supprimer les éléments du tableau JavaScript dans le code ci-dessous.

Javascript
let arr = ['apple', 'mango',  'apple', 'orange', 'mango', 'mango']; function removeDuplicates(arr) {  let unique = [];  arr.forEach(element =>{ if (!unique.includes(element)) { unique.push(element);  } });  retourner unique ; } console.log(removeDuplicates(arr));>

Sortir
[ 'apple', 'mango', 'orange' ]>

Utilisation de la méthode JavaScript réduire()

Le Méthode réduire() est utilisé pour réduire les éléments du tableau et les combiner dans un tableau final basé sur une fonction de réduction que vous transmettez.

Exemple: La méthode réduire() est utilisée pour supprimer les doublons d’un tableau en JavaScript.

Javascript
let arr = ['apple', 'mango',  'apple', 'orange', 'mango', 'mango']; function removeDuplicates(arr) {  let unique = arr.reduce(function (acc, curr) {  if (!acc.includes(curr))  acc.push(curr);  return acc;  }, []);  return unique; } console.log(removeDuplicates(arr));>

Sortir
[ 'apple', 'mango', 'orange' ]>

Utilisation de la méthode JavaScript indexOf()

Le Méthode indexOf() est utilisé pour trouver le premier index d’occurrence d’un élément du tableau. nous pouvons parcourir les éléments du tableau, et nous pousserons dans le nouveau tableau s'il n'existe pas dans le tableau résultant.

Exemple: L'exemple de code ci-dessous utilise la méthode indexOf() pour supprimer les doublons d'un tableau.

Javascript
let arr = ['apple', 'mango',  'apple', 'orange', 'mango', 'mango']; function removeDuplicates(arr) {  let unique = [];  for (i = 0; i < arr.length; i++) {  if (unique.indexOf(arr[i]) === -1) {  unique.push(arr[i]);  }  }  return unique; } console.log(removeDuplicates(arr));>

Sortir
[ 'apple', 'mango', 'orange' ]>

Utilisation d'une bibliothèque tierce

Nous pouvons également utiliser une bibliothèque tierce telle que Lodash ou Souligner.js pour supprimer les éléments en double d'un tableau Javascript. Le Fonction _.uniq() renvoie le tableau qui ne contient pas d'éléments en double.

Exemple : Le La fonction _.uniq() de la bibliothèque underscore.js est utilisée dans le code ci-dessous pour supprimer des éléments d'un tableau.

HTML