5 Möglichkeiten, Ihr JavaScript funktionaler zu gestalten

In diesem Artikel wird kurz das Konzept der funktionalen Programmierung vorgestellt und fünf Möglichkeiten erklärt, den funktionalen Stil des JavaScript -Code zu verbessern.

Kernpunkte

• funktionale Programmierung ist ein Programmierparadigma, das Funktionen und ihre Anwendungen und nicht die Befehlslisten verwendet. Es ist abstrakter und stammt aus der Mathematik. JavaScript ist besonders für die funktionale Programmierung geeignet, da Funktionen die erste Art von Objekten sind.
• reine Funktionen sind ein wesentlicher Bestandteil der funktionalen Programmierung. Angesichts der gleichen Argumente geben sie immer den gleichen Wert zurück und ändern nicht das, was außerhalb des Rahmens der Funktion liegt. Sie erleichtern Ihren Code leichter zu portieren und zu testen.
• In der funktionalen Programmierung sollten Variablen unverändert bleiben. Nach der Einstellung der Variablen sollte sie im gesamten Programm in diesem Zustand bleiben. Dies kann erreicht werden, indem Variablen mit const immer deklariert werden.
• Es wird empfohlen, Pfeilfunktionen und ternäre Operatoren in der funktionalen Programmierung von JavaScript zu verwenden. Die Pfeilfunktionen haben implizite Rückgabewerte, mit denen die Eingabe-zu-Output-Zuordnung visualisiert wird. Der ternäre Operator ist ein Ausdruck, der immer einen Wert zurückgibt. Daher ist es nützlich, sicherzustellen, dass der Rückgabewert existiert.
• Verwenden Sie for Loops in der funktionellen Programmierung sollten vermieden werden, da sie von mutablen Zuständen abhängen. Stattdessen sollten rekursive Array-Methoden mit Array-Methoden höherer Ordnung verwendet werden. Zusätzlich sollte der Typ -Zwang vermieden werden, um die Typ -Konsistenz aufrechtzuerhalten. Dies kann durch Schreiben von Typ Deklaration -Kommentaren vor der Deklaration der Funktion erfolgen.

Was ist eine funktionale Programmierung?

funktionale Programmierung ist ein Programmierparadigma, das Funktionen und ihre Anwendungen verwendet, anstatt eine Liste von Befehlen, die in der Programmiersprache imperativ verwendet werden.

Dies ist ein abstrakterer Programmierstil mit Wurzeln in der Mathematik - insbesondere der mathematische Zweig namens Lambda Calculus, das 1936 von der Mathematiker Alonzo Church als formales Modell der Computertation entworfen wurde. Es besteht aus Ausdrücken und Funktionen, die einen Ausdruck einem anderen abbilden. Grundsätzlich tun wir dies in der funktionalen Programmierung: Wir verwenden Funktionen, um Werte in verschiedene Werte umzuwandeln.

Der Autor dieses Artikels hat sich in den letzten Jahren in die funktionelle Programmierung verliebt. Wir haben begonnen, JavaScript -Bibliotheken zu verwenden, die mehr funktionale Stile fördern, und dann direkt ins tiefe Wasser gesprungen, indem sie lernen, wie man Code in Haskell schreibt.

Haskell ist eine rein funktionelle Programmiersprache, die in den 1990er Jahren entwickelt wurde, ähnlich wie Scala und Clojure. Mit diesen Sprachen werden Sie gezwungen sein, in einen funktionalen Stil zu codieren. Das Lernen von Haskell gibt uns ein echtes Verständnis für alle Vorteile der funktionalen Programmierung.

JavaScript ist eine Multi-Paradigmen-Sprache, da sie verwendet werden kann, um in einem imperativen, objektorientierten oder funktionalen Stil zu programmieren. Es passt jedoch besonders gut zum funktionalen Stil, da Funktionen erstklassige Objekte sind, was bedeutet, dass sie Variablen zugewiesen werden können. Dies bedeutet auch, dass Funktionen als Argumente an andere Funktionen (normalerweise als Rückrufe genannt) oder als Rückgabewerte für andere Funktionen übergeben werden können. Funktionen, die andere Funktionen zurückgeben oder andere Funktionen als Parameter akzeptieren, werden als Funktionen höherer Ordnung bezeichnet und sind der grundlegende Teil der funktionalen Programmierung.

In den letzten Jahren wurde das Programmieren von JavaScript im funktionalen Stil immer beliebter, insbesondere nach dem Aufstieg von React. React verwendet eine deklarative API, die für funktionelle Methoden geeignet ist. Ein solides Verfassen der funktionellen Programmierprinzipien verbessert Ihren React -Code.

Warum ist die funktionale Programmierung so ausgezeichnet?

in kurzen, funktionalen Programmiersprachen führen häufig dazu, dass der Code präzise, ​​klar und elegant ist. Der Code ist normalerweise einfacher zu testen und kann ohne Probleme in einer Umgebung mit mehreren Threads ausgeführt werden.

Wenn Sie mit vielen verschiedenen Programmierern sprechen, werden Sie möglicherweise völlig unterschiedliche Meinungen über funktionale Programme von allen erhalten - von denen, die es absolut hassen, bis zu denen, die es absolut lieben. Wir (der Autor dieses Artikels) stehen auf der Seite von "Love It", aber wir verstehen voll und ganz, dass es nicht das Gericht aller ist, zumal es sich sehr von der Art und Weise unterscheidet, wie wir normalerweise unterrichten.

, aber sobald Sie die funktionale Programmierung beherrschen und sobald der Denkprozess eingerichtet wird, wird es zur zweiten Natur und ändert die Art und Weise, wie Sie Ihren Code schreiben.

Regel 1: Reinigen Sie Ihre Funktion

Der wichtigste Teil der funktionalen Programmierung besteht darin, sicherzustellen, dass die von Ihnen geschriebenen Funktionen "rein" sind. Wenn Sie mit diesem Begriff nicht vertraut sind, erfüllen reine Funktionen im Grunde die folgenden Bedingungen:

• Es hat Zitiertransparenz. Dies bedeutet, dass die Funktion bei dem gleichen Argument immer den gleichen Wert zurückgibt. Jeder Funktionsaufruf kann durch den Rückgabewert ersetzt werden, und das Programm wird weiterhin genauso ausgeführt. Es hat keine Nebenwirkungen. Dies bedeutet, dass die Funktion außerhalb des Rahmens der Funktion keine Änderungen vornimmt. Dies kann das Ändern des globalen Werts, die Aufzeichnung in die Konsole oder das Aktualisieren des DOM umfassen.
reine Funktion

muss mindestens einen Parameter haben, und

muss einen Wert zurückgeben. Wenn Sie sorgfältig nachdenken, wenn sie keine Parameter akzeptieren, haben sie keine Daten zu verwenden, und wenn sie keine Werte zurückgeben, was ist der Sinn der Funktion? reine Funktionen scheinen zu Beginn nicht völlig notwendig zu sein, aber die Verwendung unreiner Funktionen verursacht allgemeine Änderungen im Programm, was zu schwerwiegenden logischen Fehlern führt! Beispiel:

In unreinen Funktionen hängt die

-Funktion von der veränderlichen Variablen

ab. Wenn beispielsweise die Variable

// 不纯
let minimum = 21;
const checkAge = (age) => age >= minimum;

// 纯
const checkAge = (age) => {
    const minimum = 21;
    return age >= minimum;
};

später im Programm aktualisiert wird, kann die Funktion

einen Booleschen mit derselben Eingabe zurückgeben. checkAge minimum Angenommen, wir führen den folgenden Code aus: minimum checkAge

Nehmen wir nun an, dass die Funktion

später im Code den Wert von

bis 18 aktualisiert.

checkAge(20); // false

Angenommen, wir führen den folgenden Code aus:

// 不纯
let minimum = 21;
const checkAge = (age) => age >= minimum;

// 纯
const checkAge = (age) => {
    const minimum = 21;
    return age >= minimum;
};

Die Funktion checkAge wird nun auf verschiedene Werte bewertet, obwohl dieselbe Eingabe angegeben ist.

reine Funktionen erleichtern Ihren Code den Port, da sie nicht von einem anderen Wert abhängen, der als Parameter angegeben ist. Die Tatsache, dass sich der Rückgabewert nie ändert, erleichtert die Testen reine Funktionen.

reine Funktionen schreiben konsequent auch die Möglichkeit von Mutationen und Nebenwirkungen.

Mutationen sind eine große rote Fahne in der funktionalen Programmierung. Wenn Sie mehr erfahren möchten, können Sie im Handbuch zur variablen Zuordnung und Mutation in JavaScript darüber lesen.

Um Ihre Funktion zu erleichtern, stellen Sie sicher, dass Ihre Funktion immer rein ist.

Regel 2: Halten Sie die Variable unverändert

Variablen deklarieren ist eines der ersten Dinge, die ein Programmierer lernt. Es wird trivial, ist aber äußerst wichtig, wenn funktionale Programmierstile verwendet werden.

Eines der wichtigsten Prinzipien der funktionalen Programmierung ist, dass nach der Festlegung einer Variablen im gesamten Programm dieser Zustand bleibt.

Dies ist das einfachste Beispiel dafür, wie Neuzuweisung/Neuanschlüsse von Variablen in Ihrem Code eine Katastrophe sein kann:

checkAge(20); // false

Wenn Sie sorgfältig darüber nachdenken, können die Werte von n nicht sowohl 10 als auch 11 sein;

Eine gemeinsame Codierungspraxis bei der imperativen Programmierung besteht darin, den folgenden Code zu verwenden, um den Wert zu erhöhen:

checkAge(20); // true

In der Mathematik ist die Aussage x = x 1 unlogisch, da Sie x von beiden Seiten subtrahieren, Sie erhalten 0 = 1, was offensichtlich falsch ist.

In Haskell können Sie daher nicht einem Wert eine Variable zuweisen und sie dann einem anderen Wert neu zuweisen. Um dies in JavaScript zu erreichen, sollten Sie die Regeln befolgen, die immer const verwenden, um Variablen zu deklarieren.

Regel 3: Verwenden Sie die Pfeilfunktion

In der Mathematik ist das Konzept einer Funktion das Konzept der Zuordnung eines Wertesatzes auf einen anderen. Die folgende Abbildung zeigt eine Funktion, die den Wert links auf den Wert rechts durch das Quadrat darstellt:

Auf diese Weise schreiben Sie es mit Arrow Notation in Mathematik: F: X → X². Dies bedeutet, dass die Funktion f den Wert x auf x² ordnet.

Wir können diese Funktion mit der Pfeilfunktion auf die gleiche Weise auf die gleiche Weise schreiben:

const n = 10;
n = 11; // TypeError: "Attempted to assign to readonly property."

Eine Schlüsselfunktion für die Verwendung des funktionalen Stils in JavaScript ist die Verwendung von Pfeilfunktionen und nicht die reguläre Funktionen. Dies ist natürlich auf Stil zurückzuführen, und die Verwendung von Pfeilfunktionen anstelle von regulären Funktionen wirkt sich nicht wirklich auf den Grad der "funktionellen" Code aus.

Eines der schwierigsten Dinge, an die man sich bei der Verwendung funktionaler Programmierstile anpassen kann, ist die Art, jede Funktion als Mapping -Eingabe für die Ausgabe zu überlegen. Es gibt keinen sogenannten Prozess. Wir haben festgestellt, dass die Verwendung von Pfeilfunktionen uns helfen kann, den Funktionsprozess besser zu verstehen.

Die Pfeilfunktion hat einen impliziten Rückgabewert, der dazu beiträgt, diese Karte zu visualisieren.

Die Strukturen der Pfeilfunktionen - insbesondere ihre impliziten Rückgabebereich - fördern das Schreiben von reinen Funktionen, da ihre Struktur tatsächlich "Eingabe für die Ausgabe zugeordnet" ist:

// 不纯
let minimum = 21;
const checkAge = (age) => age >= minimum;

// 纯
const checkAge = (age) => {
    const minimum = 21;
    return age >= minimum;
};

Eine andere Sache, die wir gerne betonen, insbesondere beim Schreiben von Pfeilfunktionen, ist die Verwendung von ternären Operatoren. Wenn Sie mit ternären Operatoren nicht vertraut sind, sind es inline if...else Anweisungen in Form condition ? value if true : value if false.

Sie können mehr über sie in schnellen Tipps lesen: So verwenden Sie dreigliedrige Operatoren in JavaScript.

Einer der Hauptgründe für die Verwendung ternärer Operatoren in der funktionellen Programmierung ist die Notwendigkeit von else -Antals. Das Programm muss wissen, was zu tun ist, wenn die ursprünglichen Bedingungen nicht erfüllt sind. Zum Beispiel erzwingt Haskell eine -Anweisung, und wenn keine else Anweisung gegeben wird, gibt sie einen Fehler zurück. else

Ein weiterer Grund, ternäre Operatoren zu verwenden, ist, dass es sich um Ausdrücke handelt, die immer Werte zurückgeben, anstatt

Anweisungen, mit denen Operationen durchgeführt werden können, die möglicherweise Nebenwirkungen haben können. Dies ist besonders für Pfeilfunktionen nützlich, da Sie sicherstellen können, dass der Rückgabewert vorliegt und die Bildeingabe für die Ausgabemkarte aufbewahrt. Wenn Sie sich über die Nuance zwischen Aussagen und Ausdrücken nicht sicher sind, lohnt sich ein Leitfaden zu Aussagen und Ausdrücken. if-else

Um diese beiden Bedingungen zu veranschaulichen, ist Folgendes ein Beispiel für eine einfache Pfeilfunktion unter Verwendung des ternären Operators:

Die Funktion

checkAge(20); // false

gibt den Wert von "Eat" oder "Schlaf" basierend auf dem Wert des action -Parameters zurück. state

Kurz gesagt: Wenn Sie Ihren Code funktionaler machen, sollten Sie folgende diese beiden Regeln befolgen:

Funktionen mit Pfeilnotation
• schreiben.
• Ersetzen Sie die if...else -Anweisung durch den ternären Operator

Regel 4: Löschen Sie die für Schleife

for Angesichts der Tatsache, dass das Schreiben iterativer Code mit for bei der Programmierung sehr häufig ist, scheint es seltsam zu sagen, dass Sie sie vermeiden möchten. Als wir zum ersten Mal feststellten, dass Haskell nicht einmal eine Art von for -Sloop -Operationen hatte, fiel es uns schwer zu verstehen, wie einige Standardvorgänge implementiert werden können. Es gibt jedoch einige sehr gute Gründe, warum for Loops nicht in der funktionellen Programmierung auftreten, und wir haben schnell festgestellt, dass jede Art von Iteration ohne Verwendung

-Hleiben implementiert werden kann.

for nicht verwendet

Der wichtigste Grund, warum Schleifen geschoben werden, ist, dass sie sich auf veränderliche Zustände verlassen. Schauen wir uns eine einfache Summenfunktion an:

checkAge(20); // true

for Wie Sie sehen können, müssen wir in der for -Sufe selbst let und in den Variablen, die wir in der

-Klobe aktualisieren, verwenden.

Wie bereits erwähnt, ist dies normalerweise eine schlechte Praxis in der funktionalen Programmierung, da alle Variablen in der funktionellen Programmierung unveränderlich sein sollten.

Wenn wir Code schreiben möchten, in dem alle Variablen unveränderlich sind, können wir Rekursion verwenden:

const n = 10;
n = 11; // TypeError: "Attempted to assign to readonly property."

Wie Sie sehen, werden keine Variablen aktualisiert.

Die Mathematiker unter uns werden offensichtlich wissen, dass all dieser Code unnötig ist, da wir nur die clevere Summierformel 0,5*n*(n 1) verwenden können. Dies ist jedoch eine großartige Möglichkeit, den Unterschied zwischen der Variabilität einer Schleife und einer Rekursion zu veranschaulichen. for

Rekursion ist jedoch nicht die einzige Lösung für das Variabilitätsproblem, insbesondere beim Umgang mit Arrays. JavaScript verfügt über viele integrierte Array-Methoden höherer Ordnung, die durch Werte in einem Array iterieren, ohne Variablen zu ändern.

Nehmen wir zum Beispiel an, wir möchten jedem Wert im Array 1 hinzufügen. Mit der imperativen Methode und der

-Schule könnte unsere Funktion so aussehen: for

// 不纯
let minimum = 21;
const checkAge = (age) => age >= minimum;

// 纯
const checkAge = (age) => {
    const minimum = 21;
    return age >= minimum;
};

Wir können jedoch die integrierte

-Methode von JavaScript verwenden und eine Funktion wie folgt schreiben: map

checkAge(20); // false

Wenn Sie noch nie

Funktionen gesehen haben, ist es definitiv wert der funktionalen Programmierung im JavaScript -Interesse. In unveränderlichen Array -Methoden finden Sie mehr über sie: So schreiben Sie sehr klare JavaScript -Code. map filter Haskell hat überhaupt keine

-Slober. Um Ihr JavaScript funktioneller zu gestalten, vermeiden Sie die Verwendung von

-Hleiben mit rekursiven und integrierten Array-Methoden höherer Ordnung. for for

Regel 5: Typ obligatorisch

vermeiden Es ist leicht, die Bedeutung von Datentypen bei der Programmierung in Sprachen wie JavaScript zu vergessen, für die keine Typdeklarationen erforderlich sind. Die sieben in JavaScript verwendeten primitiven Datentypen sind:

Nummer

• String
• boolean
• Symbol
• Bigint
• undefined
• null
Haskell ist eine stark typisierte Sprache, die Typdeklarationen erfordert. Dies bedeutet, dass Sie vor einer Funktion das Hindley-Milner-System verwenden müssen, um den Datentyp einzugeben und die Datentypausgabe.

Beispiel:

Dies ist eine sehr einfache Funktion, die zwei Zahlen (x und y) miteinander hindert. Für jede Funktion, einschließlich sehr einfacher Funktionen wie dieser, erscheint es ein bisschen lächerlich, den Datentyp für das Programm zu erklären, aber dies hilft letztendlich, zu zeigen, wie die Funktion erwartet wird und wie erwartet wird, dass sie zurückkehren. Dies erleichtert den Code leichter zu debuggen, insbesondere wenn der Code komplexer wird.

checkAge(20); // true

Typdeklaration folgt der folgenden Struktur:

Typ -Kraft kann ein großes Problem bei der Verwendung von JavaScript sein, das verschiedene Tricks aufweist, die verwendet werden können (sogar

Missbrauch

), um Inkonsistenzen in Datentypen zu umgehen. Hier sind die häufigsten Tipps und wie man sie vermeidet:

const n = 10;
n = 11; // TypeError: "Attempted to assign to readonly property."

Verbindung. "Hallo" 5 wird als "Hallo5" bewertet, was nicht konsistent ist. Wenn Sie Strings mit numerischen Werten verkettet möchten, sollten Sie "Hallo" -Sziel (5) schreiben.

boolesche Anweisung und 0. In JavaScript entspricht der Wert 0 in der

-Anweisung falsch. Dies kann zu faulen Programmierechniken führen, die ignorieren, ob die numerischen Daten 0 entsprechen.
• Beispiel: if

  // 不纯
  let minimum = 21;
  const checkAge = (age) => age >= minimum;
  
  // 纯
  const checkAge = (age) => {
      const minimum = 21;
      return age >= minimum;
  };

  Dies ist eine Funktion, die bewertet, ob eine Zahl eine gleichmäßige Zahl ist. Es verwendet das Symbol !, um das Ergebnis von n % 2 auf einen Booleschen zu geben, aber das Ergebnis von n % 2 ist kein Boolescher, sondern eine Zahl (0 oder 1).

  Tipps wie diese scheinbar klug und reduzieren die Menge an Code, die Sie schreiben, aber sie brechen die Typ -Konsistenzregeln der funktionalen Programmierung. Daher ist der beste Weg, um diese Funktion zu schreiben, wie folgt:

  checkAge(20); // false

  Ein weiteres wichtiges Konzept besteht darin, sicherzustellen, dass alle Datenwerte im Array vom gleichen Typ sind. JavaScript erzwingt dies nicht, aber wenn es keinen gleichen Typ gibt, kann es Probleme verursachen, wenn Sie Array-Methoden höherer Ordnung verwenden möchten.

  Zum Beispiel kann eine Produktfunktion, die alle Zahlen in einem Array multipliziert und das Ergebnis zurückgibt

  checkAge(20); // true

  Hier ist die Typdeklaration deutlich, dass die Eingabe der Funktion ein Array mit Elementen der Typnummer ist, aber nur eine Zahl zurückgibt. Die Typdeklaration zeigt deutlich die erwartete Eingabe und Ausgabe dieser Funktion. Offensichtlich funktioniert diese Funktion nicht, wenn das Array mehr als nur Zahlen enthält.
  Haskell ist eine stark typisierte Sprache, während JavaScript eine schwach typisierte Sprache ist. Um Ihr JavaScript jedoch funktionaler zu gestalten, sollten Sie Deklarationskommentare schreiben, bevor Sie Ihre Funktion deklarieren, und sicherstellen, dass Typ-Zwangsverknüpfungen vermieden werden.
  Wir sollten auch hier erwähnen, dass Sie sich an TypeScript wenden können, wenn Sie eine stark eingegebene Alternative zu JavaScript wünschen, die die Konsistenz von Typen für Sie durchsetzen.

  Schlussfolgerung Insgesamt

  Insgesamt helfen Sie mit den folgenden fünf Regeln den Funktionscode:
  Halten Sie Ihre Funktion
  • rein .
  deklarieren Sie immer Variablen und Funktionen mit
  • const .
  Verwenden Sie die
  • Pfeil Notation für die Funktion.
  Vermeiden Sie die Verwendung
  • for Loop .
  Verwenden Sie Annotationen für Typdeklaration und vermeiden Sie erzwungene Verknüpfungen.
  Während diese Regeln nicht garantieren, dass Ihr Code rein funktionsfähig ist, macht er ihn in hohem Maße funktionaler und macht es sauberer, klarer und einfacher zu testen.
  Wir hoffen wirklich, dass diese Regeln Ihnen so viel wie möglich helfen werden! Wir beide sind große Fans der funktionalen Programmierung und wir empfehlen, dass jeder Programmierer sie verwendet.
  Wenn Sie tiefer in funktionales JavaScript eintauchen möchten, empfehlen wir dringend, "den größten Teil der ausreichenden Anleitung zur funktionalen Programmierung von Professor Frisby, das kostenlos online verfügbar ist. Wenn Sie alles lernen möchten, um Haskell zu lernen, empfehlen wir, das Interactorial Tutorial von Try Haskell zu verwenden und das hervorragende Buch Learn Haskell für größere Vorteile zu lesen, das auch kostenlos online verfügbar ist.

  Häufig gestellte Fragen zur funktionalen Programmierung von JavaScript

  Was ist eine funktionale Programmierung in JavaScript? funktionelle Programmierung ist ein Programmierparadigma, das Berechnungen als Bewertungen mathematischer Funktionen behandelt und sich verändert, was sich zu ändern und veränderliche Daten zu ändern. In JavaScript beinhaltet es die Verwendung von Funktionen als erstklassige Bürger und die Vermeidung von Nebenwirkungen.

  Was ist eine erstklassige Funktion in JavaScript? Eine erstklassige Funktion in JavaScript bedeutet, dass die Funktion als jede andere Variable behandelt wird. Den Variablen können ihnen Werte zugewiesen, als Parameter an andere Funktionen übergeben und als Werte aus anderen Funktionen zurückgegeben.

  Was ist Invarianz in der funktionalen Programmierung? Invarianz bedeutet, dass nach dem Erstellen eines Objekts nicht geändert werden kann. Im Zusammenhang mit der javaScript -funktionalen Programmierung bedeutet dies, dass sie nach der Initialisierung von Variablen oder Datenstrukturen vermieden werden.

  Was ist eine Funktion höherer Ordnung? Eine Funktion höherer Ordnung ist eine Funktion, die andere Funktionen als Parameter oder Rückgabefunktionen als Ergebnisse nimmt. Sie unterstützen Kombinationen von Funktionen und erleichtern das Erstellen modularer und wiederverwendbarer Code.

  Gibt es eine Bibliothek/ein Framework, das die funktionale Programmierung in JavaScript erleichtert? Ja, einige Bibliotheken und Frameworks (wie Ramda und Lodash) bieten Dienstprogramme und Funktionen, die das Konzept der funktionellen JavaScript -Programmierung unterstützen. Sie können dazu beitragen, funktionale Programmierpraktiken zu vereinfachen und zu verbessern.

Das obige ist der detaillierte Inhalt von5 Möglichkeiten, Ihr JavaScript funktionaler zu gestalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!