Heute, im fünften Teil der JavaScript-Kursübersetzung, werden wir über Arrays und Loops sprechen. Arrays werden verwendet, um viele Probleme zu lösen. Arbeiten Sie häufig mit Arrays mithilfe von Schleifen.
→
Teil 1: Erstes Programm, Sprachfunktionen, Standards→
Teil 2: Codestil und Programmstruktur→
Teil 3: Variablen, Datentypen, Ausdrücke, Objekte→
Teil 4: Funktionen→
Teil 5: Arrays und Loops→
Teil 6: Ausnahmen, Semikolons, Platzhalterliterale→
Teil 7: Strict Mode, dieses Schlüsselwort, Ereignisse, Module, mathematische Berechnungen→
Teil 8: Übersicht über die ES6-Funktionen→
Teil 9: Übersicht über die ES7-, ES8- und ES9-Standards
Arrays
Arrays, Objekte vom Typ
Array , entwickeln sich zusammen mit anderen Mechanismen der Sprache. Sie sind Listen mit nummerierten Werten.
Das erste Element des Arrays hat einen Index (Schlüssel) von 0, dieser Ansatz wird in vielen Programmiersprachen verwendet.
In diesem Abschnitt werden moderne Methoden zum Arbeiten mit Arrays betrachtet.
▍Initialisieren von Arrays
Hier sind einige Möglichkeiten, Arrays zu initialisieren.
const a = [] const a = [1, 2, 3] const a = Array.of(1, 2, 3) const a = Array(6).fill(1)
Verwenden Sie ein Konstrukt aus eckigen Klammern, die den Index des Array-Elements enthalten, um auf ein einzelnes Element des Arrays zuzugreifen. Array-Elemente können entweder gelesen oder geschrieben werden.
const a = [1, 2, 3] console.log(a)
Der
Array Konstruktor zum Deklarieren von Arrays wird nicht empfohlen.
const a = new Array()
Diese Methode sollte nur verwendet werden, wenn
typisierte Arrays deklariert werden.
▍Ermitteln der Länge des Arrays
Um die Länge eines Arrays herauszufinden, müssen Sie auf seine Eigenschaft
length verweisen.
const l = a.length
▍Überprüfen eines Arrays mit der Methode every ()
Mit der Array-Methode
every() kann die Überprüfung aller ihrer Elemente unter bestimmten Bedingungen organisiert werden. Wenn alle Elemente des Arrays die Bedingung erfüllen, gibt die Funktion
true , andernfalls
false .
Dieser Methode wird eine Funktion übergeben, die die Argumente
currentValue (aktuelles Array-Element),
index (Index des aktuellen Array-Elements) und
array (das Array selbst) verwendet. Es kann auch einen optionalen Wert annehmen, der bei der Ausführung der an ihn übergebenen Funktion verwendet wird.
Überprüfen Sie beispielsweise, ob die Werte aller Elemente des Arrays größer als 10 sind.
const a = [11, 12, 13] const b = [5, 6, 25] const test = el => el > 10 console.log(a.every(test))
Hier interessiert uns in der Funktion
test() nur das erste Argument, das an sie übergeben wird. Daher deklarieren wir es und geben nur den Parameter
el , in den der entsprechende Wert fällt.
▍Überprüfen eines Arrays mit der some () -Methode
Diese Methode ist der Methode
every() sehr ähnlich, gibt jedoch
true zurück
true wenn mindestens eines der Elemente des Arrays die Bedingung erfüllt, die von der an sie übergebenen Funktion angegeben wird.
▍Erstellen Sie ein Array basierend auf einem vorhandenen Array mit der map () -Methode
Mit der
map() -Methode von Arrays können Sie über Arrays iterieren und auf jedes an diese Methode übergebene Element eine Funktion anwenden, die das Element konvertiert und aus den empfangenen Werten neue Arrays erstellt. Hier erfahren Sie beispielsweise, wie Sie ein neues Array erhalten. Dies ist das Ergebnis der Multiplikation aller Elemente des ursprünglichen Arrays mit 2.
const a = [1, 2, 3] const double = el => el * 2 const doubleA = a.map(double) console.log(a)
▍ Filtern eines Arrays mit der filter () -Methode
Die
filter() -Methode ähnelt der
map() -Methode, ermöglicht jedoch das Erstellen neuer Arrays, die nur die Elemente der ursprünglichen Arrays enthalten, die die durch die an die Funktion übergebene
filter() -Methode angegebene Bedingung erfüllen.
▍ redu () -Methode
Mit der Methode
reduce() können Sie eine bestimmte Funktion auf den Akkumulator und auf jeden Wert des Arrays anwenden und das Array auf einen einzelnen Wert reduzieren (dieser Wert kann entweder ein Grundelement oder einen Objekttyp haben). Diese Methode übernimmt eine Konvertierungsfunktion und einen optionalen anfänglichen Batteriewert. Betrachten Sie ein Beispiel.
const a = [1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => { return accumulator * currentValue }, 1) console.log(a)
Hier suchen wir nach dem Produkt aller Elemente des Arrays, das mit einem Literal beschrieben wurde, wobei der Anfangswert von Akkumulator 1 festgelegt wird.
▍ Auflisten eines Arrays mit der Methode forEach ()
Die
forEach() -Methode von Arrays kann verwendet werden, um die Werte von Arrays zu durchlaufen und bestimmte Aktionen auszuführen, die durch die an die Methode übergebene Funktion angegeben werden. Beispielsweise zeigen wir nacheinander die Elemente des Arrays in der Konsole an.
const a = [1, 2, 3] a.forEach(el => console.log(el))
Wenn Sie die Schleife stoppen oder unterbrechen müssen, wenn Sie über ein Array iterieren, müssen Sie bei Verwendung von
forEach() eine Ausnahme auslösen. Wenn es daher im Verlauf der Lösung eines bestimmten Problems erforderlich sein kann, den Zyklus zu unterbrechen, ist es am besten, einen anderen Weg zu wählen, um über die Array-Elemente zu iterieren.
▍Auswählen eines Arrays mit dem Operator for ... of
Der
for...of Operator ist im ES6-Standard enthalten. Sie können damit über iterierbare Objekte (einschließlich Arrays) iterieren. Hier erfahren Sie, wie Sie es verwenden.
const a = [1, 2, 3] for (let v of a) { console.log(v) }
Bei jeder Iteration der Schleife gelangt das nächste Element des Arrays
a in die Variable
v .
▍ Auflisten eines Arrays mit der for-Anweisung
Mit der
for Anweisung können Sie Schleifen organisieren, die insbesondere zum Durchlaufen (oder Initialisieren) von Arrays verwendet werden können, indem auf deren Elemente über den Index zugegriffen wird. Typischerweise wird der Index des nächsten Elements unter Verwendung eines Schleifenzählers erhalten.
const a = [1, 2, 3] for (let i = 0; i < a.length; i += 1) { console.log(a[i]) }
Wenn Sie während der Ausführung der Schleife deren Iteration überspringen müssen, können Sie den Befehl
continue . Um den Zyklus vorzeitig zu beenden, können Sie den Befehl
break . Wenn Sie den Befehl
return in einer Schleife verwenden, die sich in einer bestimmten Funktion befindet, werden die Schleife und die Funktion beendet, und der mit
return Wert wird an die Stelle verschoben, an der die Funktion aufgerufen wurde.
▍ Methode @@ Iterator
Diese Methode ist im ES6-Standard enthalten. Damit können Sie den sogenannten "Iterator eines Objekts" abrufen - ein Objekt, mit dem Sie in diesem Fall eine Iteration von Array-Elementen organisieren können. Ein Array-Iterator kann unter Verwendung des Symbols erhalten werden (solche Symbole werden als "bekannte Symbole" bezeichnet).
Symbol.iterator . Nach dem Empfang des Iterators können Sie auf die
next() -Methode zugreifen, die bei jedem Aufruf eine Datenstruktur zurückgibt, die das nächste Element des Arrays enthält.
const a = [1, 2, 3] let it = a[Symbol.iterator]() console.log(it.next().value)
Wenn Sie die
next() -Methode aufrufen, nachdem das letzte Element des Arrays erreicht wurde, wird als Wert des Elements
undefined . Das von der
next() -Methode zurückgegebene Objekt enthält den
value und die
done Eigenschaften. Die Eigenschaft
done als
false ausgewertet, bis das letzte Element des Arrays erreicht ist. In unserem Fall gibt es beim vierten Aufruf von
it.next() das Objekt
{ value: undefined, done: true } , während dieses Objekt in den vorherigen drei Aufrufen wie
{ value: , done: false } aussehen würde.
Die Array-Methode entry
entries() gibt einen Iterator zurück, mit dem Sie die Schlüssel-Wert-Paare des Arrays durchlaufen können.
const a = [1, 2, 3] let it = a.entries() console.log(it.next().value)
Mit der Methode
keys() können Sie die Schlüssel eines Arrays durchlaufen.
const a = [1, 2, 3] let it = a.keys() console.log(it.next().value)
▍ Hinzufügen von Elementen zum Ende eines Arrays
Verwenden Sie die
push() -Methode, um Elemente am Ende des Arrays hinzuzufügen.
a.push(4)
▍ Hinzufügen von Elementen zum Anfang des Arrays
Verwenden Sie die Methode
unshift() um Elemente am Anfang des Arrays
unshift() .
a.unshift(0) a.unshift(-2, -1)
▍Entfernen von Array-Elementen
Sie können ein Element vom Ende des Arrays entfernen, während Sie dieses Element mit der
pop() -Methode zurückgeben.
a.pop()
In ähnlicher Weise können Sie mit der Methode
shift() ein Element vom Anfang des Arrays entfernen.
a.shift()
Das Gleiche, aber bereits die Position der Entfernung von Elementen und ihre Anzahl anzeigend, erfolgt mit der Methode
splice() .
a.splice(0, 2)
▍Entfernen von Array-Elementen und Einfügen anderer Elemente
Um einige Operationen zu verwenden, um einige Elemente des Arrays zu entfernen und stattdessen andere Elemente einzufügen, wird die bekannte
splice() -Methode verwendet.
Zum Beispiel löschen wir hier 3 Elemente des Arrays ab Index 2, wonach wir zwei weitere Elemente an derselben Stelle hinzufügen:
const a = [1, 2, 3, 4, 5, 6] a.splice(2, 3, 'a', 'b') console.log(a)
▍Kombinieren Sie mehrere Arrays
Um mehrere Arrays zu kombinieren, können Sie die
concat() -Methode verwenden, die ein neues Array zurückgibt.
const a = [1, 2] const b = [3, 4] const c = a.concat(b) console.log(c)
▍Finden Sie Elemente in einem Array
Im ES5-Standard wurde die Methode
indexOf() , die den Index des ersten Auftretens des gewünschten Array-Elements zurückgibt. Wenn das Element nicht im Array gefunden werden kann, wird
-1 zurückgegeben.
const a = [1, 2, 3, 4, 5, 6, 7, 5, 8] console.log(a.indexOf(5))
Die
lastIndexOf() -Methode gibt den Index des letzten Vorkommens des Elements im Array zurück oder
-1 wenn das Element nicht gefunden wird.
const a = [1, 2, 3, 4, 5, 6, 7, 5, 8] console.log(a.lastIndexOf(5))
In ES6 ist die Methode
find() von Arrays erschienen, die eine Arraysuche mit der an sie übergebenen Funktion durchführt. Wenn die Funktion
true zurückgibt, gibt die Methode den Wert des ersten gefundenen Elements zurück. Wenn das Element nicht gefunden werden kann, gibt die Funktion
undefined .
Seine Verwendung kann wie folgt aussehen.
a.find(x => x.id === my_id)
Hier wird in einem Array mit Objekten nach einem Element gesucht, dessen
id Eigenschaft der angegebenen entspricht.
Die
findIndex() -Methode ähnelt
find() , gibt jedoch den Index des gefundenen oder
undefined Elements zurück.
In ES7 wurde die Methode include
includes() angezeigt, mit der Sie überprüfen können, ob ein bestimmtes Element im Array vorhanden ist. Es gibt
true oder
false und findet oder findet kein Element, das für den Programmierer von Interesse ist.
a.includes(value)
Mit dieser Methode kann überprüft werden, ob ein Element vorhanden ist, nicht das gesamte Array, sondern nur ein Teil davon, beginnend mit dem Index, der beim Aufruf dieser Methode angegeben wurde. Der Index wird mit dem zweiten optionalen Parameter dieser Methode angegeben.
a.includes(value, i)
▍Ein Fragment eines Arrays abrufen
Um eine Kopie eines Fragments des Arrays als neues Array zu erhalten, können Sie die Methode
slice() verwenden. Wenn diese Methode ohne Argumente aufgerufen wird, ist das zurückgegebene Array eine vollständige Kopie des Originals. Es werden zwei optionale Parameter benötigt. Der erste setzt den Startindex des Fragments, der zweite das Ende. Wenn der Endindex nicht angegeben ist, wird das Array vom angegebenen Startindex zum Ende kopiert.
const a = [1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(a.slice(4))
Array Array sortieren
Um die Sortierung von Array-Elementen in alphabetischer Reihenfolge (
0-9A-Za-z ) zu organisieren, wird die Methode
sort() verwendet, ohne dass Argumente an sie übergeben werden.
const a = [1, 2, 3, 10, 11] a.sort() console.log(a)
Sie können dieser Methode eine Funktion übergeben, die die Sortierreihenfolge festlegt. Die Funktion akzeptiert zum Vergleich zweier Elemente die Parameter
a und
b . Es gibt eine negative Zahl zurück, wenn
b nach einem Kriterium kleiner als
b ist, 0, wenn sie gleich sind, und eine positive Zahl, wenn
a größer als
b . Wenn Sie eine ähnliche Funktion zum Sortieren numerischer Arrays schreiben, kann das Ergebnis der Subtraktion von
a und
b . Wenn Sie also das Ergebnis der Auswertung des Ausdrucks
a - b , wird das Array in aufsteigender Reihenfolge sortiert. Wenn Sie das Ergebnis der Auswertung des Ausdrucks
b - a wird das Array in absteigender Reihenfolge sortiert.
const a = [1, 10, 3, 2, 11] console.log(a.sort((a, b) => a - b))
Um die Reihenfolge der Array-Elemente
reverse() , können Sie die
reverse() -Methode verwenden. Es ändert wie
sort() das Array, für das es aufgerufen wird.
▍Erhalten einer Zeichenfolgendarstellung eines Arrays
Um eine Zeichenfolgendarstellung eines Arrays zu erhalten, können Sie die
toString() -Methode verwenden.
a.toString()
Ein ähnliches Ergebnis liefert die Methode
join() , die ohne Argumente aufgerufen wird.
a.join()
Als Argument können Sie die Trennelemente übergeben.
const a = [1, 10, 3, 2, 11] console.log(a.toString())
▍Erstellen von Kopien von Arrays
Um eine Kopie des Arrays zu erstellen, indem Sie die Werte des ursprünglichen Arrays in das neue Array kopieren, können Sie die Methode
Array.from() verwenden. Es eignet sich auch zum Erstellen von Arrays aus Array-ähnlichen Objekten (z. B. aus Zeichenfolgen).
const a = 'a string' const b = Array.from(a) console.log(b)
Die
Array.of() -Methode kann auch zum Kopieren von Arrays sowie zum „Zusammenstellen“ von Arrays aus verschiedenen Elementen verwendet werden. Um beispielsweise die Elemente eines Arrays in ein anderes zu kopieren, können Sie die folgende Konstruktion verwenden.
const a = [1, 10, 3, 2, 11] const b = Array.of(...a) console.log(b)
Die
copyWithin() -Methode wird verwendet, um die Elemente des Arrays an eine bestimmte Stelle dieses Arrays selbst zu kopieren. Das erste Argument gibt den Anfangsindex der Zielposition an, das zweite den Anfangsindex der Position der Elementquelle und der dritte optionale Parameter den Endindex der Position der Elementquelle. Wenn Sie es nicht angeben, wird alles an den angegebenen Speicherort des Arrays kopiert, beginnend mit dem Anfangsindex der Quellposition bis zum Ende des Arrays.
const a = [1, 2, 3, 4, 5] a.copyWithin(0, 2) console.log(a)
Zyklen
Wenn wir oben über Arrays sprechen, haben wir bereits einige Möglichkeiten zum Organisieren von Schleifen gefunden. Schleifen in JavaScript werden jedoch nicht nur für die Arbeit mit Arrays verwendet, und wir haben weit davon entfernt, alle ihre Typen zu verwenden. Daher werden wir jetzt einige Zeit darauf verwenden, verschiedene Möglichkeiten zum Organisieren von Schleifen in JavaScript zu diskutieren und über deren Funktionen zu sprechen.
▍ für Schleife
Betrachten Sie ein Beispiel für die Anwendung dieses Zyklus.
const list = ['a', 'b', 'c'] for (let i = 0; i < list.length; i++) { console.log(list[i])
Wie bereits erwähnt, können Sie die Ausführung einer solchen Schleife mit dem Befehl
break unterbrechen, die aktuelle Iteration überspringen und mit dem Befehl
continue direkt zur nächsten wechseln.
▍ für jeden Zyklus
Wir haben auch diesen Zyklus besprochen. Hier ist ein Beispiel für die Iteration über ein Array, das es verwendet.
const list = ['a', 'b', 'c'] list.forEach((item, index) => { console.log(item)
Denken Sie daran, dass zum Unterbrechen eines solchen Zyklus eine Ausnahme ausgelöst werden muss. Wenn Sie diese bei Verwendung eines Zyklus unterbrechen müssen, ist es besser, einen anderen Zyklus zu wählen.
▍ Do ... while-Schleife
Dies ist der sogenannte "Nachbedingungszyklus". Eine solche Schleife wird mindestens einmal ausgeführt, bevor die Bedingung zum Beenden der Schleife überprüft wird.
const list = ['a', 'b', 'c'] let i = 0 do { console.log(list[i])
Es kann mit dem Befehl
break unterbrochen werden. Mit dem Befehl
continue können Sie mit der nächsten Iteration
continue .
▍ while-Schleife
Dies ist der sogenannte „vorkonditionierte Zyklus“. Wenn am Eingang des Zyklus die Bedingung für die Fortsetzung des Zyklus falsch ist, wird sie nicht einmal ausgeführt.
const list = ['a', 'b', 'c'] let i = 0 while (i < list.length) { console.log(list[i])
▍ für ... in Schleife
Mit dieser Schleife können Sie alle aufgezählten Eigenschaften eines Objekts anhand ihrer Namen durchlaufen.
let object = {a: 1, b: 2, c: 'three'} for (let property in object) { console.log(property)
▍ Zyklus für ... von
Der
for...of Zyklus kombiniert den Komfort des
forEach Zyklus und die Fähigkeit, seinen Betrieb mit normalen Werkzeugen zu unterbrechen.
Beachten Sie, dass hier im Loop-Header das Schlüsselwort
const verwendet wird und nicht, wie zu erwarten,
let . Wenn die Variablen innerhalb des Schleifenblocks nicht neu zugewiesen werden müssen, ist
const für uns durchaus geeignet.
Wenn wir die
for...in und
for...of Schleifen vergleichen, stellt sich heraus, dass
for...in über die Namen der Eigenschaften und
for...of - Werte der Eigenschaften iteriert.
Schleifen und Bereiche
Bei Schleifen und variablen Bereichen gibt es eine JavaScript-Funktion, die dem Entwickler einige Probleme bereiten kann. Um diese Probleme zu lösen, sprechen
let über Schleifen, Bereiche und die Schlüsselwörter
var und
let .
Betrachten Sie ein Beispiel.
const operations = [] for (var i = 0; i < 5; i++) { operations.push(() => { console.log(i) }) } for (const operation of operations) { operation() }
Die Schleife führt 5 Iterationen durch, bei denen jeweils eine neue Funktion zum
operations Array hinzugefügt wird. Diese Funktion zeigt in der Konsole den Wert des Schleifenzählers an -
i . Nachdem die Funktionen zum Array hinzugefügt wurden, durchlaufen wir dieses Array und rufen die Funktionen auf, die seine Elemente sind.
Wenn Sie einen solchen Code ausführen, können Sie das unten gezeigte Ergebnis erwarten.
0 1 2 3 4
Tatsächlich schließt er jedoch Folgendes.
5 5 5 5 5
Warum ist das so? Die Sache ist, dass wir als Schleifenzähler eine Variable verwenden, die mit dem Schlüsselwort
var deklariert wurde.
Da Deklarationen solcher Variablen bis zum oberen Rand des Bereichs reichen, ähnelt der obige Code dem folgenden.
var i; const operations = [] for (i = 0; i < 5; i++) { operations.push(() => { console.log(i) }) } for (const operation of operations) { operation() }
Als Ergebnis stellt sich heraus, dass in der
for...of Schleife, in der wir über das Array iterieren, die Variable
i immer noch sichtbar ist. Es ist 5, daher wird in allen Funktionen unter Bezugnahme auf
i die Zahl 5 gedruckt.
Wie kann man das Verhalten des Programms so ändern, dass es das tut, was von ihm erwartet wird?
Die einfachste Lösung für dieses Problem ist die Verwendung des Schlüsselworts
let . Es ist, wie bereits erwähnt, in ES6 erschienen. Durch seine Verwendung können Sie einige für
var charakteristische Kuriositäten
var .
Insbesondere im obigen Beispiel reicht es aus,
var in
let zu ändern
let und alles wird so funktionieren, wie es sollte.
const operations = [] for (let i = 0; i < 5; i++) { operations.push(() => { console.log(i) }) } for (const operation of operations) { operation() }
Bei jeder Iteration der Schleife erhält jede dem
operations Array hinzugefügte Funktion eine eigene Kopie von
i . Denken Sie daran, dass Sie in dieser Situation das Schlüsselwort
const nicht verwenden können, da sich der Wert von
i in der Schleife ändert.
Eine andere Möglichkeit, dieses Problem zu lösen, das häufig vor dem ES6-Standard verwendet wurde, als das Schlüsselwort
let nicht vorhanden war, war die Verwendung von IIFE.
Bei diesem Ansatz wird der Wert von
i im Abschluss gespeichert, und die von IIFE zurückgegebene Funktion, die Zugriff auf den Abschluss hat, gelangt in das Array. Diese Funktion kann ausgeführt werden, wenn dies erforderlich wird. So sieht es aus.
const operations = [] for (var i = 0; i < 5; i++) { operations.push(((j) => { return () => console.log(j) })(i)) } for (const operation of operations) { operation() }
Zusammenfassung
Heute haben wir über Arrays und Loops in JavaScript gesprochen. Das Thema unseres nächsten Artikels ist die Ausnahmebehandlung, Semikolon-Verwendungsmuster und Vorlagenliterale.
Liebe Leser! Welche Methoden zum Arbeiten mit Arrays in JavaScript verwenden Sie am häufigsten?
