Unisci due array senza duplicati in JavaScript

  2. HowTo
  3. Howtos JavaScript
  4. Unisci due array senza duplicati in …
Moataz Farid 12 ottobre 2023
JavaScript Java Array
  1. JavaScript Merge Arrays utilizzando la sintassi Spread in ECMAScript 6
  2. JavaScript Merge Arrays utilizzando la funzione Array.concat in ECMAScript 5
  3. Rimuovi i duplicati da un array usando il cicli for
  4. JavaScript Rimuovi i duplicati di array da un array utilizzando Array.prototype in ECMAScript 6
  5. JavaScript rimuove i duplicati dall’array utilizzando Object.defineProperty in ECMAScript 5
  6. Unisci e mantieni solo valori univoci utilizzando Lo-Dash o Underscore.js
  7. Unisci e mantieni solo valori univoci utilizzando Set in ECMAScript 6
  8. Unisci senza duplicare i valori usando il cicli for e il Dictionary con solo O(n) complessità
Unisci due array senza duplicati in JavaScript

Questo tutorial imparerà come possiamo unire due array in JavaScript senza valori duplicati.

Innanzitutto, mostreremo i diversi metodi di fusione nelle versioni ES5 ed ES6.

Quindi, impareremo come rimuovere i duplicati utilizzando metodi diversi.

Infine, imparerai a eseguire l’operazione in un solo passaggio, scrivendo le tue funzioni o utilizzando librerie esterne.

Supponiamo di avere due array arrayA e arrayB e di volerli unire in arrayC:

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

JavaScript Merge Arrays utilizzando la sintassi Spread in ECMAScript 6

La sintassi spread (...) viene utilizzata per espandere il contenuto di elementi iterabili in un punto in cui sono attesi elementi come gli array o in cui sono previsti zero o più argomenti in una funzione, ad esempio:

var arr = [2, 4];

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

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

Ora uniamo i nostri array in arrayC usando la sintassi spread:

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

Codice di esempio:

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);

Produzione:

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

JavaScript Merge Arrays utilizzando la funzione Array.concat in ECMAScript 5

La fusione usando Array.concat è usata per concatenare il contenuto dell’array di input (arrayB) al contenuto dell’array sorgente (arrayA).

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

Se vogliamo rimuovere i duplicati dall’array risultante, possiamo farlo in più modi, quindi vediamo come possiamo farlo.

Esempio:

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);

Produzione:

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

Rimuovi i duplicati da un array usando il cicli for

Il modo più semplice per rimuovere i duplicati è creare il proprio bucle for annidato.

Il nostro algoritmo sarà come:

  1. Creare un clone dall’array di input inArray così non cambieremo l’array originale.
  2. Creare un bucle annidato per trovare e rimuovere l’elemento duplicato trovato utilizzando arr.splice(). L’esterno inizia da n e l’interno da 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;
}

Quindi possiamo usare la funzione removeDuplicates come qualsiasi altra funzione.

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

Esempio:

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) );

Produzione:

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 Rimuovi i duplicati di array da un array utilizzando Array.prototype in ECMAScript 6

Possiamo anche rimuovere i duplicati usando Array.prototype nel caso in cui possiamo usare ECMAScript 6.

Cosa significa anche prototype? Il prototype è come l’oggetto associato a tutte le funzioni e gli oggetti in JavaScript.

Vediamo come possiamo utilizzare il Array.prototype.

Il nostro algoritmo sarà come:

  1. Creare un clone dall’array Object this.concat() così non cambieremo l’array originale
  2. Creare un bucle annidato per trovare e rimuovere l’elemento duplicato trovato utilizzando arr.splice(). L’esterno inizia da n e l’interno da 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;
}

Quindi chiamare quel prototipo potrebbe essere come:

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

Esempio:

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 rimuove i duplicati dall’array utilizzando Object.defineProperty in ECMAScript 5

Se possiamo usare solo ECMAScript 5, possiamo creare la nostra proprietà usando Object.defineProperty in questo modo saremo in grado di rimuovere i duplicati da tutti gli elementi di tipo Array.

Qui definiamo il tipo di proprietà come un prototipo di array scrivendo digitando Array.prototype. Il nome della proprietà dovrebbe essere inserito come parametro successivo come removeDuplicates.

Vediamo come è scritto correttamente:

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;
  }
});

Quindi possiamo chiamare quella proprietà direttamente in questo modo:

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

Esempio

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() );

Unisci e mantieni solo valori univoci utilizzando Lo-Dash o Underscore.js

Se l’obiettivo è ottenere un nuovo array di valori univoci da due o più array e utilizzare file esterni, possiamo utilizzare la libreria Lo-Dash per farlo.

Innanzitutto, dobbiamo importare la libreria utilizzando Cloudflare CDN all’interno del modello HTML,

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

Quindi usiamo la libreria come:

arrayC = _.union(arrayA, arrayB);

Esempio:

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));

Unisci e mantieni solo valori univoci utilizzando Set in ECMAScript 6

Se possiamo usare ECMAScript 6 e il nostro obiettivo è solo i valori univoci di più array, allora Set può essere un’ottima opzione.

possiamo usarlo come nell’esempio seguente usando la sintassi spread:

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

Oppure possiamo usarlo così

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

Esempio:

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])]);

Unisci senza duplicare i valori usando il cicli for e il Dictionary con solo O(n) complessità

Un altro modo per unire due array e ottenere i risultati senza avere valori duplicati è utilizzare l’idea del Dizionario in JavaScript dove non possiamo avere due valori duplicati.

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);
}

Quindi possiamo usare la nostra funzione in questo modo:

arrayC = mergeAndGetUnique(arrayA, arrayB);

Esempio:

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) );

Articolo correlato - Java Array