Introduction


En travaillant avec des tableaux, il arrive parfois d'avoir des valeurs en double, et de ne souhaiter conserver que les valeurs uniques. Je vous présente ici 3 façons d'y parvenir.


La méthode classique


Le principe est ici de créer un tableau et de n'y insérer que les éléments qui n'y sont pas déjà.


function uniqueArray1(arr) {
  const uniqueArray = [ ];
  for (let i=0; i < arr.length; i++) {
    if (uniqueArray.indexOf(arr[i]) === -1) {
      uniqueArray.push(arr[i]);
    }
  }
  return uniqueArray;
}


Avec la méthode filter() 


Nous pouvons également utiliser la méthode filter(), qui présente l'avantage d'être plus concise.


Pour rappel, filter() est une méthode qui crée et retourne un nouveau tableau contenant tous les éléments du tableau d'origine qui remplissent une condition que nous définissons. Un cas d'application simple de cette fonction est par exemple :


const animals = ['cat', 'dog', 'fish'];
const filteredAnimals = animals.filter(animal => animal !== 'dog');
console.log(animals); // ['cat', 'dog', 'fish']
console.log(filteredAnimals); // ['cat', 'fish'];


La callback utilisée est appelée avec les 3 éléments suivants : la valeur courante, l'index courant, et le tableau lui-même.

arr.filter(callback); // callback(currentValue, currentIndex, currentArray)


Nous pouvons donc définir une fonction utilisant filter pour dédoublonner le tableau :


function uniqueArray2(arr) {
   return arr.filter((currentValue, currentIndex, currentArray) =>
    currentArray.indexOf(currentValue) === currentIndex);
}


Avec l'objet Set (ES2015)


L'objet Set a été introduit en JavaScript ES2015.


Il permet de stocker un ensemble d'éléments, itérables dans leur ordre d'insertion. Une propriété intéressante de l'objet Set réside dans le fait qu'une valeur donnée ne peut apparaître qu'une seule fois par Set, ce qui va nous permettre de dédoublonner notre tableau.


L'intérêt de cette méthode est d'être encore plus concise que la précédente.


function uniqueArray3(arr) {
  return [...new Set(arr)];
}


Nous pouvons également l'écrire de la façon suivante :


function uniqueArray3(arr) {
 return Array.from(new Set(arr));
}


Conclusion


Nous avons vu 3 méthodes pour dédoublonner les valeurs d'un tableau en JavaScript, une classique et deux autres plus concises. La dernière n'est disponible qu'en ES2015, il faudra donc vérifier les versions requises des navigateurs devant être compatibles avec votre application avant de l'utiliser.