Spickzettel für JavaScript-Array-Methoden (jede live ausführen) | We.Inc
Gib deine eigene Liste ein und sieh zu, wie map, filter, reduce, find, sort, splice und 30 weitere Array-Methoden darauf laufen, mit deutlicher Markierung bei jeder Methode, die das ursprüngliche Array verändert.
Array-Methoden fallen in zwei Lager. Manche verändern das Array, auf dem du sie aufrufst, etwa push, pop, splice, sort und reverse. Andere geben ein neues Array oder einen Wert zurück und lassen das Original unangetastet, etwa map, filter, slice, toSorted und reduce. Bearbeite die Liste unten, und jede Methode läuft erneut mit deinen Werten.
Alltägliche Array-Aufgaben und die passende Methode
Aufgabe
Methode
Ändert das Original?
Jedes Element umwandeln
arr.map(fn)
Nein
Elemente behalten, die einen Test bestehen
arr.filter(fn)
Nein
Zu einem Wert zusammenfassen
arr.reduce(fn, start)
Nein
Erstes passendes Element
arr.find(fn)
Nein
Am Ende hinzufügen
arr.push(x)
Ja
Sortierte Kopie
arr.toSorted(fn)
Nein
Elemente zählen
Lesen nein, Setzen ja
Die meisten Spickzettel listen Methodennamen mit einem vorgefertigten Beispiel auf. Hier laufen die Beispiele auf einer Liste, die du selbst bestimmst, sodass du siehst, was bei Duplikaten, einer leeren Liste oder einem einzelnen Element passiert. Jede Zeile ist markiert, damit du auf einen Blick erkennst, ob eine Methode deine Daten überschreibt, was die Ursache vieler State-Bugs in React und ähnlichen Bibliotheken ist.
Gib eine kommagetrennte Liste in das Feld ein. Leerzeichen um die einzelnen Elemente werden entfernt.
Jede Zeile wird neu berechnet. Methoden, die das Array verändern, laufen jedes Mal auf einer frischen Kopie, und die Zeile zeigt sowohl den Rückgabewert als auch das Array danach.
Filtere nach Namen oder wähle eine Gruppe wie Suchen oder Umwandeln, um die Übersicht einzugrenzen.
Scrolle nach unten für Beispiele zum Verketten, die length-Eigenschaft und die Tabelle zum Austausch von mutierenden gegen kopierende Methoden.
Bevorzuge im React-State toSorted, toReversed, toSpliced und with gegenüber ihren Gegenstücken, die direkt im Array arbeiten, denn wenn du das alte Array veränderst, bemerkt React das Update womöglich nicht.
Gib reduce einen Startwert. Ohne Startwert wirft ein leeres Array einen TypeError.
forEach gibt immer undefined zurück und lässt sich nicht mit break abbrechen. Verwende for...of, some oder find, wenn du vorzeitig aufhören musst.
map, filter und slice kopieren nur eine Ebene tief. Objekte im neuen Array sind dieselben Objekte wie vorher.
Häufige Fragen
Wie bekomme ich in JavaScript die Länge eines Arrays?
Lies arr.length. Es ist eine Eigenschaft, keine Methode, also ohne Klammern. Sie ist um eins größer als der höchste Index, was bei normalen Arrays der Anzahl der Elemente entspricht. arr.length = 0 leert das Array, und eine kleinere Zahl schneidet Elemente am Ende ab.
Was ist der Unterschied zwischen map und forEach?
map baut ein neues Array aus dem, was deine Funktion für jedes Element zurückgibt, sodass du es zuweisen oder weitere Methoden anhängen kannst. forEach ruft nur deine Funktion auf und gibt undefined zurück. Verwende map, wenn du ein Ergebnis willst, und forEach nur für Seiteneffekte wie Logging.
Welche Array-Methoden verändern das ursprüngliche Array?
push, pop, shift, unshift, splice, sort, reverse, fill und copyWithin verändern das Array direkt. Das direkte Setzen von length oder eines Index tut das ebenfalls. Alles andere auf diesem Spickzettel lässt es unangetastet.
Wie entferne ich ein Element aus einem Array, ohne es zu verändern?
Verwende filter, um nach Wert zu entfernen, zum Beispiel arr.filter((x) => x !== 'kiwi'), oder toSpliced(index, 1), um nach Position zu entfernen. Beide geben ein neues Array zurück und lassen das Original, wie es war.
Warum gibt map undefined-Werte zurück?
Dein Callback hat nichts zurückgegeben. Eine Arrow Function mit geschweiften Klammern braucht ein explizites return; schreibe (x) => x * 2 oder (x) => { return x * 2; }. Ein fehlendes return ergibt undefined an dieser Stelle.
Eine Kette von links nach rechts lesen
Weil kopierende Methoden Arrays zurückgeben, kannst du direkt auf dem Ergebnis eine weitere Methode aufrufen. Eine Kette wie orders.filter(isPaid).map(toTotal).reduce(add, 0) liest sich wie ein Satz: bezahlte Bestellungen behalten, jede in eine Zahl umwandeln, alles addieren.
Lange Ketten sind gut lesbar, durchlaufen die Liste aber einmal pro Schritt. Bei ein paar tausend Elementen spielt das keine Rolle; bei sehr großen Datenmengen ist eine einzige for...of-Schleife, die alle drei Aufgaben erledigt, schneller.
Suchmethoden geben Unterschiedliches zurück
includes antwortet mit ja oder nein. indexOf und findIndex liefern eine Position, wobei -1 für nicht gefunden steht. find und findLast liefern das Element selbst oder undefined. some und every beantworten eine Ja-oder-nein-Frage zu einer Testfunktion.
includes und indexOf vergleichen mit strikter Gleichheit, daher finden sie ein Objekt nicht anhand seines Inhalts. Verwende dafür find oder some mit einer Testfunktion.
Mutierende Methoden und ihre kopierenden Gegenstücke
Wenn du das Original nicht anfassen darfst, zum Beispiel beim React-State oder einem Funktionsargument, tausche die linke Spalte gegen die rechte.
Direkt im Array oder als Kopie
Verändert das Array
Gibt stattdessen ein neues Array zurück
arr.sort(fn)
arr.toSorted(fn)
arr.reverse()
arr.toReversed()
arr.splice(i, n, ...items)
arr.toSpliced(i, n, ...items)
arr[i] = value
arr.with(i, value)
arr.push(a, b)
[...arr, a, b] oder arr.concat([a, b])
arr.unshift(a)
[a, ...arr]
arr.pop()
arr.slice(0, -1)
arr.shift()
arr.slice(1)
map, filter und reduce verketten
Summe bezahlter Bestellungen in einer Kette
Jeder Schritt gibt ein frisches Array zurück, auf dem die nächste Methode läuft. Die ursprüngliche Bestellliste wird nie verändert.
length lesen und setzen
length ist eine einfache Eigenschaft. Wenn du sie verkleinerst, werden Elemente am Ende entfernt, deshalb zählt das als Änderung am Array.
React-State aktualisieren, ohne zu mutieren
Kopierende Methoden geben React ein neues Array, daher rendert die Komponente neu. Ein Aufruf von sort oder push auf dem State-Array würde das nicht bewirken.
Wie viele Elemente
Erstes Element
Letztes Element, vom Ende gezählt
true, wenn der Wert vorhanden ist
Erste Position des Werts oder -1
Letzte Position des Werts oder -1
Erstes Element, das den Test besteht
Position des ersten passenden Elements
Letztes Element, das den Test besteht
true, wenn irgendein Element besteht
true, wenn alle Elemente bestehen
Neues Array aus den Ergebnissen des Callbacks
Neues Array mit den passenden Elementen
Fasst die Liste zu einem Wert zusammen
map, dann eine Ebene abflachen
Kopie der Positionen 1 und 2
Neues Array mit zusätzlichen Elementen am Ende
Ein String mit Trennzeichen
Sortierte Kopie (Textreihenfolge)
Umgekehrte Kopie
Kopie ohne Position 1
Kopie mit ersetzter Position 0
Sortiert direkt und gibt dasselbe Array zurück
Kehrt direkt um
Fügt am Ende hinzu, gibt die neue Länge zurück
Entfernt das letzte Element und gibt es zurück
Fügt am Anfang hinzu, gibt die neue Länge zurück
Entfernt das erste Element und gibt es zurück
Entfernt ab Position 1, gibt die entfernten Elemente zurück
Überschreibt von Position 1 bis zum Ende
Kopiert einen Teil des Arrays über einen anderen Teil
Iterator der Positionen (hier zur Anzeige gespreadet)
Iterator von [Position, Element]-Paaren
Alle
Lesen
Suchen
Umwandeln
Reihenfolge
Hinzufügen und entfernen
Iterieren
Live-Übersicht der Array-Methoden
Gib eine kommagetrennte Liste ein, und jede Methode unten läuft während der Eingabe darauf.