Comment fusionner deux tableaux sans doublons en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Comment fusionner deux tableaux sans …
Moataz Farid 12 octobre 2023
JavaScript Java Array
  1. Fusion de tableaux en JavaScript utilisant une syntaxe de propagation dans ECMAScript 6
  2. Fusionner des tableaux en JavaScript en utilisant la fonction Array.concat dans ECMAScript 5
  3. Supprimer les doublons d’un tableau en utilisant la boucle for
  4. JavaScript Supprimer les doublons d’un tableau en utilisant Array.prototype en ECMAScript 6
  5. JavaScript Supprimer les doublons d’un tableau en utilisant Object.defineProperty dans ECMAScript 5
  6. Fusionner et ne conserver que les valeurs uniques en utilisant le Lo-Dash ou le Underscore.js
  7. Fusionner et ne garder que les valeurs uniques en utilisant Set dans ECMAScript 6
  8. Fusionner sans valeurs doubles en utilisant la boucle for et le dictionnaire avec seulement la complexité O(n)
Comment fusionner deux tableaux sans doublons en JavaScript

Ce tutoriel vous apprendra comment fusionner deux tableaux en JavaScript sans aucune valeur en double.

Tout d’abord, nous montrerons les différentes méthodes de fusion dans les versions ES5 et ES6.

Ensuite, nous apprendrons comment supprimer les doublons à l’aide de différentes méthodes.

Enfin, vous apprendrez à effectuer l’opération en une seule étape, soit en écrivant vos propres fonctions, soit en utilisant des bibliothèques externes.

Supposons que nous ayons deux tableaux arrayA et arrayB et que nous voulions les fusionner dans arrayC :

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

Fusion de tableaux en JavaScript utilisant une syntaxe de propagation dans ECMAScript 6

La syntaxe de propagation (...) est utilisée pour étendre le contenu d’éléments itérables à un endroit où des éléments comme des tableaux sont attendus, ou où zéro ou plus d’un argument est attendu dans une fonction, par exemple :

var arr = [2, 4];

function add(x, y) {
  return x + y;
}

console.log(add(...arr));

Fusionnons maintenant nos tableaux en arrayC en utilisant cette Syntaxe de propagation :

arrayC = [...arrayA, ...arrayB];
console.log(arrayC);

Exemple de code :

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

//merging using the spread syntax
arrayC = [...arrayA,...arrayB];
console.log("Merged Using Spread Syntax >"+arrayC);

Production :

Array A > Java,JavaScript
Array B > C#,PHP,Java
Merged Using Spread Syntax >Java,JavaScript,C#,PHP,Java

Fusionner des tableaux en JavaScript en utilisant la fonction Array.concat dans ECMAScript 5

La fusion à l’aide du Array.concat est utilisée pour concaténer le contenu du tableau d’entrée (arrayB) au contenu du tableau source (arrayA).

arrayC = arrayA.concat(arrayB);
console.log(arrayC);

Si nous voulons supprimer les doublons du tableau résultant, nous pouvons le faire de plusieurs façons, voyons donc comment nous pouvons le faire.

Exemple :

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

//merging using Array.concat function in ECMAScript 5
arrayC = arrayA.concat(arrayB);
console.log("Merged Using Array.concat function >"+arrayC);

Production :

Array A > Java,JavaScript
Array B > C#,PHP,Java
Merged Using Array.concat function >Java,JavaScript,C#,PHP,Java

Supprimer les doublons d’un tableau en utilisant la boucle for

La façon la plus simple de supprimer les doublons est de créer votre propre imbrication pour la boucle.

Notre Algorithme sera comme :

  1. Créer un clone à partir du tableau d’entrée inArray afin de ne pas modifier le tableau original.
  2. Créer une boucle imbriquée pour trouver et supprimer l’élément en double trouvé en utilisant arr.splice(). L’extérieur commence à partir de n et l’intérieur à partir de n+1.
function removeDuplicates(inArray) {
  var arr =
      inArray
          .concat()  // create a clone from inArray so not to change input array
  // create the first cycle of the loop starting from element 0 or n
  for (var i = 0; i < arr.length; ++i) {
    // create the second cycle of the loop from element n+1
    for (var j = i + 1; j < arr.length; ++j) {
      // if the two elements are equal , then they are duplicate
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);  // remove the duplicated element
      }
    }
  }
  return arr;
}

Ensuite, nous pouvons utiliser cette fonction removeDuplicates comme n’importe quelle autre fonction.

var arrayWithoutDuplicates = removeDuplicates(arrayC);
console.log(arrayWithoutDuplicates);

Exemple :

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

//removing duplicates from an array using nested for loop

function removeDuplicates(inArray){
    var arr = inArray.concat() // create a clone from inArray so not to change input array
    //create the first cycle of the loop starting from element 0 or n
    for(var i=0; i<arr.length; ++i) {
        //create the second cycle of the loop from element n+1
        for(var j=i+1; j<arr.length; ++j) {
            //if the two elements are equal , then they are duplicate
            if(arr[i] === arr[j]) {
                arr.splice(j, 1); //remove the duplicated element 
            }
        }
    }
    return arr;
}
arrayC = arrayA.concat(arrayB);
console.log("Merged arrayC > "+ arrayC );
console.log("Removing duplicates using removeDuplicates > "+ removeDuplicates(arrayC) );

Production :

Array A > Java,JavaScript
Array B > C#,PHP,Java
Merged arrayC > Java,JavaScript,C#,PHP,Java
Removing duplicates using removeDuplicates > Java,JavaScript,C#,PHP

JavaScript Supprimer les doublons d’un tableau en utilisant Array.prototype en ECMAScript 6

Nous pouvons également supprimer les doublons en utilisant Array.prototype dans le cas où nous pouvons utiliser ECMAScript 6.

Que signifie prototype ? Le prototype est comme l’Objet associé à toutes les fonctions et Objets en JavaScript.

Voyons comment nous pouvons utiliser le Array.prototype.

Notre Algorithme sera comme :

  1. Créer un clone du tableau Object this.concat() afin de ne pas modifier le tableau original
  2. Créer une boucle imbriquée pour trouver et supprimer l’élément en double trouvé en utilisant arr.splice(). L’extérieur commence à partir de n et l’intérieur à partir de n+1.
Array.prototype.removeDuplicates = function() {
  var arr = this.concat();  // create a clone from the input so not to change
                            // the source
  // create the first cycle of the loop starting from element 0 or n
  for (var i = 0; i < arr.length; ++i) {
    // create the second cycle of the loop from element n+1
    for (var j = i + 1; j < arr.length; ++j) {
      // if the two elements are equal , then they are duplicate
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);  // remove the duplicated element
      }
    }
  }
  return arr;
}

Ensuite, appeler ce prototype pourrait être comme :

var arrayWithoutDuplicates = arrayC.removeDuplicates();
console.log(arrayWithoutDuplicates);

Exemple :

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

arrayC = arrayA.concat(arrayB);


//removing duplicates from an array using Array.prototype in ECMAScript 6
Array.prototype.removeDuplicatesPrototype = function() {
   var arr = this.concat(); // get the input array
   //create the first cycle of the loop starting from element 0 or n
   for(var i=0; i<arr.length; ++i) {
       //create the second cycle of the loop from element n+1
       for(var j=i+1; j<arr.length; ++j) {
           //if the two elements are equal , then they are duplicate
           if(arr[i] === arr[j]) {
               arr.splice(j, 1); //remove the duplicated element 
           }
       }
   }
   return arr;
}
console.log("Merged arrayC > "+arrayC);
console.log("Removing duplicates using removeDuplicatesPrototype > "+arrayC.removeDuplicatesPrototype());

JavaScript Supprimer les doublons d’un tableau en utilisant Object.defineProperty dans ECMAScript 5

Si nous ne pouvons utiliser que l’ECMAScript 5, nous pouvons créer notre propre propriété en utilisant Object.defineProperty, de cette façon nous pourrons supprimer les doublons de tous les éléments de type Array.

Ici, nous définissons le type de propriété comme un prototype de tableau en écrivant en tapant Array.prototype. Le nom de la propriété doit être inséré comme paramètre suivant sous la forme removeDuplicates.

Voyons comment il est écrit correctement :

Object.defineProperty(Array.prototype, 'removeDuplicates', {
  // defining the type and name of the property
  enumerable: false,
  configurable: false,
  writable: false,
  value: function() {
    var arr = this.concat();  // get the input array
    // create the first cycle of the loop starting from element 0 or n
    for (var i = 0; i < arr.length; ++i) {
      // create the second cycle of the loop from element n+1
      for (var j = i + 1; j < arr.length; ++j) {
        // if the two elements are equal , then they are duplicate
        if (arr[i] === arr[j]) {
          arr.splice(j, 1);  // remove the duplicated element
        }
      }
    }
    return arr;
  }
});

Ensuite, nous pouvons appeler cette propriété directement comme cela :

var arrayWithoutDuplicates = arrayC.removeDuplicates();
console.log(arrayWithoutDuplicates);

Exemple

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

arrayC = arrayA.concat(arrayB);

//removing duplicates from an array using defineProperty in ECMAScript 5
Object.defineProperty(Array.prototype, 'removeDuplicatesProperty', { //defining the type and name of the property
    enumerable: false,
    configurable: false,
    writable: false,
    value: function() {
        var arr = this.concat(); // get the input array
        //create the first cycle of the loop starting from element 0 or n
        for(var i=0; i<arr.length; ++i) {
            //create the second cycle of the loop from element n+1
            for(var j=i+1; j<arr.length; ++j) {
                //if the two elements are equal , then they are duplicate
                if(arr[i] === arr[j]) {
                    arr.splice(j, 1); //remove the duplicated element 
                }
            }
        }
        return arr;
    }
});

console.log("Merged arrayC > "+arrayC);
console.log("Removing duplicates using removeDuplicatesProperty > "+arrayC.removeDuplicatesProperty() );

Fusionner et ne conserver que les valeurs uniques en utilisant le Lo-Dash ou le Underscore.js

Si l’objectif est d’obtenir un nouveau tableau de valeurs uniques à partir de deux ou plusieurs tableaux et d’utiliser des fichiers externes, nous pouvons utiliser la bibliothèque Lo-Dash pour le faire.

Tout d’abord, nous devons importer la bibliothèque en utilisant le CDN Cloudflare à l’intérieur du modèle HTML ,

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

Ensuite, nous utilisons la bibliothèque comme :

arrayC = _.union(arrayA, arrayB);

Exemple :

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];

console.log('Array A > ' + arrayA);
console.log('Array B > ' + arrayB);

// merging arrayA and arrayB keeping only unique values using Lo-Dash library
//  don't forget to import the script using <script
//  src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

console.log(
    'Merging arrayA and arrayB keeping only unique values using Lo-Dash Lib. > ' +
    _.union(arrayA, arrayB));

Fusionner et ne garder que les valeurs uniques en utilisant Set dans ECMAScript 6

Si nous pouvons utiliser l’ECMAScript 6 et que notre cible est uniquement les valeurs uniques de plusieurs tableaux, alors Set peut être une très bonne option.

nous pouvons l’utiliser comme dans l’exemple ci-dessous en utilisant la syntaxe spread :

arrayC = [...new Set([...arrayA, ...arrayB])];

Ou nous pouvons l’utiliser comme ça

arrayC = Array.from(new Set(arrayA.concat(arrayB)));

Exemple :

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];

console.log('Array A > ' + arrayA);
console.log('Array B > ' + arrayB);

// merging arrayA and arrayB keeping unique values using Set in ECMAScript 6

console.log(
    'Merging arrayA and arrayB keeping only unique values using Set > ' +
    Array.from(new Set(arrayA.concat(arrayB))));

console.log(
    'Merging arrayA and arrayB keeping only unique values using Set with spread syntax > ' +
    [...new Set([...arrayA, ...arrayB])]);

Fusionner sans valeurs doubles en utilisant la boucle for et le dictionnaire avec seulement la complexité O(n)

Une autre façon de fusionner deux tableaux et d’obtenir les résultats sans avoir de valeurs en double est d’utiliser l’idée du dictionnaire en JavaScript où nous ne pouvons pas avoir deux valeurs en double.

function mergeAndGetUnique(arrayA, arrayB) {
  var hash = {};
  var x;

  for (x = 0; i < arrayA.length; i++) {
    hash[arrayA[i]] = true;
  }
  for (x = 0; i < arrayB.length; i++) {
    hash[arrayB[i]] = true;
  }
  return Object.keys(hash);
}

Nous pouvons alors utiliser notre fonction comme cela :

arrayC = mergeAndGetUnique(arrayA, arrayB);

Exemple :

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

arrayC = arrayA.concat(arrayB);

//merging arrayA and arrayB keeping unique values using dictionary with O(n) complexity

function mergeAndGetUnique(arrayA, arrayB) {
  var hash = {};
  var x;
  
  for (x = 0; x < arrayA.length; x++) {
    hash[arrayA[x]] = true;
  }
  for (x = 0; x < arrayB.length; x++) {
    hash[arrayB[x]] = true;
  }
  return Object.keys(hash);
}

console.log("Merging arrayA and arrayB keeping only unique values using Set with spread syntax > "+ mergeAndGetUnique(arrayA, arrayB) );

Article connexe - Java Array