Wie man zwei Arrays ohne Duplikate in JavaScript zusammenführt

  2. How-To's
  3. JavaScript-Anleitungen
  4. Wie man zwei Arrays ohne Duplikate in …
Moataz Farid 12 Oktober 2023
JavaScript Java Array
  1. JavaScript-Merge-Arrays mit spread Syntax in ECMAScript 6
  2. JavaScript-Mischen von Arrays mit der Funktion Array.concat in ECMAScript 5
  3. Duplikate aus einem Array mit Hilfe der for-Schleife entfernen
  4. JavaScript entfernt Array-Duplikate aus einem Array mit Array.prototype in ECMAScript 6
  5. JavaScript entfernt Duplikate aus einem Array mit Object.defineProperty in ECMAScript 5
  6. Zusammenführen und nur eindeutige Werte beibehalten mit Lo-Dash oder Underscore.js
  7. Zusammenführen und nur eindeutige Werte behalten mit Set in ECMAScript 6
  8. Zusammenführen ohne doppelte Werte mit for Schleife und Dictionary mit nur O(n)-Komplexität
Wie man zwei Arrays ohne Duplikate in JavaScript zusammenführt

In diesem Tutorial erfahren Sie, wie wir zwei Arrays in JavaScript ohne doppelte Werte zusammenführen können.

Zunächst werden wir die verschiedenen Zusammenführungsmethoden sowohl in der ES5- als auch in der ES6-Version zeigen.

Dann werden wir lernen, wie wir die Duplikate mit verschiedenen Methoden entfernen können.

Schließlich werden Sie lernen, die Operation in nur einem Schritt durchzuführen, entweder durch das Schreiben eigener Funktionen oder durch die Verwendung externer Bibliotheken.

Nehmen wir an, wir haben zwei Arrays arrayA und arrayB und wir wollen sie in arrayC zusammenführen:

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

JavaScript-Merge-Arrays mit spread Syntax in ECMAScript 6

Die spread-Syntax (...) wird verwendet, um den Inhalt iterierbarer Elemente an einer Stelle zu erweitern, an der Elemente wie z. B. Arrays erwartet werden, oder an der z. B. null oder mehr Argumente in einer Funktion erwartet werden:

var arr = [2, 4];

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

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

Lassen Sie uns nun unsere Arrays zu arrayC unter Verwendung dieser spread Syntax zusammenfügen:

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

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

Ausgabe:

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

JavaScript-Mischen von Arrays mit der Funktion Array.concat in ECMAScript 5

Das Mischen unter Verwendung des Array.concat wird verwendet, um den Inhalt des Eingabe-Arrays ( arrayB ) mit dem Inhalt des Quell-Arrays (arrayA) zu verknüpfen.

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

Wenn wir die Duplikate aus dem resultierenden Array entfernen wollen, können wir das auf mehrere Arten tun, also lassen Sie uns sehen, wie wir es tun können.

Beispiel:

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

Ausgabe:

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

Duplikate aus einem Array mit Hilfe der for-Schleife entfernen

Der einfachste Weg, die Duplikate zu entfernen, ist die Erstellung einer eigenen verschachtelten for-Schleife.

Unser Algorithmus wird wie folgt aussehen:

  1. Erstellen Sie einen Klon aus dem Eingabe-Array inArray, so dass wir das Original-Array nicht verändern.
  2. Erstellen Sie eine verschachtelte Schleife, um das gefundene Duplikat mit arr.splice() zu finden und zu entfernen. Die äußere beginnt bei n und die innere bei 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;
}

Dann können wir diese Funktion removeDuplicates wie jede andere Funktion benutzen.

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

Beispiel:

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

Ausgabe:

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 entfernt Array-Duplikate aus einem Array mit Array.prototype in ECMAScript 6

Wir können die Duplikate auch mit Array.prototype entfernen, falls wir ECMAScript 6 verwenden können.

Was bedeutet überhaupt prototype? Der prototype ist wie das Objekt, das mit allen Funktionen und Objekten in JavaScript verbunden ist.

Lassen Sie uns sehen, wie wir den Array.prototype verwenden können.

Unser Algorithmus wird wie folgt aussehen:

  1. Erstellen Sie einen Klon aus dem Array Object this.concat(), so dass wir das ursprüngliche Array nicht verändern
  2. Erstellen Sie eine verschachtelte Schleife, um das mit arr.splice() gefundene doppelte Element zu finden und zu entfernen. Die äußere beginnt bei n und die innere bei 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;
}

Der Aufruf dieses Prototyps könnte dann wie folgt aussehen:

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

Beispiel:

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 entfernt Duplikate aus einem Array mit Object.defineProperty in ECMAScript 5

Wenn wir nur ECMAScript 5 verwenden können, können wir unsere eigene Eigenschaft unter Verwendung von Object.defineProperty erstellen. Auf diese Weise können wir Duplikate von allen Elementen vom Typ Array entfernen.

Hier definieren wir den Eigenschaftstyp als Array-Prototyp, indem wir durch Eingabe von Array.prototype schreiben. Der Name der Eigenschaft sollte als nächster Parameter als removeDuplicates eingefügt werden.

Lassen Sie uns sehen, wie er korrekt geschrieben wird:

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

Dann können wir diese Eigenschaft direkt so aufrufen:

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

Beispiel

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

Zusammenführen und nur eindeutige Werte beibehalten mit Lo-Dash oder Underscore.js

Wenn das Ziel darin besteht, ein neues Array mit eindeutigen Werten aus zwei oder mehr Arrays zu erhalten und externe Dateien zu verwenden, können wir dazu die Lo-Dash-Bibliothek verwenden.

Zuerst müssen wir die Bibliothek mit Cloudflare CDN innerhalb der HTML-Vorlage importieren,

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

Dann benutzen wir die Bibliothek wie:

arrayC = _.union(arrayA, arrayB);

Beispiel:

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

Zusammenführen und nur eindeutige Werte behalten mit Set in ECMAScript 6

Wenn wir ECMAScript 6 verwenden können und unser Ziel nur die eindeutigen Werte mehrerer Arrays sind, dann kann Set eine sehr gute Option sein.

können wir es wie im folgenden Beispiel mit der spread-Syntax verwenden:

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

Oder wir können es wie folgt verwenden

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

Beispiel:

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

Zusammenführen ohne doppelte Werte mit for Schleife und Dictionary mit nur O(n)-Komplexität

Eine andere Möglichkeit, zwei Arrays zu verschmelzen und die Ergebnisse ohne doppelte Werte zu erhalten, besteht darin, die Idee des Dictionaries in JavaScript zu verwenden, wobei wir keine zwei doppelten Werte haben können.

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

Dann können wir unsere Funktion so verwenden:

arrayC = mergeAndGetUnique(arrayA, arrayB);

Beispiel:

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

Verwandter Artikel - Java Array