Mit JS in zehn Minuten die Existenz von Elementen in einem Array bestimmen

Vorwort

In der Front-End-Entwicklung müssen Sie häufig feststellen, ob ein Element in einem Array vorhanden ist. Tatsächlich gibt es viele Möglichkeiten zur Beurteilung. Schauen wir sie uns der Reihe nach an.

Definieren wir zunächst ein Array:

Konstanten arr = [
 13,
 FALSCH,
 'abcd',
 undefiniert,
 13,
 null,
 NaN,
 [1, 2],
 { ein: 123 },
 () => Datum.jetzt(),
 neues Datum('2021/03/04'),
 neuer RegExp('abc', 'ig'),
 Symbol('sym'),
];

In dieses Array schließen wir mehrere Typen ein: Zahl, Boolescher Wert, Zeichenfolge, undefiniert, null, Array, Objekt, Datum, Symbol usw. Die Zahl 13 kommt zweimal vor.

Kommen Sie vorbereitet

1. Index von

Am bekanntesten ist indexOf. Schließlich ist es schon früh erschienen, hat eine gute Kompatibilität und ist einfach zu verwenden.

Wenn das Element vorhanden ist, wird der Index des ersten Vorkommens zurückgegeben. Wenn das Element nicht im gesamten Array vorhanden ist, wird -1 zurückgegeben.

1.1 Verwendung

Solange Sie feststellen, ob die zurückgegebenen Daten -1 sind, können Sie feststellen, ob das Array das Element enthält.

arr.indexOf(13) >= 0; // true, indexOf gibt 0 zurück
arr.indexOf(2) >= 0; // false, indexOf gibt -1 zurück

Die entsprechende Funktion zu indexOf ist lastIndexOf, die von vorne nach hinten nach einem Element sucht. Wenn das Element existiert, gibt sie den letzten Index im Array zurück; wenn das Element nicht existiert, gibt sie -1 zurück.

arr.lastIndexOf(13) >= 0; // true, lastIndexOf gibt 4 zurück, den Index des letzten Vorkommens

Der Aufruf der beiden Methoden zur Ermittlung, ob eine Variable existiert, erfolgt identisch.

1.2 Der zweite optionale Parameter

indexOf und lastIndexOf verfügen außerdem über einen zweiten optionalen Parameter fromIndex, der verwendet wird, um den Index anzugeben, bei dem die Suche gestartet werden soll.

Wenn fromIndex in indexOf die Länge des Arrays überschreitet, wird direkt -1 zurückgegeben. Handelt es sich um eine negative Zahl, werden mehrere Indizes vom Ende aus gezählt (arr.length-Math.abs(fromIndex)) und dann beginnt die Rückwärtssuche.

Wenn in lastIndexOf fromIndex die Länge des Arrays erreicht oder überschreitet, wird das gesamte Array durchsucht; wenn es eine negative Zahl ist, werden einige Indizes vom Ende abgezählt (arr.length-Math.abs(fromIndex)) und dann wird mit der Vorwärtssuche begonnen. Wenn der Absolutwert der negativen Zahl die Länge des Arrays überschreitet, wird direkt -1 zurückgegeben.

arr.indexOf(13, 2); // 4, beginne mit der Suche bei Index 2, der erste Index von 13 ist 4
arr.indexOf(13, -10); // 4, Suche ab Index 1 (11-10) vorwärts arr.lastIndexOf(13, 2); // 0, Suche ab Index 2 vorwärts arr.lastIndexOf(13, -2); // 4, Suche ab Index 9 (11-2) vorwärts

Darüber hinaus verwenden indexOf und lastIndexOf zur Beurteilung eine strikte Gleichheitsmethode (===).

arr.indexOf(null); // 5. Vor null und undefiniert gibt es mehrere falsche Werte, mit denen auch der Indexwert von null genau ermittelt werden kann

2. beinhaltet

indexOf wird hauptsächlich verwendet, um den Indexwert eines Elements zu finden, aber wir können den zurückgegebenen Indexwert verwenden, um indirekt zu bestimmen, ob das Element im Array vorhanden ist.

Die in ES7 (ES2016) hinzugefügte Methode „Includes“ wird speziell verwendet, um zu bestimmen, ob ein Element vorhanden ist. Der Rückgabewert ist wahr oder falsch, wahr bedeutet Existenz, falsch bedeutet Nichtexistenz, einfach und klar.

arr.includes(13); // wahr
arr.includes('abc'); // falsch
arr.includes(false); // true, false Element existiert

Gleichzeitig gibt es in der Includes-Methode auch einen zweiten optionalen Parameter fromIndex. Die Verwendung von fromIndex ist dieselbe wie in indexOf. Wenn fromIndex die Länge des Arrays überschreitet, wird direkt -1 zurückgegeben. Handelt es sich um eine negative Zahl, werden mehrere Indizes vom Ende aus gezählt (arr.length-Math.abs(fromIndex)) und dann beginnt die Suche rückwärts.

arr.includes(13, 5); // false, Suche ab Index 5, kein Ergebnis gefunden

Bisher haben wir die folgenden Typen nicht beurteilt, wie etwa Array, Objekt, Datum und Symbol. Lassen Sie uns nun die folgenden Elemente beurteilen:

//Verwende indexOf zur Beurteilung arr.indexOf(NaN); // -1
arr.indexOf([1, 2]); // -1
arr.indexOf({ a: 123 }); // -1
arr.indexOf(() => Date.now()); // -1
arr.indexOf(neues Datum('2021/03/04')); // -1
arr.indexOf(neuer RegExp('abc', 'ig')); // -1
arr.indexOf(Symbol('sym')); // -1

// Verwenden Sie Includes zur Beurteilung arr.includes(NaN); // false
arr.includes([1, 2]); // falsch
arr.includes({ a: 123 }); // falsch
arr.includes(() => Date.now()); // falsch
arr.includes(neues Datum('2021/03/04')); // falsch
arr.includes(neuer RegExp('abc', 'ig')); // falsch
arr.includes(Symbol('sym')); // falsch

Das Ergebnis ist tragisch, keines dieser Elemente wird im Array gefunden. Tatsächlich sind sie aber alle im Array vorhanden.

Dies liegt daran, dass sowohl „indexOf“ als auch „includes“ durch strikte Gleichheit (===) bestimmt werden.

NaN === NaN; // falsch, zwei NaNs sind nie gleich [1, 2] === [1, 2]; // falsch, jedes deklarierte Array hat eine eigene Speicheradresse {a: 123} === {a: 123}; // falsch, dasselbe Array new Date('2021/03/04')===new Date('2021/03/04'); // falsch, die Daten sehen gleich aus, sind aber im Vergleich mit den neuen Objekten definitiv nicht gleich Symbol('sym')===Symbol('sym'); // Der Symboltyp wurde erstellt, um Konflikte zu vermeiden. Die Eigenschaften in Klammern dienen nur der Vereinfachung der Beschreibung

Für diese Typen, die nicht abgerufen werden können, müssen wir unsere eigenen Funktionen schreiben, um die speziellen Typen zu bestimmen.

3. finden und findIndex

Mit find() und findIndex() können wir die Beurteilungsmethode durch Rückruffunktionen anpassen.

3.1 Find-Methode

Die Methode find() gibt den Wert des ersten Elements in einem Array zurück, das die bereitgestellte Testfunktion erfüllt. Andernfalls wird „undefiniert“ zurückgegeben.

Die Methode find() kann keine undefinierten Elemente in einem Array erkennen.

Denn die Methode find() gibt „undefined“ zurück, unabhängig davon, ob das Element existiert oder nicht. Hier müssen wir andere Methoden in Betracht ziehen, auf die ich später noch eingehen werde.

arr.find((item) => item === 13); // 13, Element 13 gefunden
arr.find((item) => item === 3); // undefiniert, Element 3 nicht gefunden
arr.find((item) => item === undefined); // undefiniert, ich weiß nicht, ob es gefunden wurde oder nicht

Für die oben genannten, etwas komplexeren Typen benötigen wir spezielle Urteile:

arr.find((Artikel) => Artikeltyp === 'Nummer' && isNaN(Artikel)); // NaN

// Beim Vergleichen von Array- und Objekttypen wird die Situation kompliziert, weil der Typ jedes Elements nicht bestimmt werden kann. // Wenn Sie sicher sind, dass es sich um alle Basistypen wie String, Zahl, Boolean, undefiniert, null usw. handelt, können Sie sie in Strings konvertieren und dann vergleichen. // Es gibt viele Möglichkeiten, Strings zu konvertieren, wie JSON.stringify(arr), arr.toString(), arr.split('|') usw. // Bei komplizierteren Typen können Sie nur einzeln vergleichen oder Rekursion verwenden arr.find((item) => item.toString() === [1, 2].toString()); // [1, 2]
arr.find((Element) => JSON.stringify(Element) === JSON.stringify({ a: 123 })); // {a: 123}
arr.find((Artikel) => {
 wenn (Typ des Elements === 'Funktion') {
 return item.toString() === (() => Date.now()).toString();
 }
 gibt false zurück;
}); // () => Datum.jetzt()
arr.find((Artikel) => {
 wenn (Elementinstanz von Datum) {
 return item.toString() === neues Datum('2021/03/04').toString();
 }
 gibt false zurück;
}); // Do., 04. März 2021, 00:00:00 GMT+0800
arr.find((Artikel) => {
 if (Elementinstanz von RegExp) {
 return item.toString() === neuer RegExp('abc', 'ig').toString();
 }
 gibt false zurück;
}); // /abc/gi

// Symbole können nicht verglichen werden, nur die gleiche Beschreibung kann geprüft werden arr.find((item) => {
 wenn (Typ des Elements === 'Symbol') {
 return item.toString() === Symbol('sym').toString();
 }
 gibt false zurück;
}); // Symbol(sym)

Der obige Beurteilungscode wird auch in den folgenden Methoden verwendet.

3.2 Vergleich zweier Elemente

Wir haben oben verschiedene Elementtypen verglichen. Lassen Sie uns diese kurz zusammenfassen.

Definieren wir zunächst eine Funktion:

const vergleichen = (x, y) => {};

3.2.1 Grundtypen

Für Elemente von Basistypen wie String, Number, Boolean, Undefined, Null usw. ist ein direkter Vergleich möglich:

const vergleichen = (x, y) => {
 gibt x === y zurück;
};

3.2.2 NaN-Daten

NaN verwendet typeof, um zu bestimmen, ob es sich um einen Zahlentyp handelt, aber NaN ist nicht gleich einer beliebigen Zahl, auch nicht sich selbst.

const vergleichen = (x, y) => {
 wenn (Typ von x === 'Zahl' und istNaN(x) und Typ von y === 'Zahl' und istNaN(y)) {
  gibt true zurück;
 }
 gibt x === y zurück;
};

3.2.3 Funktion, Datum und RegExp

Mit diesen Typen können Variablen zum Vergleichen in Zeichenfolgen umgewandelt werden:

const vergleichen = (x, y) => {
 wenn (Typ von x === 'Zahl' und istNaN(x) und Typ von y === 'Zahl' und istNaN(y)) {
  gibt true zurück;
 }
 Wenn (
  (Typ von x === 'Funktion' und Typ von y === 'Funktion') ||
  (x Instanz von Date && y Instanz von Date) ||
  (x Instanz von RegExp && y Instanz von RegExp) ||
  (x Instanz von String && y Instanz von String) ||
  (x Instanz von Zahl && y Instanz von Zahl)
 ) {
  return x.toString() === y.toString();
 }
 gibt x === y zurück;
};

Für Objekttyp und Array können wir jedes Element trennen und sie dann mit der obigen Methode einzeln vergleichen.

3.3 findIndex-Methode

Wenn wir auch feststellen möchten, ob das Array „undefined“ enthält, können wir die Methode findIndex() verwenden.

Die Methode findIndex() gibt den Index des ersten Elements in einem Array zurück, das die bereitgestellte Testfunktion erfüllt. Wenn kein entsprechendes Element gefunden wird, wird -1 zurückgegeben.

arr.findIndex((Artikel) => Artikel === undefiniert); // 3
arr.findIndex((item) => item === 3); // -1, Nummer 3 nicht gefunden

Die Beurteilung anderer Datenformate ist dieselbe wie oben bei find().

Seltener Gast

4. einige

Die Methode some() testet, ob im Array mindestens ein Element vorhanden ist, das den Test der bereitgestellten Funktion besteht. Es gibt einen Booleschen Wert zurück.

Hinweis: Beim Test mit einem leeren Array wird in allen Fällen „false“ zurückgegeben.

Die Methode some() wird auf die gleiche Weise wie die Methode find() verwendet, mit der Ausnahme, dass die Methode some() Daten vom Typ Boolesch zurückgibt.

arr.some((item) => item === false); // wahr
arr.some((item) => item === undefiniert); // wahr
arr.some((Artikel) => Artikeltyp === 'Nummer' && isNaN(Artikel)); // wahr
arr.some((item) => item === 3); // false, die Zahl 3 existiert nicht
arr.some((Artikel) => {
 wenn (Elementinstanz von Datum) {
  return item.toString() === neues Datum('2021/03/04').toString();
 }
 gibt false zurück;
}); // WAHR

5. Filter

Die Methode filter() erstellt ein neues Array, das alle Elemente enthält, die den von der bereitgestellten Funktion implementierten Test bestehen.

Unabhängig davon, wie viele Elemente gefunden werden oder wie keine Elemente gefunden werden, gibt die Filtermethode () ein Array zurück und die Daten im Array sind die gewünschten Elemente.

arr.filter((Artikel) => Artikel === false); // 1
arr.filter((Artikel) => Artikel === undefiniert); // 1
arr.filter((Artikel) => Artikeltyp === 'Nummer' && isNaN(Artikel)); // 1
arr.filter((Artikel) => Artikel === 13); // 2
arr.filter((Artikel) => Artikel === 3); // 0
arr.filter((item) => {
 wenn (Elementinstanz von Datum) {
  return item.toString() === neues Datum('2021/03/04').toString();
 }
 gibt false zurück;
}); // 1

Daher können wir anhand der Länge des Arrays bestimmen, ob das ursprüngliche Array die gewünschten Elemente enthält.

leicht

6. Fazit

Es gibt viele Möglichkeiten, Elemente in einem Array zu finden. Wir können basierend auf dem Format der Elemente im Array eine geeignetere Methode auswählen. Wenn es sich um grundlegende Typen handelt, wird empfohlen, zuerst die Methode „includes()“ zu verwenden. Wenn das Format komplizierter ist, wird empfohlen, die Methode „some()“ zu verwenden. Beide Methoden geben den Booleschen Typ direkt zurück und das Ergebnis der Methode kann ohne weitere Konvertierung direkt verwendet werden.

Damit ist dieser Artikel über verschiedene Möglichkeiten, mit JS zu bestimmen, ob ein Array Elemente enthält, in zehn Minuten abgeschlossen. Weitere relevante Inhalte zur Verwendung von JS zum Bestimmen, ob ein Array Elemente enthält, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!