Vier Methoden zum Durchsuchen von Arrays in JavaScript

In JavaScript gibt es viele nützliche Möglichkeiten, Elemente in Arrays zu finden. Sie könnten jederzeit auf die Basisschleife zurückgreifen, aber mit ES6+ gibt es eine Vielzahl von Methoden, um das Array in einer Schleife zu durchlaufen und das Gewünschte mit Leichtigkeit zu finden.

Welche Methode wenden Sie bei so vielen verschiedenen Methoden an und in welchem Fall?  Wenn Sie zum Beispiel ein Array durchsuchen, möchten Sie wissen, ob das Element überhaupt in dem Array enthalten ist?  Benötigen Sie den Index des Elements oder das Element selbst?

Bei jeder der verschiedenen Methoden, die wir behandeln werden, ist es wichtig zu verstehen, dass es sich bei allen um integrierte Methoden auf dem Array.Prototyp handelt. Das bedeutet, dass Sie sie einfach auf ein beliebiges Array mit Punktnotation verketten müssen.  Das bedeutet auch, dass diese Methoden nicht für Objekte oder etwas anderes als Arrays verfügbar sind (obwohl es Überschneidungen mit Strings gibt).

Wir sehen uns die folgenden Array-Methoden an:

• Array.includes
• Array.find
• Array.indexOf
• Array.filter

beinhaltet

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];

alligator.includes("thick scales"); // returns true

Die .beinhaltet-Methode gibt einen booleschen Wert zurück und ist ideal, um Ihnen mitzuteilen, ob ein Element in einem Array existiert oder nicht.  Sie gibt eine einfache wahre oder falsche Antwort. Dies ist die grundlegende Syntax:

arr.includes(valueToFind, [fromIndex]);

Wie Sie in unserem Beispiel sehen, hatten wir nun nur einen Parameter - den valueToFind. Dies ist der Wert, der im Array übereinstimmt. Der optionale fromIndex ist eine Zahl, die anzeigt, welchen Index Sie mit der Suche beginnen möchten, (Standardwert ist 0, das gesamte Array wird durchsucht). Da das Element „thick scales“ also bei dem Index 0 liegt, wäre das folgende falsch: alligator.includes('thick scales', 1); , da es bei Index 1 und weiter mit der Suche beginnt.

Jetzt gibt es einige wichtige Dinge zu beachten. Diese .beinhaltet() -Methode verwendet einen strengen Vergleich. Das bedeutet, dass aus dem obigen Beispiel Folgendes falsch zurückgegeben werden würde: alligator.includes('80'); das liegt daran, dass, obwohl 80 == '80' wahr ist, 80 === ‘80’ falsch ist - verschiedene Typen werden einem strengen Vergleich nicht standhalten.``

find

Wie unterscheidet sich .find() von der beinhaltet() Methode? Wenn wir in unserem Beispiel nur den Text „beinhaltet“ in „finden“ geändert haben, würden wir diesen Fehler erhalten:

Uncaught TypeError: thick scales is not a function

Das liegt daran, dass bei der Find-Methode eine Funktion übergeben werden muss.  Das liegt daran, dass die Suchmethode nicht einfach den einfachen Vergleichsoperator wie “beinhaltet()” verwenden wird. Stattdessen übergibt es jedes Element an Ihre Funktion und prüft, ob es wahr oder falsch zurückgibt.  Obwohl dies also funktioniert: alligator.find(() => 'thick scales'); würden Sie wahrscheinlich Ihren eigenen Vergleichsoperator in die Funktion setzen wollen, damit er alles Relevante zurückgibt.

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];

alligator.find(el => el.length < 12); // returns '4 foot tail'

Diese einfache Funktion in unserer Finden-Methode betrachtet jedes Element des Arrays mit dem Alias ‘el’, den wir ihm zugewiesen haben, und hält an, wenn das erste gefunden wurde, das wahr ist.  In unserem Fall hat wahr eine Längeneigenschaft von weniger als 12 (Zahlen haben keine Längeneigenschaft). Sie könnten diese Funktion natürlich so komplex gestalten wie Sie sie benötigen, so dass Ihr wahrer Zustand Ihren Anforderungen entspricht.

Beachten Sie auch, dass dies nicht wahr zurückgegeben wurde. Die Finden-Methode gibt keinen Booleschen Wert zurück, sondern das erste übereinstimmende Element. Wenn es kein übereinstimmendes Element gibt, da es nichts gibt, das die in Ihrer Funktion definierten Kriterien erfüllt, wird es als undefined zurückgegeben. Beachten Sie auch, dass es das erste zurückgibt, wenn also mehr als ein Element im Array vorhanden ist, das den Kriterien entspricht, wird es nur die erste Instanz erhalten. Wenn es in unserem Beispiel eine weitere Zeichenfolge von Länge unter 12 nach „4 Fuß hoch“ gab, würde dies unser Ergebnis nicht ändern.

In unserem Beispiel haben wir den Rückruf nur mit einem Parameter verwendet.  Sie können auch Parameter hinzufügen, um auf den Index des aktuellen Elements zu verweisen.  Ein weiterer Parameter kann das gesamte Array selbst sein, aber ich finde, dass dies selten verwendet wird. Hier ist ein Beispiel der Verwendung mit dem Index:

alligator.find((el, idx) => typeof el === "string" && idx === 2); // returns '4 foot tall'

Wir wissen, dass es in unserem Array 3 verschiedene Elemente gibt, die der ersten Bedingung entsprechen (typeof el === „string“). Wenn dies unsere Bedingung war, würde sie die erste zurückgeben, „thick scales“ . Der Unterschied ist jedoch, dass nur eine den Index von 2 hat und das ist „4 Fuß hoch“.

Apropos Indizes, eine ähnliche Array-Methode ist .findIndex(). Diese Methode empfängt auch eine Funktion, aber wie Sie sich denken können, gibt sie den Index des übereinstimmenden Elements anstelle des Elements selbst zurück.

indexOf

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];

alligator.indexOf("rounded snout"); // returns 3

Wie die .includes() Methode, verwendet .indexOf() einen strengen Vergleich , keine Funktion, wie wir bei der Methode .finden() gesehen haben. Aber im Gegensatz zu .includes() gibt es den Index des Elements zurück, anstatt einen Booleschen Wert. Sie können auch angeben, bei welchem Index im Array die Suche beginnen soll.

Ich finde indexOf() sehr nützlich. Es ist schnell und einfach und kann Ihnen sagen, wo sich das Element im Array befindet und ob es existiert.  Wie wird Ihnen mitgeteilt, ob das Element existiert? Grundsätzlich können wir wissen, dass das Element existiert, wenn es eine positive Zahl zurückgibt, und wenn es -1 zurückgibt, wissen wir, dass das Element nicht existiert.

alligator.indexOf("soft and fluffy"); // returns -1
alligator.indexOf(80); // returns 1
alligator.indexOf(80, 2); // returns -1

Und wie Sie sehen können, obwohl wir die Methoden find() oder findIndex() erhalten können, um uns die gleichen Informationen zu geben, ist dies viel weniger zu schreiben. Wir brauchen keine Vergleichsfunktion zu schreiben, da sie bereits innerhalb der Methode indexOf liegt.

Genau wie die anderen gibt indexOf() jetzt auch den Index des ersten gefundenen übereinstimmenden Elements zurück.  JavaScript gibt uns eine alternative Array-Methode .lastIndexOf(). Wie Sie sich denken können, macht dies dasselbe wie indexOf() aber ausgehend vom letzten Index des Arrays und in umgekehrter Reihenfolge. Sie können auch einen zweiten Parameter angeben, aber denken Sie daran, dass sich die Indexes nicht ändern, nur weil Sie eine andere Methode verwenden.

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80];

alligator.indexOf(80); // returns 1
alligator.lastIndexOf(80); // returns 4
alligator.indexOf(80, 2); // returns 4
alligator.lastIndexOf(80, 4); // returns 4
alligator.lastIndexOf(80, 3); // returns 1

Bonus: filter

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80];

alligator.filter(el => el === 80); //returns [80, 80]

Die filter()-Methode ist wie die find()-Methode, d. h. sie erfordert eine übermittelte Funktion und eine Bedingung für das, was zurückgegeben wird.  Der Hauptunterschied ist, dass filter() immer ein Array zurückgibt, auch wenn es nur ein übereinstimmendes Element gibt.  Aber sie gibt alle übereinstimmenden Elemente zurück, während find() nur die erste Übereinstimmung zurückgibt.

Das Wichtige am Filter ist, dass er alle Elemente zurückgibt, die Ihren Kriterien entsprechen.  Es kann auch nur ich sein, aber ich kann mich täuschen, wenn ich denke: „Das sind die Elemente, die ich herausfiltern möchte", wenn Sie in Wahrheit die Elemente angeben, die Sie hineinfiltern möchten.

Zusammenfassung

Die einfachste Methode, die ich verwende, wenn ich etwas suche, ist die find()-Methode, aber wie Sie sehen können, hängt das wirklich von Ihrem Fall ab.

• Müssen Sie nur wissen, ob sie existiert?  Verwenden Sie .includes().
• Müssen Sie das Element selbst besorgen?  Verwenden Sie .find() oder .filter() für mehrere Elemente.
• Müssen Sie den Index des Elements finden? Verwenden Sie .indexOf() oder findIndex() für eine komplexere Suche.

Die Arrays in den Beispielen waren hier sehr einfach. Sie können sich mit einem Array von Objekten konfrontiert sehen. Im Folgenden finden Sie einige sehr einfache Beispiele, um durch den Dschungel vernetzter Objekte zu navigieren:

const jungle = [
  { name: "frog", threat: 0 },
  { name: "monkey", threat: 5 },
  { name: "gorilla", threat: 8 },
  { name: "lion", threat: 10 }
];

// break the object down in order to use .includes() or .indexOf()
const names = jungle.map(el => el.name); // returns ['frog', 'monkey', 'gorilla', 'lion']
console.log(names.includes("gorilla")); // returns true
console.log(names.indexOf("lion")); // returns 3 - which corresponds correctly assuming no sorting was done

// methods we can do on the array of objects
console.log(jungle.find(el => el.threat == 5)); // returns object - {name: "monkey", threat: 5}
console.log(jungle.filter(el => el.threat > 5)); // returns array - [{name: "gorilla", threat: 8}, {name: 'lion', threat: 10}]