Unterschied zwischen der Funktion indexOf und findIndex des Arrays

125

Ich bin verwirrt zwischen dem Unterschied zwischen den beiden Funktionen indexOf und find Index in einem Array.

Die Dokumentation sagt

findIndex - Gibt den Index des ersten Elements im Array zurück, bei dem das Prädikat true ist, andernfalls -1.

und

indexOf - Gibt den Index des ersten Auftretens eines Werts in einem Array zurück.

Rahul Singh
quelle
4
Ich denke, der Unterschied besteht darin, dass man eine Funktion als Argument verwendet (um komplexere Fundstücke zu ermöglichen, z. B. wenn Sie nach dem ersten Auftreten eines Werts mit einem bestimmten Teilstring gesucht haben, anstatt nur den gesamten Wert). Man nimmt nur den Wert, den Sie haben. Ich suche. Das ist eigentlich keine schlechte Frage. Abstimmungen ohne Erklärung sollten abstimmbar sein.
Tim Consolazio
Manchmal ist es am besten, mit der Sprachspezifikation (dh ECMA-262) zu beginnen und die Lücken mit anderem Material zu füllen: Array.prototype.indexOf (searchElement [, fromIndex]) vs Array.prototype.findIndex (Prädikat [, thisArg]) .
RobG
Danke Tim und RobG
Rahul Singh

Antworten:

194

Der Hauptunterschied sind die Parameter dieser Funktionen:

  • Array.prototype.indexOf()erwartet einen Wert als ersten Parameter. Dies macht es zu einer guten Wahl, den Index in Arrays primitiver Typen (wie Zeichenfolge, Zahl oder Boolescher Wert) zu finden.

  • Array.prototype.findIndex()erwartet einen Rückruf als ersten Parameter. Verwenden Sie diese Option, wenn Sie den Index in Arrays mit nicht primitiven Typen (z. B. Objekten) benötigen oder Ihre Suchbedingung komplexer ist als nur ein Wert.

Beispiele für beide Fälle finden Sie unter den Links.

str
quelle
4
Falls sich jemand fragt, welche primitiven Typen js sind, handelt es sich um Zeichenfolgen, Zahlen und Boolesche Werte.
John Lee
3
Bitte beachten Sie, dass dies indexOffunktioniert, um Objekte zu finden. Es ist wichtig zu unterscheiden, dass es ein einzelnes Objekt akzeptiert, nicht nur einen Wert, und nach Gleichheit und nicht nach Wert vergleicht. Per Mozilla-Dokumentation: indexOf() compares searchElement to elements of the Array using strict equality (the same method used by the === or triple-equals operator). Bitte ändern Sie die findIndexErklärung so, dass sie nur das Glied "oder Ihre Suchbedingung ist komplexer als nur ein einzelner Wert oder eine Referenz" enthält, um dies zu korrigieren, da es mich ursprünglich in die Irre geführt hat. Vielen Dank!
gebrochene Arme
2
@brokenalarms Das stimmt, aber nur, wenn Sie einen Verweis auf ein tatsächliches Objekt im Array haben. Gibt beispielsweise [{a:1}].indexOf({a:1})zurück, -1obwohl das Objekt dasselbe zu sein scheint (dies ist jedoch nicht der Fall). Ich bin mir nicht sicher, ob diese Informationen für die Antwort hilfreich sind, da sie möglicherweise verwirrend sind. Wenn Sie mehr über das genaue Sprachverhalten wissen möchten, sollten Sie die Spezifikation lesen.
Str
Darüber hinaus vergleicht indexOf () searchElement mit Elementen des Arrays unter Verwendung strikter Gleichheit (dieselbe Methode, die vom Operator === oder Triple-Equals verwendet wird).
Immirza
Bemerkenswert ist jedoch, dass .indexOf(NaN)immer zurückkehren wird, -1weil NaN==NaNes immer ist false. NaN ist ein primitiver Typ, weil typeof NaNes numberso ist und so ist, nullund undefineddeshalb würde ich dies ändern, um zu vermeiden, dass indexOfWerke über primitive Typen gesagt werden
Matthew
13

FindIndex ist nützlich, wenn Sie das erste Element suchen möchten, das Ihrem Prädikat entspricht: Im Beispiel von W3C gibt es Zahlen und Übereinstimmungen, wenn das Alter des Kunden über oder gleich 18 ist.

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}

console.log(ages.findIndex(checkAdult));

Konsole:

2

Sie können einen genauen Elementindex mit der indexOf-Funktion von Array finden, aber Sie können kein Prädikat übergeben. Es ist schneller, wenn Sie ein bestimmtes Element finden möchten:

var ages = [3, 10, 18, 20];
console.log(ages.indexOf(10));

kehrt zurück:

1

Die Indexzählung beginnt bei 0, daher ist der erste Elementindex 0.

Dániel Kis
quelle
4

Der Hauptunterschied sind die Parameter dieser Funktionen:

-> Array.prototype.indexOf () :

   var fruits = ["Banana", "Orange", "Apple", "Mango"];
   var a = fruits.indexOf("Apple");
   The result of a will be: 2

-> Array.prototype.findIndex () :

       var ages = [3, 10, 18, 20];

       function checkAdult(age) {
        return age >= 18;
       }

       function myFunction() {
         document.getElementById("demo").innerHTML = 
         ages.findIndex(checkAdult);
       }

       The result will be: 2
ashishdudhat
quelle
4

Sie können auch verwenden includes:

[1, 2, 3].includes(2);      // true
[1, 2, 3].includes(4);      // false
[1, 2, 3].includes(3, 3);   // false

aber ich bevorzuge die indexOfMethode:

var vals = [ "foo", "bar", 42, "baz" ];
if (~vals.indexOf( 42 )) {
  // found it!
}
zloctb
quelle
1
enthält auch erfordert eine Polyfüllung für IE
MJB
indexOfist auch viel schneller.
Eozzy
4

Ein weiterer Unterschied besteht darin, dass der Benutzer mit findIndex () eine Funktion anwenden und das Element in dem Array finden kann, das den Test besteht.

Dies gilt jedoch nicht für den Operator indexOf () . Ein Benutzer kann einfach überprüfen, ob das bestimmte Element im Array vorhanden ist oder nicht.

Alok Ranjan
quelle
3

Einfach - Welche Art von Array-Struktur verwenden Sie?

  • Wenn Array von Objekten findIndex();
  • Sonst , indexOf().

"Ich möchte den Index in einer Reihe von Objekten mit dem Schlüssel" Orange "finden.

let fruits = [
   { type: "Apple", quantity: 9 },
   { type: "Banana", quantity: 2},
   { type: "Orange", quantity: 8},
   { type: "Pear", quantity: 777}
];

let myIndex = fruits.findIndex(fruit => fruit.type === "Orange"); // Returns 2.

"Ich möchte den Index in einem einfachen Array finden ".

let fruits = [ "Apple", "Banana", "Pear", "Orange"];

let index = fruits.indexOf("Orange"); // Returns 3.
daCoda
quelle
0

Sie können die folgenden Codes ausprobieren: -

let city = ['Delhi', 'mumbai']
const a = city.findIndex((item) => 
item.toLowerCase()==='delhi')
console.log(a) // returns 0

let c = city.indexOf('mumbai') // returns 1
console.log(c)
Gulsan Borbhuiya
quelle
Ich denke nicht, dass dieser Code einer Erklärung bedarf, da dieser Code für Anfänger sehr einfach und leicht verständlich aussieht. Auch Anfänger haben Schwierigkeiten, komplexen Code zu verstehen, deshalb habe ich es einfach gemacht. Sagen Sie es also bitte nicht von geringer Qualität, ohne meine Absicht zu verstehen.
Gulsan Borbhuiya
Ich habe keine schlechte Qualität gefunden, die vom System gekennzeichnet ist.
Gulsan Borbhuiya