Unterschied zwischen zwei Arrays in JavaScript

Pablo Felipe 12 Oktober 2023
Unterschied zwischen zwei Arrays in JavaScript

Wir stellen die Array-Entity-Methode .includes vor, die verwendet wird, um festzustellen, ob ein Element zu einem Array gehört. Wir werden sie verwenden, um herauszufinden, welche Elemente des ersten Arrays auch im zweiten Array enthalten sind.

Wir werden es in der Funktion condition() innerhalb der Methode .filter verwenden. Diese Callback-Funktion kann entweder eine Pfeilfunktion oder eine allgemeine Funktion als Callback-Funktion sein.

Der .filter kann buchstäblich verwendet werden, um Array-Elemente basierend auf einer Bedingung zu filtern, und die Callback-Funktion bestimmt, welche Elemente der .filter dem zurückgegebenen Array hinzufügt oder nicht.

Unterschied zwischen zwei Arrays in JavaScript

Das .include ist eine Methode der Array-Entität. Es gibt true zurück, wenn das als Parameter übergebene Element in dem Array enthalten ist, in dem die Methode aufgerufen wird, oder false, wenn das Element nicht enthalten ist. Als einfaches Beispiel:

// Input
let array = ['a', 'b', 'c', 'd'];
console.log(array.includes('a'))

Ausgabe:

// Output
true

Und wenn das Element nicht zum Array gehört, haben wir:

// Input
let array = ['a', 'b', 'c', 'd'];
console.log(array.includes('z'))

Ausgabe:

// Output
false

Diese Methode kann nur zwei Parameter empfangen. Wenn Sie mehr als eines übergeben, kann es einen falschen Wert für die als Parameter übergebene Menge von Elementen zurückgeben. Wie oben zu sehen ist, ist der erste Parameter das Element; der zweite ist der Index oder der fromIndex, der optional ist.

Der fromIndex ist der Index, in dem .includes nach dem Element sucht. Sehen wir uns das Beispiel unten an.

// Input
let array = [1, 2, 3, 4, 5];
console.log(array.includes(3, 3))

Da der Wert 3 auf dem Index array[2] steht, ist es false, dass das Array vom Index array[3] bis zum Ende ein Element gleich 3 hat.

// Output
false

Nun, für die .filter-Methode ist es auch eine Methode der Array-Entität, und diese Methode gibt ein neues Array zurück, das durch eine Bedingung gefiltert wird, die von der darin enthaltenen condition()-Funktion bereitgestellt wird. Die Rückgabe eines neuen Arrays bedeutet, dass das ursprüngliche Array, das die Methode aufruft, unveränderlich bleibt.

Auch diese condition()-Funktion ist eine Callback-Funktion. Eine Rückruffunktion wird als Parameter an eine andere Funktion oder Methode namens äußere Funktion übergeben.

Die äußere Funktion ruft die Callback-Funktion auf, um etwas zu tun; im Fall der .filter-Methode wird die Bedingungs-Callback-Funktion aufgerufen, um das Array basierend auf dieser Bedingung zu filtern.

Die Methode .filter ruft die Callback-Funktion für jedes Element im Array auf. Der .filter hat also eine array.length Iteration und gibt schließlich ein neues Array mit mehreren Elementen zurück, die der Anzahl der Iterationen entsprechen, bei denen die Callback-Funktion einen Wert zurückgibt, der true entspricht.

Wenn wir zum Beispiel möchten, dass alle Elemente eine Größe von 3 haben, können wir den .filter wie unten verwenden.

// Input
let array = ['one', 'two', 'three', 'four', 'five']
array = array.filter(element => element.length == 3)
console.log(array)

In diesem Fall erhält es als Parameter ein Element, und wenn dieses Element seine Größe gleich 3 hat, gibt es true zurück und gibt andernfalls false zurück. Die Methode .filter fügt also jedes Element hinzu, das die Bedingung true ergibt.

// Output
[ 'one', 'two' ]

Wie erwartet hat die Methode .filter ein Array basierend auf der Bedingung element.length == 3 zurückgegeben. Jeder Wert des Arrays mit einer Größe von 3 wurde dem zurückgegebenen Array hinzugefügt.

Aber wir möchten den Unterschied zwischen zwei Arrays ermitteln, und dies wird möglich sein, wenn alle zusammengefügt werden.

Verwenden Sie die Methode .filter für das Array, für das wir den Unterschied erhalten möchten, und darin verwenden wir .include als Bedingung, um zu überprüfen, ob das Element im Array, das .filter aufgerufen wird ist im zweiten Element enthalten. Sehen wir uns dieses Beispiel an:

// Input
let array1 = ['a', 'b', 'c', 'd', 'e'];
let array2 = ['a', 'b', 'c'];
console.log(array1.filter(element => array2.includes(element)))

Ausgabe:

// Output
[ 'a', 'b', 'c' ]

Sehen Sie, dass die Ausgabe nicht die Differenz zwischen den beiden Arrays ist, sondern ihre Schnittmenge. Nicht, dass die Bedingung array2.includes(element) vergleicht, ob das element im zweiten Array enthalten ist, und wenn es true ist, fügt der .filter dieses Element dem resultierenden Array hinzu.

Aber wenn wir ein logisches nicht oder ! im Zustand? Auf diese Weise fügt der .filter nur Elemente hinzu, die nicht im zweiten Array enthalten sind. Überprüfen Sie das Beispiel:

// Input
let array1 = ['a', 'b', 'c', 'd', 'e'];
let array2 = ['a', 'b', 'c'];
console.log(array1.filter(element => !array2.includes(element)))

Ausgabe:

// Output
[ 'd', 'e' ]

Schließlich haben wir den Unterschied zwischen den beiden Arrays.

Als Pluspunkt können wir, wenn wir alle Elemente erhalten möchten, die sich nicht in der Schnittmenge befinden, einfach Folgendes tun.

// Input
let array1 = ['a', 'b', 'c', 'd', 'e', 'f'];
let array2 = ['a', 'b', 'c', 'x', 'y', 'z'];
let array3 = array1.filter(element => !array2.includes(element))
                 .concat(array2.filter(element => !array1.includes(element)))
console.log(array3)

In diesem Beispiel wollen wir alle Elemente, die nicht 'a', 'b' oder 'c' sind, also ist die Ausgabe:

// Output
[ 'd', 'e', 'f', 'x', 'y', 'z' ]

Und schließlich können wir als letztes unsere Lösung zum Unterschied zwischen zwei Arrays in einer Prototypmethode der Array-Entität hinzufügen. Der .prototype ist eine Eigenschaft der Array-Entität, die es uns ermöglicht, benutzerdefinierte Eigenschaften und Methoden zu einer Entität hinzuzufügen.

Um eine .difference-Methode für die Array-Entität zu erstellen, können wir die folgende Struktur verwenden:

// Input
// Declaring the prototype .difference method
Array.prototype.difference = function(array2) {
  return this.filter(element => !array2.includes(element))
} let array1 = ['a', 'b', 'c', 'd', 'e'];
console.log(array1.difference(['a', 'b', 'c']))

Ausgabe:

// Output
[ 'd', 'e' ]

Auf diese Weise können wir .difference jedes Mal verwenden, wenn es notwendig ist, anstatt die Logik jedes Mal neu zu schreiben.

Verwandter Artikel - JavaScript Array