Hallo dedlfix

Es gibt keine contains-Funktion in Javascript, so dass hier indexOf() herhalten muss, bei dem mich nur interessiert, ob es größer als -1 liefert, was für nicht enthalten steht.

var searchTerm = 'test'; // kommt eigentlich aus dem Eingabefeld

var filteredRecords = records.filter(function (record) { 
    return record.name.indexOf(searchTerm) > -1; 
});

record ist mein Array of Objects. Die Objekte haben eine Eigenschaft name, nebst anderen in denen hier nicht gesucht werden soll.

Ich finde, die Prüfung auf Existenz mittels indexOf wie in deinem Beispiel ist nicht wirklich gut lesbar. Wenn wir diesen Aspekt jedoch ignorieren, dann kann man das unter Verwendung des bitweisen NOT-Operators auch etwas kürzer schreiben:

var filteredRecords = records.filter(function (record) {
  return ~record.name.indexOf(searchTerm);
});

Tatsächlich gibt es aber mittlerweile eine Methode deren eigentlicher Zweck es ist zu prüfen, ob eine Zeichenkette in einer anderen Zeichenkette enthalten ist, nämlich String.prototype.includes:

const filteredRecords = records.filter(record => record.name.includes(searchTerm));

Das ist deutlich besser lesbar, denke ich.

Wenn es das Ziel ist, die Indexposition eines Teilstrings zu ermitteln, dann kann indexOf oder lastIndexOf verwendet werden. Geht es aber darum zu prüfen, ob ein Teilstring in einem anderen String enthalten ist, dann ist includes das Mittel der Wahl.

Die Methode includes wird allerdings noch nicht von allen relevanten Browsern unterstützt, weshalb vorerst ein Polyfill bereitgestellt werden sollte. Ein solches ist jedoch schnell geschrieben und noch schneller kopiert und eingefügt.

String.prototype.includes besitzt darüber hinaus auch Schwestermethoden. Eine gleichnamige Methode ist zum Beispiel auch für Arrays definiert:

const numbers = [1, 2, 3, 4, 5];

console.log(numbers.includes(3), numbers.includes(7)); // true false

Zu der Methode Array.prototype.includes habe ich vor einiger Zeit einen recht umfangreichen Artikel im Wiki geschrieben, der auch ein Polyfill enthält. Der Rückgriff auf indexOf in solchen Fällen ist also auch bei Arrays nicht mehr nötig.

const typedArray = new Uint8Array([1, 2, 3, 4, 5]);

console.log(typedArray.includes(5)); // true

Gleiches gilt für TypedArrays, die ebenfalls eine includes-Methode besitzen.

Gruß,

Orlok

Servus!

Lieber Matthias,

herzlichen Glückwunsch zu Deinem ersten JS-Tutorial!

Na ja, das erste ist es ja grade nicht:

• das viel kritisierte Tutorial Grundlagen der Programmierung sollte ja zeigen, dass man nur mit einem Editor und Browser die ersten Schritte im Programmieren unternehmen kann. (Dauer in 8-9. Kl.: 2 Doppelstunden)

• Grundlagen des DOM zeigt, wie man mit JavaScript auf das DOM zugreift, Elemente erzeugt und Klassen hinzufügt und entfernt.

• Grundlagen der Ereignisverarbeitung zeigt, wie man Event-Handler an- und abhängt. Es fehlt noch ein abschließendes, komplexes Beispiel, das Bubbling und Capturing erläutert.

• Bildwechsler mit der Web Animations API

• Debuggen für Anfänger

Mir ist die inhaltliche Abgrenzung nicht ganz klar. Wenn es um das Arbeiten mit Strings geht, warum kommen dann so Sachen wie element.innerHTML = "xyz" vor?

Ja, aber das war ja grade der Kritikpunkt am ersten (Einstiegs-) Tutorial, dass die Ausgabe nicht in einer Webseite eingebettet ist. Mein Ziel wäre zu zeigen, wie Eingaben von Zeichenketten verarbeitet werden.

Hier in den ersten Beispielen die Zeichenkette als Variable vorzuhalten (var string = 'Hallo Welt!';) halte ich für gerade noch legitim; in weiteren Beispielen sollte es dann schon eine Eingabe in einem Textfeld oder eine erhaltene E-Mail sein.

Strings, ein Element der Sprache JavaScript, haben zunächst überhaupt keinen Zusammenhang mit dem DOM, also mit den Siebensachen, die auf einer Seite im Browser so herum hüpfen. Das Gleiche gilt für Arrays, denn auch sie sind zunächst einmal DOM-unabhängige Sprachelemente von JavaScript.

Ja, aber es sollte ja, wie gesagt, ein praxisnahes Tutorial mit progressiver Komplexität werden und nicht eine Methode nach der anderen mit Ausgabe in console.log(string)) abhandeln.

Etwas völlig anderes ist es, wenn man konkrete Anwendungsfälle "aus dem Alltag eines Webworkers" aufgreifen möchte, um zu zeigen, wie man gewisse Problemstellungen mit String-Operationen lösen kann. Dazu gehört dann z.B. die Verwendung von innerHTML, das ja ein String ist, der sich lesen und schreiben lässt. Und dann sind auch Arrays ganz schnell ein Thema, da sie sich völlig anders verhalten, als diese NodeLists, die man von Funktionen wie getElementsByTagName zurück erhält.

Genau, so was sollt's werden!

Aber das sind vielleicht sehr akademische Fragen, die den Anfänger, für den dieses Tutorial gedacht ist, nicht die Bohne interessieren.

Ja, ich lese grad ein Tutorial, dass einerseits ES6 mitbehandelt (let statt var, backticks statt Anführungszeichen), alle Methoden der Reihenfolge nach abhandelt uund dann in alert() ausgibt. So etwas machen imho unsere Methodenseiten.

Liebe Grüße,

Felix Riesterer.

Herzliche Grüße

Matthias Scharwies