Filterung und Verkettung im funktionalen JavaScript

Vokabular von JavaScript: objektorientierte, imperative und funktionale Programmierung

Die Kraft von JavaScript ist seine Vielseitigkeit, die die objektorientierte Programmierung, die imperative Programmierung und die funktionale Programmierung unterstützt. Entwickler können das Programmierparadigmen flexibel entsprechend der Projektanforderungen und den Teameinstellungen wechseln.

ES5 führt native Array -Methoden wie map, reduce und filter ein, die die funktionale Programmierung stark erleichtern. Unter ihnen kann die filter -Methode jedes Element im Array durch jedes Element iterieren und feststellen, ob sie das Neue Array basierend auf den angegebenen Testbedingungen hinzufügen sollen.

Vereinfachen Sie den Code mit filter Methode

filter Methode macht den Code prägnanter und klarer. Es iteriert jedes Element im Array und wendet die Testfunktion an. Wenn die Testfunktion true zurückgibt, wird das Element in das Neuarray aufgenommen, das von der filter -Methode zurückgegeben wird.

Die

filter -Methode funktioniert in Verbindung mit den beiden anderen funktionalen Array -Methoden von ES5, map und reduce und kann in Kombination verwendet werden, um prägnante und effiziente Code zu erstellen, während das ursprüngliche Array unverändert bleibt.

Während die filter -Methode etwas langsamer sein kann als die for -Kloses, machen die Codes -Einfachheit und -Vorteile der Code zu einer empfohlenen Praxis. Mit der Optimierung der JavaScript -Engine wird die Leistung voraussichtlich weiter verbessert.

Dieser Artikel wurde von Dan Prince, Vildan Softic und Joan Yinn überprüft. Vielen Dank an alle SitePoint -Peer -Rezensenten, die SidePoint -Inhalte für den Besten erhalten haben!

Einer der Gründe, warum ich JavaScript mag, ist seine Flexibilität. Sie können objektorientierte Programmierung, imperative Programmierung und sogar funktionelle Programmierung verwenden und können basierend auf Ihren aktuellen Anforderungen und den Teameinstellungen und -erwartungen zwischen ihnen wechseln.

Während JavaScript die funktionale Technologie unterstützt, ist es nicht für reine funktionelle Programmierungen wie Haskell oder Scala optimiert. Obwohl ich meine JavaScript -Programme normalerweise nicht zu 100% funktional erbaue, benutze ich das Konzept der funktionalen Programmierung gerne, um meine Codes -Einfachheit zu halten und mich auf das Entwerfen von Code zu konzentrieren, der einfach wiederverwendet und testen kann.

Filterdatensatz mit filter Methode

Filter

Die Entstehung von ES5 macht JavaScript -Arrays einige Methoden, die die funktionelle Programmierung bequemer machen. JavaScript -Arrays können nun nativ zugeordnet, reguliert und gefiltert werden. Jede Methode durchquert jedes Element im Array, führt eine Analyse ohne Schleifen oder örtliche Zustandsänderungen durch und gibt Ergebnisse zurück, die sofort oder weiter betrieben werden können. In diesem Artikel möchte ich Ihnen das Filtern vorstellen. Durch die Filterung können Sie jedes Element des Arrays bewerten und feststellen, ob ein neues Array das Element basierend auf den von Ihnen übergebenen Testbedingungen zurückgibt. Wenn Sie die Filtermethode von Array verwenden, erhalten Sie ein weiteres Array, das die gleiche Länge wie das ursprüngliche Array oder kürzer ist, das Teilmengenelemente im ursprünglichen Array enthält, das den von Ihnen festgelegten Bedingungen entspricht.

Filter mithilfe der Schleifendemonstration

Ein Beispiel für ein einfaches Problem, das von der Filterung profitieren kann, besteht darin, Arrays von Strings auf Zeichenfolgen mit nur drei Zeichen zu beschränken. Dies ist kein kompliziertes Problem. Wir können es leicht mit normalem JavaScript für Schleifen und ohne Filtermethoden lösen. Es könnte so aussehen:

var animals = ["cat","dog","fish"];
var threeLetterAnimals = [];
for (let count = 0; count < animals.length; count++) {
  if (animals[count].length === 3) {
    threeLetterAnimals.push(animals[count]);
  }
}
console.log(threeLetterAnimals); // ["cat", "dog"]

Was wir hier tun, ist ein Array mit drei Zeichenfolgen und erstellen Sie ein leeres Array, in dem wir nur drei Zeichen String speichern können. Wir definieren eine Zählvariable, die bei der Iterierung des Arrays in A for Loop verwendet wird. Jedes Mal, wenn wir auf eine Zeichenfolge stoßen, die zufällig drei Zeichen hat, schieben wir sie in unser neues leeres Array. Sobald wir fertig sind, müssen wir nur die Ergebnisse aufzeichnen. Nichts hindert uns daran, das ursprüngliche Array in einer Schleife zu modifizieren, aber dies wird den ursprünglichen Wert dauerhaft verlieren. Es ist viel sauberer, ein neues Array zu erstellen und das ursprüngliche Array unverändert zu halten.

Verwenden filter Methode

Wir hatten keine technischen Fehler dabei, aber die Verfügbarkeit der Filtermethode in Array ermöglicht es uns, unseren Code präzise und direkter zu gestalten. Hier ist ein Beispiel dafür, wie Sie genau das Gleiche mit der Filtermethode tun:

var animals = ["cat","dog","fish"];
var threeLetterAnimals = [];
for (let count = 0; count < animals.length; count++) {
  if (animals[count].length === 3) {
    threeLetterAnimals.push(animals[count]);
  }
}
console.log(threeLetterAnimals); // ["cat", "dog"]

Wie zuvor beginnen wir mit den Variablen, die das ursprüngliche Array enthalten, und definieren eine neue Variable für ein Array, die nur Zeichenfolgen mit drei Zeichen enthalten. Wenn wir das zweite Array jedoch definieren, weisen wir es jedoch direkt dem Ergebnis der Anwendung der Filtermethode auf das ursprüngliche Tierearray zu. Wir übergeben eine anonyme Inline -Funktion an Filter, die nur dann true zurückgibt, wenn die Wertlänge seines Betriebs 3 beträgt. Die Filtermethode erfolgt, indem sie jedes Element im Array iteriert und die Testfunktion auf dieses Element anwendet. Wenn die Testfunktion für das Element das TRUE zurückgibt, enthält das von der Filtermethode zurückgegebene Array das Element. Andere Elemente werden übersprungen. Sie können sehen, wie präzise der Code aussieht. Auch wenn Sie die Rolle des Filters im Voraus nicht verstehen, können Sie diesen Code überprüfen und seine Absicht herausfinden. Ein Vorteil der funktionalen Programmierung besteht darin, dass die Anzahl der zu verfolgten lokalen Zustände reduziert und die Modifikation externer Variablen aus der Funktion einschränkt, wodurch die Einfachheit des Codes verbessert wird. In diesem Fall sind die Zählvariablen und die verschiedenen Zustände, die wir beim Durchqueren des ursprünglichen Arrays aufnehmen, nur mehr Staaten, die verfolgt werden müssen. Mit Filter haben wir es geschafft, Schleifen sowie Zählvariablen zu beseitigen. Wir ändern den Wert eines Neuarrays nicht so oft wie zuvor. Wir definieren es nur einmal und weisen den Wert zu, der durch die Anwendung unserer Filterbedingung auf das ursprüngliche Array erhalten wird.

Andere Möglichkeiten zum Formatfilter

Wenn wir Const Deklarationen und anonyme Inline -Pfeilfunktionen verwenden, kann unser Code prägnanter sein. Dies sind ECMascript 6 (ES6) -Funktionen, die jetzt nativ von den meisten Browsern und JavaScript -Motoren unterstützt werden.

var animals = ["cat","dog","fish"];
var threeLetterAnimals = animals.filter(function(animal) {
  return animal.length === 3;
});
console.log(threeLetterAnimals); // ["cat", "dog"]

Während es in den meisten Fällen am besten über die alte Syntax hinausgeht, es sei denn, Sie müssen Ihren Code mit einer vorhandenen Codebasis anpassen, ist es wichtig, ihn auszuwählen. Wenn wir prägnanter werden, wird jede Zeile unseres Codes komplexer. Ein Teil dessen, was JavaScript so interessant macht, ist, dass Sie versuchen können, den gleichen Code zu entwerfen, der viele Möglichkeiten zur Optimierung von Größe, Effizienz, Klarheit oder Wartbarkeit für die Vorlieben Ihres Teams hat. Dies belastet aber auch das Team mehr, sodass Sie gemeinsame Stilführer erstellen und die Vor- und Nachteile jeder Wahl diskutieren müssen. In diesem Fall möchten wir, um unseren Code lesbarer und vielseitigerer zu gestalten, die anonyme Inline -Pfeilfunktion oben übernehmen und in eine herkömmliche benannte Funktion umwandeln und dann diese benannte Funktion direkt an den Filter in der Methode übergeben. Der Code kann so aussehen:

const animals = ["cat","dog","fish"];
const threeLetterAnimals = animals.filter(item => item.length === 3);
console.log(threeLetterAnimals); // ["cat", "dog"]

Hier extrahieren Sie nur die oben definierte anonyme Inline -Pfeilfunktion und konvertieren sie in eine separate benannte Funktion. Wie wir sehen können, haben wir eine reine Funktion definiert, die den entsprechenden Werttyp des Array -Elements nimmt und den gleichen Typ zurückgibt. Wir können den Namen der Funktion als Bedingung direkt an die Filtermethode übergeben.

(Umfrageinhalte in Bezug auf map, reduce und Kettenaufrufe fügen Sie ihn aufgrund von Platzbeschränkungen nach dem Originaltext hinzu.) Verwalten Sie die Bilder und das Format des Originaltextes.

Das obige ist der detaillierte Inhalt vonFilterung und Verkettung im funktionalen JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!