jQuery / Methode / jQuery.inArray() - Einen Arrayindex richtig ermitteln

jQuery.inArray(value, array, fromIndex) liefert den ersten passenden Arrayindex oder -1, wenn kein Treffer vorliegt. Prüfen Sie die Existenz mit index !== -1. 0 bedeutet einen Treffer am Anfang; der Rückgabewert allein als if-Bedingung kann daher falsch entscheiden.

Der Rückgabewert ist eine Position

Die jQuery.inArray()-API erwartet Wert, Array und optionalen Startindex in dieser Reihenfolge. Als globale jQuery-Hilfsfunktion wird sie mit $.inArray(...) oder jQuery.inArray(...) aufgerufen, nicht als $(selector).inArray(...) an einer DOM-Auswahl.

if (index) und index > 0 übersehen den ersten Eintrag. JavaScript wertet -1 als wahr, daher hilft bloßes Negieren ebenfalls nicht. Vergleichen Sie ausdrücklich mit -1 oder prüfen Sie auf mindestens 0.

Vollständiges Beispiel mit Typ und Startposition

Speichern Sie alles in UTF-8 als inarray-demo.html und öffnen Sie es im Browser. Zum Laden der offiziellen jQuery-Datei 4.0.0 vom Content Delivery Network (CDN) benötigen Sie Internet, aber keine Paketinstallation. Zahl/Zeichenkette, positive/negative Starts, leere Arrays und der Vergleich unten wurden mit 3.7.1 und 4.0.0 ausgeführt.

Das Array ist [0, "0", "alpha", 0]. Value stammt aus festen Auswahlwerten ohne Auswertung von Zeichenkettenausdrücken. Nur From index wird mit Number() zur Startposition.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Search an array with inArray</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, select { font: inherit; margin: 4px; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Find an index rather than a boolean</h1>
  <p>Array: [0, "0", "alpha", 0]</p>
  <label for="value">Value:</label>
  <select id="value"><option value="number">0 (number)</option><option value="string">0 (string)</option><option value="alpha">alpha</option><option value="missing">missing</option></select>
  <label for="from">From index:</label>
  <select id="from"><option>0</option><option>1</option><option>3</option><option>9</option><option>-1</option></select>
  <button type="button" id="search">Search</button>
  <button type="button" id="reset">Reset</button>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      const array = [0, "0", "alpha", 0];
      const choices = { number: 0, string: "0", alpha: "alpha", missing: "missing" };
      function search() {
        const value = choices[$("#value").val()];
        const fromIndex = Number($("#from").val());
        const index = $.inArray(value, array, fromIndex);
        const found = index !== -1;
        $("#result").text(`value=${JSON.stringify(value)} (${typeof value})\nindex=${index}\nfound=${found}\nBoolean(index)=${Boolean(index)}`);
      }
      $("#value, #from").on("change", search);
      $("#search").on("click", search);
      $("#reset").on("click", function () {
        $("#value").val("number");
        $("#from").val("0");
        search();
      });
      search();
    });
  </script>
</body>
</html>

Anfangs wird die Zahl 0 ganz vorne gefunden:

value=0 (number)
index=0
found=true
Boolean(index)=false

1. 0 (string) ergibt Index 1: Zahl 0 und Zeichenkette "0" unterscheiden sich.
2. Mit 0 (number) und From index 1 ist das Ergebnis 3. Die frühere Zahl 0 wird übersprungen.
3. 3 ergibt ebenfalls 3, weil die Startposition enthalten ist.
4. 9 überschreitet die Länge: Index -1 und found false, aber Boolean(index) bleibt true.
5. -1 startet am letzten Platz, Index 3, und findet die Zahl 0.
6. Bei Start 0 ergeben alpha und missing 2 beziehungsweise -1. Reset stellt Zahl 0 und Start 0 wieder her; Search wiederholt die aktuellen Bedingungen.

Strenger Vergleich und fromIndex-Grenzen

Der Vergleich ist streng wie ===. "0" wird nicht automatisch zur Zahl 0; Teilzeichenketten passen nicht. Legen Sie für Eingabewerte den gewünschten Typ sowie zulässige Umwandlungen und Fehlerbehandlung fest.

Ohne Start gilt 0. Negative Werte berechnen die Startposition vom Ende, gesucht wird weiterhin vorwärts. Weit vor dem Array beginnt die Suche bei 0, ab der Länge liefert sie -1. Das Ergebnis bleibt der absolute Arrayindex, keine relative Nummer ab Start. Bei Duplikaten zählt der erste Treffer ab dieser Position.

Objekte werden anhand ihrer Referenz verglichen, nicht anhand gleich aussehender Eigenschaften. Führen Sie diesen vollständigen Teilcode in der Entwicklerkonsole aus, um gleiche und neue Objekte, NaN und native Alternativen zu vergleichen.

const item = { id: 1 };
console.log(`same object=${$.inArray(item, [item])}`);
console.log(`new object=${$.inArray({ id: 1 }, [item])}`);
console.log(`NaN index=${$.inArray(NaN, [NaN])} | includes=${[NaN].includes(NaN)}`);
console.log(`empty=${$.inArray("a", [])}`);
const array = ["a", "b", "a"];
console.log(`start 1=${$.inArray("a", array, 1)} | start -1=${$.inArray("a", array, -1)}`);
console.log(`native index=${array.indexOf("a", 1)} | native found=${array.includes("a", 1)}`);

same object=0
new object=-1
NaN index=-1 | includes=true
empty=-1
start 1=2 | start -1=2
native index=2 | native found=true

indexOf, includes und Folgeaktionen wählen

Für Positionen in normalen Arrays steht natives array.indexOf(value, fromIndex) bereit. Für eine einzelne Arraysuche muss ein Projekt ohne jQuery es nicht hinzufügen. Der Aufruf lautet array.indexOf(value) statt $.inArray(value, array).

Für reine Existenz liefert array.includes(value, fromIndex) direkt true oder false. Die Vergleichsregeln sind nicht vollständig gleich: NaN liefert mit $.inArray() und indexOf() -1, mit includes() dagegen true. Objektreferenzen sowie Zahl/Zeichenkette bleiben zu beachten.

Prüfen Sie vor dem Entfernen eines Eintrags auf -1. Ein nicht gefundenes Ergebnis direkt an splice() kann den letzten Eintrag entfernen. Kontrollieren Sie bei Abweichungen Typen, Argumentreihenfolge, Start, Referenz und Änderungen des ursprünglichen Arrays.