5 JavaScript-fehlerhafte Teile, die in ES6 behoben wurden

ECMAScript 6 (ES6) -Funktionen können in Funktionen unterteilt werden, die reinen syntaktischen Zucker enthalten (wie: Klasse ), Funktionen, die JavaScript verbessern (wie Import ), und Funktionen, die einige der „schlechten“ Teile von JavaScript beheben (wie das Schlüsselwort let ). Die meisten Blogs und Artikel kombinieren alle drei Typen und können Neulinge überwältigen. Ich schreibe diesen Beitrag, der sich nur auf die wichtigsten ES6-Funktionen konzentriert, mit denen „schlechte“ Teile behoben werden.

Ich hoffe, dass Sie am Ende dieses Blogs feststellen werden, dass Sie mit nur ein paar ES6-Funktionen wie let und dem Fat-Arrow massive Renditen erzielen.

OK, fangen wir an.

1. Block Scope

ES5 hatte nur einen Bereich auf Funktionsebene (dh Sie wickeln Code in Funktionen ein, um einen Bereich zu erstellen) und verursachte viele Probleme. ES6 bietet ein "Scope" -Level-Scoping (dh geschweifte Klammern zum Scope), wenn wir " let " oder " const " anstelle von " var " verwenden.

Verhindern Sie das variable Heben außerhalb des Anwendungsbereichs

Das folgende Bild zeigt, dass die Variable "Bonus" nicht außerhalb des "Wenn" -Blocks angehoben wird, sodass sie wie die meisten Programmiersprachen funktioniert.

Hinweis: Sie können auf die Bilder klicken, um sie zu vergrößern und zu lesen

Verhindern Sie die Deklaration doppelter Variablen

ES6 erlaubt keine doppelte Deklaration von Variablen, wenn wir sie mit "let" oder "const" im selben Bereich deklarieren . Dies ist sehr hilfreich, um doppelte Funktionsausdrücke aus verschiedenen Bibliotheken zu vermeiden (wie der Funktionsausdruck „add“ unten).

Beseitigt die Notwendigkeit für IIFE

In ES5 mussten wir in den folgenden Fällen den sofort aufgerufenen Funktionsausdruck (IIFE) verwenden, um sicherzustellen, dass der globale Bereich nicht verschmutzt oder überschrieben wird. In ES6 können wir nur geschweifte Klammern ({}) verwenden und const oder let verwenden , um den gleichen Effekt zu erzielen.

babel - Ein Tool zum Konvertieren von ES6 in ES5

Wir müssen ES6 letztendlich in einem normalen Browser ausführen. Babel ist das beliebteste Tool zur Konvertierung von ES6 in ES5. Es verfügt über verschiedene Schnittstellen wie eine CLI, ein Knotenmodul und auch einen Online-Konverter. Ich verwende das Knotenmodul für meine Apps und verwende die Online-Version, um die Unterschiede schnell zu erkennen. Das folgende Bild zeigt, wie Babel die Variablen umbenennt, um "let" und "const" zu simulieren!

Es ist trivial, Funktionen in Schleifen zu verwenden

Wenn Sie in ES5 eine Funktion in einer Schleife hätten (wie für (var i = 0; i <3; i ++) {…}) und diese Funktion versucht hätte, auf die Schleifenvariable „i“ zuzugreifen, wären wir dabei Ärger wegen Heben. Wenn Sie in ES6 " let" verwenden, können Sie Funktionen ohne Probleme verwenden.

Hinweis: Sie können const nicht verwenden, da es konstant ist, es sei denn, Sie verwenden die neue for..of-Schleife.

2. Lexikalisches "dies" (über Pfeilfunktionen)

In ES5 kann "dies" variieren, je nachdem, wo es aufgerufen wird und sogar wie, wie es aufgerufen wird, und hat JS-Entwicklern alle möglichen Schmerzen bereitet. ES6 beseitigt dieses Hauptproblem, indem es dies „lexikalisch“ macht.

Lexikalisch "dies" ist eine Funktion, die die Variable "dies" zwingt, immer auf das Objekt zu zeigen, in dem sie sich physisch befindet.

Das Problem und zwei Problemumgehungen in ES5:

Im folgenden Bild versuchen wir, den Vornamen und das Gehalt eines Benutzers auszudrucken. Aber wir bekommen das Gehalt vom Server (simuliert). Beachten Sie, dass bei der Antwort "dies" "Fenster" anstelle des Objekts "Person" ist.

Die Lösung in ES6

Verwenden Sie einfach die Fettpfeil-Funktion => und Sie erhalten das lexikalische "dies" automatisch .

Das folgende Bild zeigt, wie Babel die Fettpfeilfunktion in eine reguläre ES5-Funktion mit Problemumgehung umwandelt, sodass sie in aktuellen Browsern funktioniert.

3. Umgang mit „Argumenten“

In ES5 verhalten sich „Argumente“ wie ein Array (dh wir können es durchlaufen), sind jedoch kein Array. Daher sind nicht alle Array-Funktionen wie Sortieren, Slice usw. verfügbar.

In ES6 können wir eine neue Funktion namens "Rest" -Parameter verwenden. Es wird mit 3 Punkten und einem Namen wie ... args dargestellt. Restparameter sind ein Array und daher können wir alle Array-Funktionen verwenden.

4. Klassen

Konzeptionell gibt es in JS keine „Klasse“ (dh Blaupause) wie in anderen OO-Sprachen wie Java. Aber Menschen haben lange Zeit die "Funktion" (auch bekannt als "Funktionskonstruktoren") behandelt, die Objekte erstellt, wenn wir das Schlüsselwort "neu" als Klassen verwenden.

Und da JS die „Klassen“ nicht unterstützt und sie nur über „Prototypen“ simuliert, war die Syntax sowohl für bestehende JS-Entwickler als auch für Neueinsteiger, die sie auf traditionelle OO-Weise verwenden möchten, sehr verwirrend. Dies gilt insbesondere für Dinge wie: Erstellen von Unterklassen, Aufrufen von Funktionen in der übergeordneten Klasse usw.

ES6 bringt eine neue Syntax mit, die in verschiedenen Programmiersprachen üblich ist und das Ganze einfach macht. Das folgende Bild zeigt einen direkten Vergleich der ES5- und ES6-Klassen.

Hinweis: Sie können auf das Bild klicken, um es zu vergrößern und zu lesen. UPDATE: Lesen Sie unbedingt: Ist „Klasse“ in ES6 der neue „schlechte“ Teil? (danach)

5. Strenger Modus

Der strikte Modus („strikt verwenden“) hilft beim Erkennen häufiger Probleme (oder „schlechter“ Teile) und beim „Sichern“ von JavaScript. In ES5 ist der Strict-Modus optional, in ES6 wird er jedoch für viele ES6-Funktionen benötigt. Daher fügen die meisten Leute und Tools wie babel automatisch "use strict" am Anfang der Datei hinzu, wodurch der gesamte JS-Code in den strengen Modus versetzt wird und wir gezwungen werden, besseres JavaScript zu schreiben.

Das ist es! ?

Wenn dies nützlich war, klicken Sie bitte auf das Klatschen. Klicken Sie einige Male unten, um Ihre Unterstützung zu zeigen! ⬇⬇⬇ ??

Meine anderen Beiträge

//medium.com/@rajaraodv/latest

ECMAScript 2015+

  1. Lesen Sie diese nützlichen Tipps und Tricks zu ECMAScript 2015 (ES6)
  2. 5 JavaScript-fehlerhafte Teile, die in ES6 behoben wurden
  3. Ist "Klasse" in ES6 der neue "schlechte" Teil?

Terminalverbesserungen

  1. So bringen Sie Ihr Terminal auf Vordermann - Eine Schritt-für-Schritt-Anleitung mit Bildern
  2. In sieben Schritten können Sie Ihr „ZSH“ -Terminal aufpeppen - eine visuelle Anleitung

WWW

  1. Eine faszinierende und chaotische Geschichte des Web und JavaScript

Virtuelles DOM

  1. Innenleben des virtuellen DOM

Leistung reagieren

  1. Zwei schnelle Möglichkeiten, um die Größe der React App in der Produktion zu reduzieren
  2. Verwenden von Preact statt React

Funktionale Programmierung

  1. JavaScript ist vollständig - erklärt
  2. Funktionsprogrammierung in JS - mit praktischen Beispielen (Teil 1)
  3. Funktionsprogrammierung in JS - mit praktischen Beispielen (Teil 2)
  4. Warum Redux Reduzierstücke brauchen, um „reine Funktionen“ zu sein

WebPack

  1. Webpack - Die verwirrenden Teile
  2. Austausch von Webpack und Hot Module [HMR] (unter der Haube)
  3. HMR und React-Hot-Loader von Webpack - Das fehlende Handbuch

Draft.js

  1. Warum Draft.js und warum Sie dazu beitragen sollten
  2. Wie Draft.js Rich-Text-Daten darstellt

Reagieren und reduzieren:

  1. Schritt-für-Schritt-Anleitung zum Erstellen von React Redux-Apps
  2. Ein Leitfaden zum Erstellen einer React Redux CRUD-App (3-seitige App)
  3. Verwenden von Middlewares in React Redux-Apps
  4. Hinzufügen einer robusten Formularvalidierung zur Reaktion auf Redux-Apps
  5. Sichern von React Redux-Apps mit JWT-Token
  6. Umgang mit Transaktions-E-Mails in React Redux-Apps
  7. Die Anatomie einer React Redux App
  8. Warum Redux Reduzierstücke brauchen, um „reine Funktionen“ zu sein
  9. Zwei schnelle Möglichkeiten, um die Größe der React App in der Produktion zu reduzieren

Wenn dies nützlich war, klicken Sie bitte auf das Klatschen. Klicken Sie einige Male unten, um Ihre Unterstützung zu zeigen! ⬇⬇⬇ ??