Heim > Web-Frontend > Front-End-Fragen und Antworten > Warum verwendet JavaScript funktionale Programmierung?

Warum verwendet JavaScript funktionale Programmierung?

青灯夜游
Freigeben: 2022-09-30 15:10:14
Original
1549 Leute haben es durchsucht

Gründe: 1. Die Syntax von js ist der funktionalen Programmiersprache Scheme entlehnt. 2. Was den Browser betrifft, verbessern sich mit der Entwicklung verschiedener Single-Page-Frameworks die Verarbeitungsfunktionen des Clients weiter und es wird immer mehr Geschäftslogik auf dem Client platziert, was zu immer mehr Zuständen führt Das daraus resultierende Problem besteht darin, dass Sie mit der Geschäftslogik eine große Anzahl von Funktionen verwenden, die von externen Variablen abhängen, was zu einem starken Anstieg der logischen Verzweigungen führt. Der Status ist schwer zu verfolgen, der Code ist schlecht lesbar und die Wartung ist schwierig. Die funktionale Programmierung bietet eine gute Lösung.

Warum verwendet JavaScript funktionale Programmierung?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

1. Was ist funktionale Programmierung?

Funktionale Programmierung (FP), kurz FP genannt, ist im Gegensatz zur prozeduralen Programmierung (prozedurale Programmierung) keine Bibliothek oder Framework, sondern ein Programmierparadigma. FP vermeidet oder minimiert die Nebenwirkungen von Funktionsaufrufen auf externe Zustände und Systeme, indem es eine reine Funktionsabstrakte Datenverarbeitung deklariert.

Zu den sogenannten Nebenwirkungen gehören im Allgemeinen das Ändern des Systemstatus außerhalb der Funktion, das Auslösen von Ausnahmen, das Verarbeiten von Benutzervorgängen, das Ändern von Eingabeparametern, Datenbankabfragevorgänge, DOM-Vorgänge usw., was zu Systemfehlern führen kann. 2. Warum funktionale Programmierideen in JavaScript verwenden? Mit der Weiterentwicklung der Sprachstandards wird die Funktionalität der Sprache selbst ständig erweitert. Abschlüsse, Pfeilfunktionen, Funktionen höherer Ordnung, Array-Iteration und andere Funktionen erleichtern die Implementierung von FP in JavaScript:

2.1. 1. Lambda-AusdruckLambda-Ausdruck ist eigentlich eine anonyme Funktion, die Pfeile verwendet, um die Zuordnungsbeziehung zwischen Eingabe und Ausgabe klar darzustellen. JavaScript verwendet Pfeilfunktionen, um dies zu implementieren.

const multiply = x => x * x
multiply(6) // 36
Nach dem Login kopieren
2.1.2 Funktionen höherer Ordnung

Funktionen höherer Ordnung können eine oder mehrere Funktionen als Eingabeparameter akzeptieren und eine Funktion ausgeben. Schreiben Sie zwei einfache Beispiele

const add = x => y => x + y
const add10 = add(10)
add10(5) // 15
const compose = (...fns) => x =>  fns.reduce((acc, fn) => fn(acc), x)
const a = x => x + 1
const b = x => x + 2
const composedFn = compose(a, b)
composedFn(1) // 1 + 1 + 2 = 4
Nach dem Login kopieren

2.1.3 Filterzuordnung für jede Reduzierungsiteration

Die Filterzuordnung für jede Reduzierung unter Array.prototype sind alle Funktionen höherer Ordnung, da der Eingabeparameter eine Funktion ist.

const flatten = (arr = []) => arr.reduce(
  (acc, val)=> accconcat(Array.isArray(val) ? flatten(val) : val),
  []
)
let arr = [1,[ 4, 5 ], 2, 3];
flatten(arr)  // [1, 4, 5, 2, 3]
Nach dem Login kopieren

2.2 Aus Sicht des tatsächlichen Bedarfs

Was den Browser betrifft, werden mit der Entwicklung verschiedener Single-Page-Frameworks die Verarbeitungsfunktionen des Clients weiter verbessert und immer mehr Geschäftslogik eingesetzt Am Ende muss der Client immer mehr Zustände verwalten. Das Problem besteht darin, dass wir, wenn wir nicht aufpassen, eine große Anzahl von Funktionen verwenden, die von externen Variablen abhängen. Diese Funktionen nehmen mit der Geschäftslogik weiter zu, was zu einem starken Anstieg der logischen Verzweigungen führt, was den Status erschwert Track, schlechte Lesbarkeit des Codes und schwierig zu warten, und FP hat einfach eine gute Lösung.

Darüber hinaus haben die aktuellen Mainstream-Programmiersprachen grundsätzlich funktionale Programmierfunktionen eingeführt. Sogar Java, das für seinen objektorientierten Ansatz bekannt ist, kann immer noch funktionale Programmierideen durch die Verwendung von Stream + Lambda-Ausdrücken und sogar Spring5 umsetzen Integriert Reactive Als Hauptverkaufsargument ist FP in letzter Zeit sehr beliebt.

Auch das funktionale Programmierökosystem von JS wird ständig bereichert und Frameworks wie RxJS und CircleJS werden zunehmend in Front-End-Produktionslinien eingesetzt.

3. Vorteile der Verwendung funktionaler Programmierung

Die Verwendung der FP-Programmierung hat hauptsächlich die folgenden Vorteile:

Getrennte Daten- und Verarbeitungslogik, der Code ist prägnanter, modularer und lesbarer

Einfach zu testen Die Testumgebung ist einfach zu simulieren. Der Logikcode ist in hohem Maße wiederverwendbar Programmierung

Reine Funktion

  • Unveränderliche Daten

  • 4.1 Deklarative Programmierung
  • Deklarative Programmierung
  • beschreibt nur die Art des Ziels, abstrahiert dadurch die formale Logik und teilt dem Computer mit, dass er berechnen muss Was statt wie man Schritt für Schritt berechnet. Zum Beispiel normal, SQL, FP usw.

Imperative Programmierung Teilen Sie dem Computer die Berechnungsoperation jedes Schritts mitDie einfachste, gleiche Array-Verarbeitung, die Verwendung einer for-Schleife ist zwingend, die Verwendung von Karte und anderen Operationen ist deklarativ. Die Verwendung deklarativer Programmierung vereinfacht den Code, verbessert die Wiederverwendung und lässt Raum für Refactoring.

4.2 Reine Funktionen
  • Eine kurze Zusammenfassung reiner Funktionen weist zwei Merkmale auf:

  • Die Ausgabe einer Funktion bezieht sich nur auf die Eingabe, die von derselben Eingabe erzeugt wird, ist konsistent und hängt nicht von externen Faktoren ab Bedingungen

  • Funktionsaufruf Der Status oder die Variablen außerhalb der Funktionsdomäne werden nicht geändert und es treten keine Nebenwirkungen auf das System auf

看个简单的例子:

let counter = 0
const increment = () => ++counter
const increment = counter => ++counter
Nach dem Login kopieren

前一个函数每次调用都会修改外部变量的值,返回值也依赖于外部变量;后一个函数对于同一输入值每次返回的结果都相同,并且不会对外部状态造成影响。所以后一个是纯函数。

为什么要追求函数的纯度,这就涉及到一个称为引用透明性的概念。

4.2.1 引用透明性

纯函数的这种函数的返回值只依赖于其输入值的特性,被称为引用透明性(referential transparency),纯函数都是可以进行缓存的。

const memorize(pureFn) {
  const _cache = {}
  return (...args) => {
    const key = JSON.stringify(args)
    return _cache[key] || (_cache[key] = purFu.apply(null, args))
  }
}
Nach dem Login kopieren

4.3 Immutable Data

「可变的全局状态是万恶之源」(其实从功能代码的角度看,局部和全局是相对而言的),简而言之可变状态会让程序的运行变得不可预测,代码可读性差,难以维护。

在 JS 中,当函数入参是对象类型的数据时,我们拿到的其实是个引用,所以即使在函数内部我们也是可以修改对象内部的属性,这种情景依然会产生副作用。

所以这个时候就需要引入 Immutable 的概念。 Immutable 即 unchangeable, Immutable data在初始化创建后就不能被修改了,每次对于 Immutable data 的操作都会返回一个新的 Immutable data。 所以并不会对原来的状态形成改变(当然不是简单的深拷贝再修改)。

Immutable 比较流行的 JS 实现有 immutable-js 和 seamless-immutable; 对于 React 党来说, immutable-js 一点都不陌生, immutable-js 配合 Redux 就是一种很好的 FP 实践。

const map1 = Immutable.Map({a:1, b: {d:2}, c:3});
const map2 = map1.set('a', 50);
map1 === map2 // false
const mapb1 = map1.get('b')
const mapb2 = map2.get('b')
mapb1===mapb2 // true
Nach dem Login kopieren

【相关推荐:javascript视频教程编程视频

Das obige ist der detaillierte Inhalt vonWarum verwendet JavaScript funktionale Programmierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage