Das Buch „Expressive JavaScript. Moderne Webprogrammierung. 3. Auflage

Hallo habrozhiteli! In diesem Buch können Sie tief in das Thema eintauchen und lernen, wie man schönen und effektiven Code schreibt. Sie lernen Syntax, Pfeil- und asynchrone Funktionen, Iterator, Musterzeichenfolgen und Blockbereich kennen.

Marein Haverbeke - Praktizierende. Sammeln Sie Erfahrungen und lernen Sie die Sprache anhand einer Vielzahl von Beispielen durch Übungen und Trainingsprojekte. Zunächst werden Sie mit der Struktur der JavaScript-Sprache vertraut gemacht, Strukturen, Funktionen und Datenstrukturen verwalten, dann Fehlerbehandlung und Fehlerbehebungen, Modularität und asynchrone Programmierung untersuchen und dann mit der Browserprogrammierung fortfahren.

Überprüfen Sie dieses Buch

Dieses Buch ist in drei große Teile gegliedert. In den ersten 12 Kapiteln wird die JavaScript-Sprache erläutert. In den nächsten sieben Kapiteln geht es um Browser und wie sie mit JavaScript programmiert werden. Schließlich sind zwei Kapitel Node.js gewidmet, einer anderen JavaScript-Programmierumgebung.

Im gesamten Buch werden Sie fünf Kapitel von Projekten kennenlernen, in denen größere Beispiele für Programme beschrieben werden, damit Sie den Geschmack einer echten Programmierung spüren können. In der Reihenfolge ihres Auftretens werden wir daran arbeiten, einen Bereitstellungsroboter, eine Programmiersprache, eine Spieleplattform, einen Raster-Grafikeditor und eine dynamische Site zu erstellen.

Der sprachliche Teil des Buches beginnt mit vier Kapiteln, die Sie in die Grundstruktur der JavaScript-Sprache einführen. Sie lernen Kontrollstrukturen (wie das Schlüsselwort while, das Sie bereits in der Einführung gesehen haben), Funktionen (Schreiben eigener Bausteine) und Datenstrukturen kennen. Danach können Sie die einfachsten Programme schreiben. Darüber hinaus wird in den Kapiteln 5 und 6 beschrieben, wie Funktionen und Objekte verwendet werden, um abstrakteren Code zu schreiben und dessen Komplexität zu steuern.

Nach dem Kapitel des ersten Projekts wird der sprachliche Teil des Buches fortgesetzt. Die folgenden Kapitel befassen sich mit der Erkennung und Korrektur von Fehlern, regulären Ausdrücken (ein wichtiges Werkzeug für die Arbeit mit Text), Modularität (eine weitere Verteidigung gegen Komplexität) und asynchroner Programmierung (Arbeit mit Ereignissen, die für einige von Dauer sind Zeit). Der erste Teil des Buches wird durch das Kapitel des zweiten Entwurfs vervollständigt.

Der zweite Teil, Kapitel 13 bis 19, beschreibt die Tools, auf die ein JavaScript-fähiger Browser Zugriff hat. Sie lernen, wie Sie Elemente auf dem Bildschirm anzeigen (Kapitel 14 und 17), auf Benutzereingaben reagieren (Kapitel 15) und diese über das Netzwerk freigeben (Kapitel 18). Dieser Teil enthält auch zwei Kapitel von Projekten.

Danach wird Node.js in Kapitel 20 beschrieben und eine kleine Site in Kapitel 21 mit dem angegebenen Tool erstellt.

Auszug. Summation mit reduzieren

Eine andere häufige Sache, die häufig mit Arrays gemacht wird, ist die Berechnung eines einzelnen Werts basierend auf diesen. Ein Sonderfall hierfür ist das Beispiel, das wir bereits für die Summierung einer Reihe von Zahlen verwendet haben. Ein weiteres Beispiel ist das Finden der Schriftart mit den meisten Zeichen.

Eine Operation höherer Ordnung, die dieses Muster implementiert, wird als Kurzform (manchmal auch als Faltung bezeichnet) bezeichnet. Diese Operation erstellt den Wert, indem wiederholt ein Element aus dem Array abgerufen und mit dem aktuellen Wert kombiniert wird. Wenn wir die Zahlen summieren, beginnen wir bei Null und addieren dann jedes nachfolgende Element zur Summe.

Die Parameter der Reduktionsfunktion sind zusätzlich zum Array eine Kombinationsfunktion und ein Anfangswert. Diese Funktion ist etwas komplizierter als Filter und Map. Schauen Sie sie sich also genauer an:

function reduce(array, combine, start) { let current = start; for (let element of array) { current = combine(current, element); } return current; } console.log(reduce([1, 2, 3, 4], (a, b) => a + b, 0)); // → 10 

Die Standardmethode zum Arbeiten mit reduzierten Arrays, die natürlich dieser Funktion entspricht, bietet zusätzlichen Komfort. Wenn das Array mindestens ein Element enthält, können Sie das Startargument weglassen. Die Methode wählt das erste Element des Arrays als Anfangswert aus und beginnt mit der Reduzierung ab dem zweiten Element.

 console.log([1, 2, 3, 4].reduce((a, b) => a + b)); // → 10 

Um mit reduz (zweimal) die Schriftart mit den meisten Zeichen zu finden, können wir Folgendes schreiben:

 function characterCount(script) { return script.ranges.reduce((count, [from, to]) => { return count + (to — from); }, 0); } console.log(SCRIPTS.reduce((a, b) => { return characterCount(a) < characterCount(b) ? b : a; })); // → {name: "Han", ...} 

Die CharacterCount-Funktion reduziert die dieser Schriftart zugewiesenen Bereiche, indem sie die Summe ihrer Größen berechnet. Achten Sie auf die Verwendung der Destrukturierung in der Liste der Parameter der Reduktionsfunktion. Beim zweiten Aufruf zum Reduzieren wird das vorherige Ergebnis verwendet, um die größte Schriftart zu finden. Dabei werden die beiden Schriftarten wiederholt verglichen und die größere zurückgegeben.

Der Han-Schriftart sind im Unicode-Standard über 89.000 Zeichen zugewiesen. Damit ist sie das größte Schriftsystem in unserem Datensatz. Han ist eine Schriftart, die manchmal für chinesische, japanische und koreanische Texte verwendet wird. Ihre Sprachen haben viele gemeinsame Zeichen, obwohl sie unterschiedlich geschrieben sind. Das Unicode-Konsortium (in den USA ansässig) hat beschlossen, solche Zeichen als ein einziges Aufzeichnungssystem zu betrachten, um Zeichencodes zu speichern. Dies nennt man Han-Vereinigung und ist für manche Menschen immer noch sehr ärgerlich.

Zusammensetzbarkeit

Denken wir mal: Wie könnten wir das vorherige Beispiel (die größte Schriftart finden) ohne Funktionen höherer Ordnung umschreiben? Der folgende Code ist nicht viel schlimmer.

 let biggest = null; for (let script of SCRIPTS) { if (biggest == null || characterCount(biggest) < characterCount(script)) { biggest = script; } } console.log(biggest); // → {name: "Han", ...} 

Es erschienen mehrere zusätzliche Bindungen, und das Programm wurde vier Zeilen länger. Aber dieser Code ist immer noch ziemlich klar.

Funktionen höherer Ordnung sind sehr nützlich, wenn Sie Operationen erstellen müssen. Als Beispiel schreiben wir einen Code, der das durchschnittliche Jahr der Erstellung von Schriftarten lebender und toter Sprachen in einem Datensatz berechnet.

 function average(array) { return array.reduce((a, b) => a + b) / array.length; } console.log(Math.round(average( SCRIPTS.filter(s => s.living).map(s => s.year)))); // → 1188 console.log(Math.round(average( SCRIPTS.filter(s => !s.living).map(s => s.year)))); // → 188 

Daher sind Skripte toter Sprachen in Unicode im Durchschnitt älter als Skripte lebender Sprachen.

Dies sind keine besonders signifikanten oder überraschenden Statistiken. Aber Sie stimmen hoffentlich zu, dass der zur Berechnung verwendete Code leicht zu lesen ist. Dies kann man sich als Förderer vorstellen: Wir analysieren zunächst alle Schriftarten, filtern die Lebenden (oder Toten) heraus, nehmen die Jahre ihrer Erstellung, berechnen den Durchschnittswert und runden das Ergebnis ab.

Diese Berechnung könnte auch als ein großer Zyklus dargestellt werden.

 let total = 0, count = 0; for (let script of SCRIPTS) { if (script.living) { total += script.year; count += 1; } } console.log(Math.round(total / count)); // → 1188 

In diesem Code ist es jedoch schwieriger zu verstehen, was und wie berechnet wird. Und da die Zwischenergebnisse nicht als konsistente Werte dargestellt werden, müsste viel mehr Arbeit geleistet werden, um so etwas wie den Durchschnitt in eine separate Funktion zu trennen.

In Bezug auf die tatsächliche Funktionsweise des Computers unterscheiden sich diese beiden Ansätze ebenfalls grundlegend. Der erste erstellt neue Arrays, wenn Filter und Map ausgeführt werden, während der zweite nur einige Zahlen berechnet und weniger Arbeit erledigt. Normalerweise können Sie sich eine besser lesbare Option leisten. Wenn Sie jedoch sehr große Arrays verarbeiten und mehrmals ausführen müssen, kann ein weniger abstrakter Stil zu einem zusätzlichen Geschwindigkeitsgewinn führen.

Zeichenfolgen und Zeichencodes

Eine Verwendung von Datensätzen besteht darin, zu bestimmen, in welche Schriftart ein bestimmtes Textstück eingegeben wird. Schauen wir uns ein Programm an, das dies tut.

Denken Sie daran, dass es für jede Schriftart ein Array von Zeichencodebereichen gibt. Wenn wir den Zeichencode kennen, können wir die folgende Funktion verwenden, um die entsprechende Schriftart (falls vorhanden) zu finden:

 function characterScript(code) { for (let script of SCRIPTS) { if (script.ranges.some(([from, to]) => { return code >= from && code < to; })) { return script; } } return null; } console.log(characterScript(121)); // → {name: "Latin", ...} 

Die Methode some ist eine weitere Funktion höherer Ordnung. Es nimmt eine Testfunktion und meldet, ob es für ein Element des Arrays true zurückgibt.

Aber wie bekommen wir Zeichencodes als Zeichenfolge?

In Kapitel 1 habe ich erwähnt, dass Zeichenfolgen in JavaScript als Sequenzen von 16-Bit-Zahlen dargestellt werden. Dies sind die sogenannten Codeeinheiten. Anfangs wurde angenommen, dass in Unicode der Zeichencode in einem solchen Block platziert wird (was etwas mehr als 65.000 Zeichen ergibt). Als klar wurde, dass dies nicht ausreichte, lehnten viele die Notwendigkeit ab, mehr Speicher zum Speichern eines Zeichens zu verwenden. Um dieses Problem zu lösen, wurde das in JavaScript-Strings verwendete UTF-16-Format erfunden. Darin belegen die häufigsten Zeichen eine 16-Bit-Codeeinheit und der Rest zwei Codeeinheiten.

Heute ist allgemein anerkannt, dass UTF-16 eine schlechte Idee war. Es scheint geschaffen zu sein, um Fehler zu erzeugen. Sie können leicht ein Programm schreiben, für das die Codeeinheiten und Zeichen ein und dasselbe sind. Und wenn Ihre Muttersprache keine Zeichen verwendet, die zwei Codeeinheiten belegen, funktioniert dieses Programm einwandfrei. Sobald jedoch jemand versucht, ein solches Programm für ein weniger verbreitetes Alphabet zu verwenden, beispielsweise für chinesische Schriftzeichen, wird es sofort unterbrochen. Glücklicherweise wurden nach dem Aufkommen von Emoticons überall zwei Codeeinheiten für die Zeichenkodierung verwendet, und die Last der Lösung solcher Probleme wurde gerechter verteilt.

Leider behandeln offensichtliche Operationen mit JavaScript-Zeichenfolgen, z. B. das Abrufen ihrer Länge über die Eigenschaft length und der Zugriff auf deren Inhalt in eckigen Klammern, nur Codeeinheiten.



Die JavaScript-Methode charCodeAt gibt nicht den vollständigen Zeichencode zurück, sondern eine Codeeinheit. Die später angezeigte codePointAt-Methode gibt das vollständige Unicode-Zeichen zurück. Wir könnten dies also verwenden, um Zeichen aus einer Zeichenfolge abzurufen. Das an codePointAt übergebene Argument ist jedoch immer noch ein Index in einer Folge von Codeeinheiten. Um also alle Zeichen in einer Zeichenfolge zu durchlaufen, müssen wir noch die Frage lösen, ob eine oder zwei Codeeinheiten ein Zeichen belegen.

Im vorherigen Kapitel habe ich erwähnt, dass die for / of-Schleife auch für Zeichenfolgen verwendet werden kann. Wie codePointAt trat diese Art von Schleife zu einer Zeit auf, als Programmierer die Probleme von UTF-16 klar erkannten. Wenn Sie diese Schleife auf eine Zeichenfolge anwenden, werden echte Zeichen und keine Codeeinheiten angegeben.



Wenn Sie ein Zeichen haben (das eine Zeichenfolge aus einer oder zwei Codeeinheiten ist), können Sie codePointAt (0) verwenden, um den Code abzurufen.

Texterkennung

Wir haben eine CharacterScript-Funktion und eine Möglichkeit, Zeichen in einer Schleife korrekt aufzulisten. Der nächste Schritt besteht darin, die Anzahl der Zeichen zu zählen, die zu jeder Schriftart gehören. Hier brauchen wir eine Zählabstraktion:

 function countBy(items, groupName) { let counts = []; for (let item of items) { let name = groupName(item); let known = counts.findIndex(c => c.name == name); if (known == -1) { counts.push({name, count: 1}); } else { counts[known].count++; } } return counts; } console.log(countBy([1, 2, 3, 4, 5], n => n > 2)); // → [{name: false, count: 2}, {name: true, count: 3}] 

Die countBy-Funktion akzeptiert eine Sammlung (alles, was in einer for / of-Schleife sortiert werden kann) und eine Funktion, die den Gruppennamen für ein bestimmtes Element berechnet. Die Funktion countBy gibt ein Array von Objekten zurück, von denen jedes den Namen der Gruppe und die Anzahl der dafür gefundenen Elemente enthält.

Diese Funktion verwendet eine andere Methode zum Arbeiten mit Arrays - findIndex. Diese Methode ähnelt indexOf, sucht jedoch nicht nach einem bestimmten Wert, sondern findet den ersten Wert, für den die angegebene Funktion true zurückgibt. Wenn das Element nicht gefunden wird, gibt findIndex wie indexOf –1 zurück.

Mit countBy können wir eine Funktion schreiben, die angibt, welche Schriftarten in diesem Text verwendet wurden.



Die Funktion zählt Zeichen zuerst nach Schriftartnamen und gibt ihnen mit CharacterScript einen Namen. Für Zeichen, die keiner Schriftart angehören, wird die Zeichenfolge "none" zurückgegeben. Durch das Aufrufen des Filters wird der Eintrag "none" aus dem resultierenden Array entfernt, da wir nicht an diesen Zeichen interessiert sind.

Um Prozentsätze berechnen zu können, müssen wir zuerst die Gesamtzahl der Zeichen ermitteln, die zu der Schriftart gehören, die wir mit der Reduzierungsmethode berechnen können. Wenn keine solchen Zeichen gefunden werden, gibt die Funktion eine bestimmte Zeichenfolge zurück. Andernfalls werden die Zählergebnisse mithilfe von map in lesbare Zeichenfolgen konvertiert und anschließend mithilfe von join kombiniert.

Zusammenfassung

Die Möglichkeit, Funktionswerte an andere Funktionen zu übergeben, ist ein sehr nützlicher Aspekt von JavaScript. Auf diese Weise können Sie Funktionen erstellen, die Berechnungen mit Leerzeichen simulieren. Wenn anschließend solche Funktionen im Code aufgerufen werden, werden diese „Lücken“ mit Funktionswerten gefüllt.

Für Arrays gibt es eine Reihe nützlicher Methoden höherer Ordnung. Die forEach-Methode kann verwendet werden, um die Elemente eines Arrays zu durchlaufen. Die Filtermethode gibt ein neues Array zurück, das nur Elemente enthält, die die Bedingung der Prädikativfunktion erfüllen. Die Array-Konvertierung durch Ausführen einer Funktion für jedes Element erfolgt mithilfe von map. Um alle Elemente eines Arrays zu einem einzigen Wert zu kombinieren, können Sie Reduzieren verwenden. Die Methode some prüft, ob ein Element mit einer bestimmten Prädikativfunktion übereinstimmt. Schließlich findet die findIndex-Methode die Position des ersten Elements, das dem Prädikat entspricht.

»Weitere Informationen zum Buch finden Sie auf der Website des Herausgebers
» Inhalt
» Auszug

25% Rabatt auf Gutschein für Händler - JavaScript
Nach Bezahlung der Papierversion des Buches wird ein elektronisches Buch per E-Mail verschickt.