Javascript array.indexOf

Array indexOf

Per Vorgabe beginnt die Suche nach einem Array-Element mit indexOf() beim ersten Element, läuft von links nach rechts und gibt den Wert des Elements an der gewünschten Position zurück oder -1, wenn indexOf das Element findet.

    gesuchtes Element  ----+
                           | 
let pos = myarr.indexOf(search, start);
                                  |
            suchen ab Position ---+

Der zweite Parameter start ist optional und bestimmt die Position im Array, ab der gesucht wird.

const elements = ["Yttrium", "Vanadium", "Radium", "Argon"];
const position = elements.indexOf("Vanadium");
console.log ("position " + position + " " + elements[position]);

position 1 Vanadium

Mit indexOf durchsucht Javascript z.B. einen String anhand eines Arrays von Begriffen (die auch von mehreren Wörtern gebildet sein dürfen). Dabei nutzt die Methode strikte Gleichheit (===) beim Vergleich der Suchbegriffe mit den Array-Elementen. vanadium wäre also nicht gefunden worden.

Dieses Beispiel sucht nach typischen Spammer-Begriffen bei der Eingabe in die textarea eines Kontaktformulars.

let bad = ["minocycline","Orders shipped by","Life Insurance"];
let text = document.querySelector("#textfield").value;

function searchInArray (str, badwords) {
  let words = "";
  let numwords = 0; 
  let i;
  for (i=0; i<badwords.length; i++) {
    if (str.indexOf(badwords[i]) >= 0) {
      numwords++;
      words +=  badwords[i] + ", ";
    }
  }
  return [numwords, words];
}

let foundspam = searchInArray (text, bad);

indexOf für Arrays gehört zur ECMAScript 5-Spezifikation und wurde von IE8 noch nicht unterstützt. Heute: Alle modernen Browser, ab IE9.

In jQuery gibt es äquivalent jQuery.inArray( value, array [, fromIndex ] )

array lastIndexOf

Durchsucht das Array von einem Startindex an rückwärts (nach vorn). Gibt die erste Fundstelle oder -1 (nicht gefunden) zurück.

array.lastIndexOf(elem [, from ]);

Die Suche beginnt beim optionalen Index from oder beim letzten Element.

const nums = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 47 ];
console.log ("nums.lastIndexOf(29) " + nums.lastIndexOf(29));
console.log ("nums.lastIndexOf(41,4) " + nums.lastIndexOf(41,4));
console.log ("nums.lastIndexOf(8) " + nums.lastIndexOf(8));

[Log] nums.lastIndexOf(29) 9 
[Log] nums.lastIndexOf(41,4) -1
[Log] nums.lastIndexOf(8) -1

Array includes ()

array.includes () stellt fest, ob das Array ein bestimmtes Element enthält. Wenn ja, gibt includes() true zurück und false sonst.

Alle modernen Browser, Microsoft ab Edge.

Array findIndex

findIndex gibt den Index des ersten Elements zurück, das einem Test entspricht. findIndex ist mit ES6 eingezogen und wird von IE11 nicht unterstützt.

const size = [400, 16, 234, 888, 2001, 20, 777];

const pos = size.findIndex(checkSize);

function checkSize ( width ) {
	return width > 600;
}

console.log ("pos " + pos)

indexOf bei Objekten in Arrays (JSON)

Die Methode indexOf arbeitet mit strikter Gleichheit (===) bei der Feststellung, ob das Element vorhanden ist. Das ist kein Problem, solange es sind um einfache Datentypen wie Strings und Zahlen handelt. Wenn indexOf allerdings nach einem Objekt in einem Array sucht, wird es komplizierter.

let vhskurse = [
    { name: "Nähkurs Einsteiger", city: "Moers", start: "17.6.2022" },
    { name: "WordPress Fortgeschrittene", city: "Vluyn", start: "18.9.2022" },
    { name: "Tai Chi", city: "Moers", start: "18.4.2022" },
    { name: "Turnen", city: "Niep", start: "12.7.2022" }
];

let searchfor = vhskurse.indexOf({ name: "Tai Chi", city: "Moers", start: "18.4.2022" });
console.log (searchfor); // -1

Die beiden Objekte haben zwar dieselben Eigenschaften und Werte, aber solange sie nicht exakt dieselben Objekte sind, sind sie nicht gleich.

Um mit indexOf einen Match auf ein Objekt oder ein Array zu erzielen, braucht indexOf eine Referenz auf die Instanz des originalen Objekts.

const nähkurs = { name: "Nähkurs Einsteiger", city: "Moers", start: "17.6.2022" };
const wp = { name: "WordPress Fortgeschrittene", city: "Vluyn", start: "18.9.2022" };
const tai = { name: "Tai Chi", city: "Moers", start: "18.4.2022" };
const turnen = { name: "Turnen", city: "Niep", start: "12.7.2022" };

let allekurse = [nähkurs, wp, tai, turnen];
let search = allekurse.indexOf(turnen);

console.log ("turnen " + search)