Array -Extras in JavaScript

JavaScript -Arrays sind in vielen Programmiersprachen eine grundlegende Datenstruktur, und JavaScript ist keine Ausnahme. Um viele Details der Arbeit mit Arrays zu vereinfachen, bietet JavaScript eine Reihe von Funktionen, die als Array -Erweiterungsfunktionen bezeichnet werden. In diesem Artikel werden verschiedene Array -Erweiterungsfunktionen und deren Verwendung eingeführt.

Schlüsselpunkte

• Array -Erweiterungsfunktionen in JavaScript sind Funktionen, die viele Details der Arbeit mit Arrays vereinfachen und die Lesbarkeit des Codes verbessern, indem komplexe Schleifen durch Funktionsaufrufe ersetzt werden. Dazu gehören Methoden wie forEach(), map(), filter(), every(), some(), reduce(), reduceRight(), indexOf(), lastIndexOf(),
und
• . forEach() Die
• -Methode beseitigt die Notwendigkeit von Schleifen- und Array -Index -Notationen, indem sie in jedem Element im Array eine Rückruffunktion aufruft. Es kann jedoch eine Leistungsverschlechterung verursachen, da die Funktion für jedes Element aufgerufen wird. map() Die Funktion forEach() filter() ähnelt
, gibt jedoch ein Array zurück, das die von der Rückruffunktion zurückgegebenen Werte enthält. Die
• -Methode gibt auch ein Array von Werten zurück, basiert jedoch auf dem Rückgabewert der Rückruffunktion, die einen booleschen Wert zurückgeben sollte. reduce() Das reduceRight() indexOf() Methode verarbeitet jedes Element im Array, berechnet einen einzelnen Wert, während lastIndexOf() genauso funktioniert, aber am Ende des Arrays beginnt. Die
-Methode sucht nach bestimmten Elementen im Array, und

macht auch dasselbe, startet aber die Suche vom Ende des Arrays.

Hintergrund

for

Fast alle Array -Operationen werden durchgeführt, indem jedes Array -Element nacheinander durchquert wird. Der folgende Code verwendet beispielsweise eine

var foo = ["a", "b", "c", "d"];

for (var i = 0, len = foo.length; i < len; i++) {
  console.log(foo[i]);
}

-Sufe, um alle Elemente eines Arrays zur Debug -Konsole aufzuzeichnen.

Erstens und vor allem sollten Sie verstehen, dass das vorherige Beispiel einen vollständig gültigen JavaScript -Code ist. Wenn Sie jedoch mehrere komplexe Schleifen haben, können die Verfolgung von Variablen mühsam werden. Mit Array -Erweiterungsfunktionen können wir die gesamte Schleife durch Funktionsaufrufe ersetzen, die normalerweise die Lesbarkeit des Codes verbessern können. Schauen wir uns nun verschiedene Array -Erweiterungsfunktionen an.

foreach ()

forEach() Wie bei vielen Array-Erweiterungsfunktionen ist die -Methode eine Funktion höherer Ordnung forEach()-eine Funktion, die eine andere Funktion als Parameter empfängt. forEach() Anstatt Array -Elemente zu durchqueren, wird die Rückruffunktion in jedem Element in Sequenz aufgerufen. Die Rückruffunktion akzeptiert drei Parameter - das aktuelle Array -Element, den Array -Index und das Array selbst. Im folgenden Code wurde das ursprüngliche Beispiel neu geschrieben, um die

-Methode zu verwenden.

var foo = ["a", "b", "c", "d"];

for (var i = 0, len = foo.length; i < len; i++) {
  console.log(foo[i]);
}

Beachten Sie, dass die Verwendung von forEach() die Notwendigkeit von Schleifen- und Array -Einweisnotation beseitigt. Da JavaScript Funktionen auf Funktionsebene verwendet, bietet die forEach() -Rallback-Funktion einen neuen Bereich, der die Wiederverwendung von Variablennamen ermöglicht. Der einzige Nachteil ist der Leistungsverlust, der durch Aufrufen der Funktion für jedes Element im Array entstanden ist. Glücklicherweise ist dieser Verlust oft vernachlässigbar. Beachten Sie auch, dass Sie nach der Rückruffunktion einen optionalen Parameter an forEach() übergeben können. Wenn vorhanden, definiert der zweite Parameter den in der Rückruffunktion verwendeten this -Werwert.

map ()

Die

map() -Funktion ist fast die gleiche wie forEach(). Der einzige Unterschied besteht darin, dass map() ein Array zurückgibt, das die von der Rückruffunktion zurückgegebenen Werte enthält. Der folgende Code verwendet beispielsweise map(), um das Quadratwurzel jedes Elements im Eingabearray zu berechnen. Geben Sie dann das Ergebnis als Array zurück und zeigen Sie es an. Beachten Sie auch, dass Array-Erweiterungsfunktionen mit integrierten JavaScript-Funktionen wie Math.sqrt() kompatibel sind.

["a", "b", "c", "d"].forEach(function(element, index, array) {
  console.log(element);
});

filter ()

Wie forEach() und map() akzeptiert die Methode filter() eine Rückruffunktion und einen optionalen this -Werwert. Und wie map() gibt filter() ein Array von Werten basierend auf dem Rückgabewert der Rückruffunktion zurück. Die Differenz besteht darin, dass die filter() -Rallback -Funktion einen Booleschen Wert zurückgeben sollte. Wenn der Rückgabewert zut ist, fügen Sie das Array -Element dem Ergebnisarray hinzu. Beispielsweise beseitigt der folgende Code jedes Element im Originalarray, das nicht mit dem Buchstaben X beginnt. In diesem Beispiel wird der reguläre Ausdruck (als this -Wergentum bestanden) für jedes Array -Element getestet.

var sqrts = [1, 4, 9, 16, 25].map(Math.sqrt);

console.log(sqrts);
// 显示 "[1, 2, 3, 4, 5]"

jeder () und einige ()

In den Funktionen

every() und some() werden auch Rückruffunktionen für jedes Array -Element ausgeführt. Wenn jede Rückruffunktion true zurückgibt, gibt every() true zurück, sonst falsch. Wenn mindestens eine Rückruffunktion true zurückgibt, gibt some() true zurück. Im folgenden Beispiel werden every() und some() verwendet, um zu testen, ob das Array -Element kleiner als fünf ist. In diesem Fall gibt every() false zurück, da das letzte Element fünf entspricht. some() gibt jedoch true zurück, da mindestens ein Element weniger als fünf ist. Beachten Sie, dass die Index- und Array -Parameter existieren, aber in der Rückruffunktion weggelassen wurden, da sie in diesem Beispiel nicht benötigt werden.

["x", "abc", "x1", "xyz"].filter(RegExp.prototype.test, /^x/);

record () und reduzierter ()

Die Methode

reduce() verarbeitet jedes Element im Array (beginnend von Anfang an) und berechnet einen einzelnen Wert. reduce() Bevorzugen Sie die Rückruffunktion und den optionalen Anfangswert als Parameter. Wenn kein Anfangswert besteht, wird das erste Array -Element verwendet. reduce() Die Rückruffunktion unterscheidet sich von den anderen Rückruffunktionen, die wir bisher gesehen haben, als sie vier Parameter akzeptiert - den vorherigen Wert, den aktuellen Wert, den Index und das Array. Ein häufiges Beispiel für reduce Operationen ist das Hinzufügen aller Werte eines Arrays. Das folgende Beispiel macht genau das. Wenn die Rückruffunktion zum ersten Mal aufgerufen wird, entspricht previous gleich 1 und current gleich 2. In nachfolgenden Aufrufen sammelt sich die Summe auf den Endwert 15.

var foo = ["a", "b", "c", "d"];

for (var i = 0, len = foo.length; i < len; i++) {
  console.log(foo[i]);
}

Die Methode

reduceRight() funktioniert genauso wie reduce(), außer dass der Prozess vom Ende des Arrays beginnt und sich zu Beginn bewegt.

indexof () und lastIndexof ()

Die Methode

indexOf() sucht nach einem bestimmten Element im Array und gibt den Index der ersten Übereinstimmung zurück. Wenn keine Übereinstimmung gefunden wird, gibt indexOf() -1 zurück. indexOf() Bitte das Element, nach dem er als erster Parameter gesucht werden soll. Der zweite optionale Parameter gibt den Startindex der Suche an. Beispielsweise sucht der folgende Code nach den ersten beiden Vorkommen des Buchstabens Z im Array. Um das zweite Erscheinen zu finden, müssen wir nur das erste Erscheinungsbild finden und nach ihm erneut suchen.

["a", "b", "c", "d"].forEach(function(element, index, array) {
  console.log(element);
});

Die

lastIndexOf() -Methode funktioniert genauso, außer dass sie vom Ende des Arrays gesucht wird.

Schlussfolgerung

Verwenden Sie Array -Erweiterungsfunktionen, um präzise und löschliche Code zu schreiben. Leider unterstützen einige ältere Browser diese Methoden nicht. Sie können diese Methoden jedoch erkennen, indem Sie das Objekt Array.prototype (d. H. Array.prototype.forEach) überprüfen. Wenn eine Methode fehlt, können Sie problemlos Ihre eigene Implementierung bereitstellen.

(Der FAQ-Teil sollte hier hinzugefügt werden. Der Inhalt entspricht dem FAQ-Teil im Eingangstext, aber entsprechende pseudooriginale Modifikationen sind erforderlich, z. usw.)

Das obige ist der detaillierte Inhalt vonArray -Extras in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!