Unveränderliche Array -Methoden: Cleaner JavaScript -Code schreiben

Dieser Artikel folgt dem Leitfaden für die Variable- und Mutationshandbuch für JavaScript -Variable und erörtert die Probleme und Lösungen, die durch die mutierte Array -Methode mitgelegt wurden. Viele JavaScript-Array-Methoden ändern das ursprüngliche Array direkt, was in großen Anwendungen leicht zu schwer zu verfolgenden Fehler führen kann. Aber nicht alle Methoden sind so. Um unerwartete Mutationen zu vermeiden, können wir unsere eigenen unveränderlichen Array -Methoden schreiben, die neue Array -Objekte zurückgeben, anstatt das ursprüngliche Array zu ändern. In diesem Artikel werden unveränderliche Versionen von Methoden wie Array.prototype.slice(), Array.prototype.concat(), Array.prototype.map(), Array.prototype.filter(), pop, push und shift behandelt. Die Verwendung unveränderlicher Array -Methoden kann klarer und leichter zu verwalten, um Code zu verwalten, um Fehler zu vermeiden, die durch Nebenwirkungen verursacht werden. unshift reverse splice Array -Mutation in JavaScript

JavaScript -Arrays sind Objekte und können daher geändert werden. Viele integrierte Array-Methoden ändern das Array selbst direkt, was gegen Best Practices bei der Programmierung verstößt. Das folgende Beispiel zeigt ein potenzielles Problem:

Dieser Code scheint normal zu sein. An der Oberfläche funktioniert es:

const numbers = [1,2,3];
const countdown = numbers.reverse();

Aber die numbers -Methode hat auch das countdown -Array geändert, was nicht das Ergebnis ist, das wir wollen: numbers

countdown // [3, 2, 1]

Schlimmer ist, dass beide Variablen auf dasselbe Array verweisen, sodass nachfolgende Änderungen an einem der Arrays den anderen betreffen. Wenn wir die

-Methode verwenden, um ein Element mit einem Wert von 0 zum Ende des reverse() -Array hinzuzufügen, ändert sich auch das numbers -Array auf die gleiche Weise (da sie alle auf dasselbe Array beziehen):

numbers // [3, 2, 1]

Dieser Nebeneffekt kann in großen Anwendungen leicht übersehen und führt zu schwer zu verfolgenden Fehler. Array.prototype.push() countdown numbers Variable Array -Methode in JavaScript

countdown.push(0)
countdown // [3, 2, 1, 0]
numbers // [3, 2, 1, 0]

Zusätzlich zu

gibt es viele andere Array -Methoden, die diese Mutation verursachen:

reverse()

• Array.prototype.pop()
• Array.prototype.push()
• Array.prototype.shift()
• Array.prototype.unshift()
• Array.prototype.reverse()
• Array.prototype.sort() Im Gegensatz dazu ändern einige Methoden das ursprüngliche Array nicht, sondern geben ein neues Array zurück:
• Array.prototype.slice()
• Array.prototype.concat()
• Array.prototype.map()
• Array.prototype.filter()

Diese Methoden geben ein neues Array zurück, das auf den durchgeführten Aktionen basiert. Zum Beispiel kann die map() -Methode verwendet werden, um alle Zahlen in einem Array zu verdoppeln:

const numbers = [1,2,3];
const countdown = numbers.reverse();

Wenn wir nun das Array numbers überprüfen, können wir sehen, dass es nicht von der Methode aufgerufen wird:

countdown // [3, 2, 1]

Warum ändern einige Methoden Arrays, während andere nicht? Dafür scheint es keinen klaren Grund zu geben, aber die kürzlich hinzugefügten Methoden neigen dazu, es unveränderlich zu machen. Es kann schwierig sein, sich zu erinnern, welche Methoden das Array ändern und welche Methoden das Array nicht ändern.

Unvereitliche Array -Methode: Mutationsproblem

beheben

Wir haben festgestellt, dass Mutationen Probleme verursachen können und dass viele Array -Methoden Mutationen verursachen. Mal sehen, wie man sie vermeidet. Es ist nicht schwierig, einige Funktionen zu schreiben, die neue Array -Objekte zurückgeben, anstatt das ursprüngliche Array zu ändern. Diese Funktionen sind unsere unveränderlichen Array -Methoden.

Da wir Array.prototype nicht ändern, nehmen diese Funktionen das Array selbst immer als der erste Parameter.

pop

Beginnen wir zunächst eine neue pop -Funktion, die eine Kopie des ursprünglichen Arrays zurückgibt, aber nicht das letzte Element enthält. Beachten Sie, dass Array.prototype.pop() den Wert aus dem Ende des Arrays zurückgibt:

numbers // [3, 2, 1]

Diese Funktion verwendet Array.prototype.slice(), um eine Kopie des Arrays zurückzugeben, entfernt jedoch das letzte Element. Der zweite Parameter -1 bedeutet "Stop Slice, 1 Position vor dem Ende". Wir können sehen, wie es im folgenden Beispiel funktioniert:

countdown.push(0)
countdown // [3, 2, 1, 0]
numbers // [3, 2, 1, 0]

push

Erstellen wir als nächstes eine push() -Funktion, die ein neues Array zurückgibt, aber am Ende ein neues Element anhängen:

const numbers = [1,2,3];
const evens = numbers.map(number => number * 2);

Dies erstellt eine Kopie des Arrays mit dem Erweiterungsoperator. Anschließend fügt es den als zweiten Parameter bereitgestellten Wert zum Ende des Neuarrays hinzu. Hier ist ein Beispiel:

numbers // [1, 2, 3]

shift und unshift

wir können Alternativen zu Array.prototype.shift() und Array.prototype.unshift() in ähnlicher Weise schreiben:

const pop = array => array.slice(0,-1);

Für unsere shift() -Funktion haben wir gerade das erste Element aus dem Array anstelle des letzten Elements geschnitten. Dies ist im folgenden Beispiel zu sehen:

const food = ['?','?','?','?'];
pop(food) // ['?','?','?']

Unsere unshift() Methode gibt ein neues Array zurück und findet einen neuen Wert zum Beginn des Arrays an:

const push = (array, value) => [...array,value];

Mit dem erweiterten Operator

ermöglicht es uns, Werte in einem Array in beliebiger Reihenfolge zu platzieren. Wir müssen nur den neuen Wert vor die ursprüngliche Kopie des Arrays stellen. Wir können sehen, wie es im folgenden Beispiel funktioniert:

const food = ['?','?','?','?'];
push(food,'?') // ['?','?','?','?','?']

reverse

Versuchen wir nun, eine Alternative zur Array.prototype.reverse() -Methode zu schreiben. Es wird eine Kopie des in umgekehrten Reihenfolge angeordneten Arrays zurückgegeben, anstatt das ursprüngliche Array zu ändern:

const numbers = [1,2,3];
const countdown = numbers.reverse();

Diese Methode verwendet weiterhin die Array.prototype.reverse() -Methode, gilt jedoch für eine Kopie des ursprünglichen Arrays, das wir mit dem Erweiterungsoperator erstellen. Es gibt kein Problem damit, das Objekt gleich nach dem Erstellen zu ändern, und das tun wir hier. Wir können sehen, wie es im folgenden Beispiel funktioniert:

countdown // [3, 2, 1]

splice

Schließlich gehen wir mit Array.prototype.splice() um. Dies ist eine sehr allgemeine Funktion, daher werden wir ihre Funktionalität nicht vollständig umschreiben (obwohl es sich um eine interessante Übung handelt). Stattdessen konzentrieren wir uns auf zwei Hauptnutzungen von slice: Löschen von Elementen aus Arrays und Einfügen von Elementen in Arrays.

Array -Elemente löschen

Beginnen wir mit einer Funktion, die ein neues Array zurückgibt, aber ein Element im angegebenen Index löschen:

numbers // [3, 2, 1]

Dies verwendet Array.prototype.slice(), um das Array in zwei Hälften zu schneiden - beide Seiten des Elements, den wir löschen möchten. Das erste Slice gibt ein neues Array zurück, das Elemente des ursprünglichen Arrays kopiert, bis der als Parameterindex angegebene Index angegeben ist. Die zweite Scheibe gibt ein Array zurück, das die Elemente enthält, die wir löschen möchten, bis zum Ende des ursprünglichen Arrays. Wir verwenden dann den Erweiterungsbetreiber, um sie alle in ein neues Array zu setzen. Wir können überprüfen, ob dies funktioniert, indem wir versuchen, das Element mit Index 2 im unten stehenden food -Array zu löschen:

countdown.push(0)
countdown // [3, 2, 1, 0]
numbers // [3, 2, 1, 0]

Array -Elemente

hinzufügen

Schreiben wir schließlich eine Funktion, die ein neues Array zurückgibt und einen neuen Wert zu einem bestimmten Index einfügt:

const numbers = [1,2,3];
const evens = numbers.map(number => number * 2);

Dies ähnelt der Funktionsweise der remove() -Funktion. Es erzeugt zwei Scheiben des Arrays, enthält jedoch diesmal die Elemente am bereitgestellten Index. Wenn wir die beiden Scheiben neu gruppieren, fügen wir den als Parameter zwischen ihnen bereitgestellten Wert ein. Wir können überprüfen, ob dies funktioniert, indem wir versuchen, ein Cupcake -Emoji in die Mitte unseres food -Array einzufügen:

numbers // [1, 2, 3]

Jetzt haben wir eine unveränderliche Reihe von Array -Methoden, die das ursprüngliche Array nicht ändern. Sie können sie an einem Ort speichern und in Ihrem Projekt verwenden. Sie können sie namensspace, indem Sie sie als einzelne Objektmethode betrachten oder sie bei Bedarf verwenden. Diese Methoden sollten für die meisten Array -Operationen ausreichen. Wenn Sie verschiedene Dinge tun müssen, denken Sie an die goldene Regel: Verwenden Sie zunächst den Erweiterungsoperator, um eine Kopie des Originalarrays zu erstellen. Dann sofort eine variable Methode auf diese Kopie anwenden.

Schlussfolgerung

In diesem Artikel untersuchen wir, wie JavaScript das Leben schwierig macht, indem wir eine Array -Methode ändern, die das ursprüngliche Array als Teil der Sprache verändert. Wir haben dann unsere eigene unveränderliche Array -Methode geschrieben, um diese Funktionen zu ersetzen.

Welche anderen Array -Methoden können Sie über eine unveränderliche Version profitieren?

FAQs beim Erstellen und Verwenden unveränderlicher Array -Methoden in JavaScript

Was ist das Konzept der Invarianz in JavaScript?

Invarianz ist ein grundlegendes Konzept in der Programmierung, das sich auf den Zustand eines Objekts bezieht, das nach seiner Erstellung nicht geändert werden kann. In JavaScript wird die Invarianz standardmäßig nicht durchgesetzt. Es ist jedoch ein leistungsstarkes Konzept, das Ihnen helfen kann, vorhersehbarer und einfacher zu bewältigen. Es ist besonders nützlich bei der funktionellen Programmierung, bei der die Invarianz Fehler und Komplexität verhindert, die durch sich ändernde Zustände verursacht werden.

Warum sollte ich unveränderliche Array -Methoden in JavaScript anwenden?

Die Verwendung unveränderlicher Array -Methoden in JavaScript kann klarer und leichter zu verwalten. Da diese Methoden das ursprüngliche Array nicht ändern, können sie Nebenwirkungen verhindern, die zu Fehlern führen können. Dies ist besonders wichtig in großen Codebasen oder bei der Behandlung komplexer Datenstrukturen. Die unveränderliche Methode gibt ein neues Array zurück, während das ursprüngliche Array unverändert bleibt. Dies macht Ihren Code vorhersehbarer und einfacher zu debuggen.

Was sind einige Beispiele für unveränderliche Array -Methoden in JavaScript?

JavaScript bietet einige unveränderliche Array -Methoden, die das ursprüngliche Array nicht ändern. Einige Beispiele sind Methoden map(), filter(), reduce() und concat(). Die map() -Methode erstellt ein neues Array, das die Ergebnisse der Funktion für jedes Element im Array enthält. Die filter() -Methode erstellt ein neues Array, das alle Elemente des Tests enthält, das durch die bereitgestellte Funktion implementiert ist. Die reduce() -Methode wendet eine Funktion auf jedes Element im Akkumulator und im Array an, um sie auf einen einzelnen Ausgangswert zu reduzieren. Die concat() -Methode wird verwendet, um zwei oder mehr Arrays zusammenzuführen und ein neues Array zurückzugeben.

Wie kann ich mein Array in JavaScript unveränderlich machen?

JavaScript bietet keine integrierte Methode, um Arrays unveränderlich zu machen. Sie können jedoch Invarianz erreichen, indem Sie Methoden verwenden, die das ursprüngliche Array nicht ändern (z. B. map(), filter(), reduce() und concat()). Ein anderer Ansatz ist die Verwendung der Object.freeze() -Methode, die die Zugabe neuer Eigenschaften zum Objekt verhindert, die Entfernung vorhandener Eigenschaften verhindert und die Aufzählung, Konfigurierbarkeit oder Schreibfähigkeit bestehender Eigenschaften verhindert.

Was ist der Unterschied zwischen veränderlichen und unveränderlichen Methoden in JavaScript?

Der Hauptunterschied zwischen veränderlichen und unveränderlichen Methoden in JavaScript ist, wie sie mit dem ursprünglichen Array umgehen. Eine veränderliche Methode modifiziert das ursprüngliche Array, während eine unveränderliche Methode dies nicht tut. Stattdessen gibt die unveränderliche Methode ein neues Array zurück. Dies macht Ihren Code vorhersehbarer und einfacher zu debuggen, da er Nebenwirkungen verhindert, die zu Fehlern führen können.

Kann ich unveränderliche Arrays mit anderen Datentypen in JavaScript verwenden?

Ja, Sie können unveränderliche Arrays mit anderen Datentypen in JavaScript verwenden. Das Konzept der Invarianz gilt für alle Datentypen, nicht nur für Arrays. Beispielsweise können Sie unveränderliche Methoden mit Zeichenfolgen, Zahlen, Objekten usw. verwenden. Dies kann Ihnen helfen, klarer und leichter für den Code zu schreiben.

Gibt es einen Leistungseinfluss mit unveränderlichen Array -Methoden?

Die Verwendung von unveränderlichen Array -Methoden kann eine gewisse Leistungswirkung haben, da sie normalerweise ein neues Array erstellen, anstatt das ursprüngliche Array zu ändern. Dies kann zu einem erhöhten Speicherverbrauch führen, insbesondere in großen Arrays. In den meisten Fällen überwiegen die Vorteile der Verwendung unveränderlicher Methoden wie klarerer Code und weniger Fehler jedoch die potenziellen Leistungskosten.

Wie verwendet ich die reduce() -Methode in JavaScript?

Die Methode reduce() in JavaScript ist eine unveränderliche Methode, die eine Funktion für jedes Element im Akkulator und im Array anwendet, um sie auf einen einzelnen Ausgangswert zu reduzieren. Hier ist ein Beispiel dafür, wie man es verwendet:

const numbers = [1,2,3];
const countdown = numbers.reverse();

In diesem Beispiel berechnet die reduce() -Methode die Summe aller Elemente im Array.

Was ist die concat() -Methode in JavaScript?

Die concat() -Methode in JavaScript wird verwendet, um zwei oder mehr Arrays zusammenzuführen. Diese Methode ändert das vorhandene Array nicht, sondern gibt ein neues Array zurück. Hier ist ein Beispiel:

countdown // [3, 2, 1]

In diesem Beispiel wird die concat() -Methode array1 und array2 in ein neues Array array3 zusammengefasst.

Wie verwendet ich die filter() -Methode in JavaScript?

Die filter() -Methode in JavaScript erstellt ein neues Array, das alle Elemente des Tests enthält, das durch die bereitgestellte Funktion implementiert ist. Hier ist ein Beispiel dafür, wie man es verwendet:

numbers // [3, 2, 1]

In diesem Beispiel erstellt die filter() -Methode ein neues Array, das Zahlen mehr als 3 enthält.

Das obige ist der detaillierte Inhalt vonUnveränderliche Array -Methoden: Cleaner JavaScript -Code schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!