Finden Sie den Index des Objekts im JavaScript-Array

1. Verwenden Sie die Methode findIndex(), um den Index des Objekts in einem Array in JavaScript zu finden
2. Verwenden Sie die Bibliothek lodash, um den Index des Objekts im JavaScript-Array zu finden

Dieser Artikel untersucht die Methode findIndex() und die Verwendung von lodash, um den Index des Objekts im JavaScript-Array zu finden.

Verwenden Sie die Methode findIndex(), um den Index des Objekts in einem Array in JavaScript zu finden

ES6 hat eine neue Methode namens findIndex() zum Array.prototype hinzugefügt, die das erste Element in einem Array zurückgibt, das den bereitgestellten Test besteht. Die Methode findIndex() gibt den Index des Elements zurück, das eine Testfunktion erfüllt oder -1, wenn kein Element den Test bestanden hat. findIndex() eignet sich am besten für Arrays mit nicht-primitiven Typen (z. B. Objekte), um den Index eines Elements zu finden.

Als ersten Parameter im Array.prototype.findIndex() stellen wir einen Callback bereit. Diese Methode ist nützlich, wenn der Index der Arrays nicht primitiv ist. Wir können diese Methode verwenden, wenn der Array-Index mehr als nur Werte enthält. Nachdem das erste Element zurückgegeben wurde, das der angegebenen Bedingung entspricht, stoppt findIndex() die Überprüfung des Arrays auf die verbleibenden Elemente im Array.

Die Syntax für findIndex() ist unten dargestellt.

array.findIndex(function(currentValue, index, arr))

Optional können index und arr an die Callback-Funktion übergeben werden. Die Option index zeigt auf den Index des aktuellen Elements im Array, während arr das Array-Objekt ist, zu dem das aktuelle Element gehört. findIndex() gibt -1 zurück, wenn die im Array angegebene Bedingung nicht zutrifft.

Angenommen, wir haben das folgende Array mit primitiven Typen und möchten den Index des Elements finden, das ein Alter über 18 hat. Dann können wir findIndex() verwenden, um den Index des ersten Elements zu finden, das der Bedingung entspricht spezifiziert.

Beispielcode:

const ages = [3, 10, 17, 23, 52, 20];
let index = ages.findIndex(age => age > 18);
console.log(index);

Ausgabe:

3

Da das erste Element, das der angegebenen Bedingung entspricht, einen Index von 3 hat, da es über 18 liegt, erhalten wir den Wert des Index als 3.

Jetzt können wir dieselbe Logik verwenden, um den Index des Objekts zu finden, das der Bedingung entspricht, die wir mit der Methode findIndex() angeben. Mit findIndex() können wir den Index einer Person finden, die die Note B erhalten hat.

Beispielcode:

const Result =
    [
      {
        name: 'John',
        grade: 'A',
      },
      {
        name: 'Ben',
        grade: 'C',
      },
      {
        name: 'Anthony',
        grade: 'B',
      },
      {
        name: 'Tim',
        grade: 'B-',
      },
    ]

    const index = Result.findIndex((element) => element.grade === 'B');
console.log(index)

Ausgabe:

2

Hier wird der findIndex() mit dem Result-Array verwendet, das unsere Daten in Form von JavaScript-Objekten enthält. Die ebenfalls mit ES6 eingeführte Pfeilfunktion haben wir als Callback-Funktion mit der Methode findIndex() implementiert. Wir haben element an die Callback-Funktion übergeben, die den aktuellen Wert des Objekts in dem durchgeschleiften Array hält.

Verwenden Sie die Bibliothek lodash, um den Index des Objekts im JavaScript-Array zu finden

Wir können die leichtgewichtige Bibliothek lodash verwenden, die JavaScript erleichtert, indem wir uns die Arbeit mit Arrays, Zahlen, Objekten, Strings und mehr erleichtern. Wir können die Datei lodash.js von der offiziellen Website herunterladen und wie unten gezeigt auf unsere Website laden.

<script src="lodash.js"> </script>

Wir können es lokal als npm i --save lodash oder yarn add lodash installieren. Wenn alles eingerichtet ist, können wir die Methode _.findIndex() verwenden. Die Syntax ist unten dargestellt.

_.findIndex(array, [predicate = _.identity], [fromIndex = 0])

Hier geben die Argumente array das Array an, das wir verarbeiten müssen. Die Option [predicate=_.identity] ist die Funktion, die pro Iteration aufgerufen wird. Die dritte Option [fromIndex=0] ist optional und kann verwendet werden, um den Startpunkt für den Start der Iteration festzulegen.

Wir verwenden das in der obigen Methode erstellte Array zur Demonstration der Methode lodash.

Code-Beispiel:

var index = _.findIndex(Result, {grade: 'B'})
console.log(index);

Ausgabe:

2