Standardparameter in ES6
Wenn wir Module schreiben, müssen wir Fälle berücksichtigen, in denen die Argumente weggelassen werden. Mit anderen Worten, gute Module müssen intelligent genug sein, um Standardwerte für Parameter zu haben. In ES5 würden Sie so etwas wie den folgenden Code schreiben, der das logische OR (||):
Diese Anweisungen funktionieren mit Ausnahme der Randfälle gut. Wenn der Wert beispielsweise 0 ist — und weil 0 in JavaScript falsch ist -, verwendet die Bedingung standardmäßig den fest codierten Wert, anstatt der Wert selbst zu werden, wie Sie es in einigen Fällen wünschen., Natürlich, wer braucht 0 als Wert (#sarcasmfont), also haben wir diesen Fehler einfach ignoriert und die Logik ODER sowieso verwendet…
Oder vielleicht sogar eine if/else-Bedingung, um nach dem undefinierten Wert zu suchen:
var getAccounts = function(limit) {
if (typeof limit == 'undefined') limit = 10
...
}
Nicht mehr! In ES6 können wir die Standardwerte wie folgt in die Signatur der Funktionen einfügen:
var getAccounts = function(limit = 10) {
...
}
var link = function(height = 50, color = 'red', url = 'http://capitalone.io') {
...
}
Dies verwendet nicht nur weniger Codezeilen, sondern hat auch eine erhöhte Lesbarkeit. Diese Syntax ähnelt übrigens Ruby und Python!,
Rest-und Spread-Parameter in ES6
Wenn Sie jemals eine JavaScript-Funktion mit einer Variablen oder sogar einer unbegrenzten Anzahl von Argumenten verwendet oder geschrieben haben, kennen Sie das Argumentobjekt. Dieses Objekt enthält alle an die Funktion übergebenen Parameter. Das Problem ist, dass dieses arguments Objekt kein echtes Array ist. Sie müssen es in ein Array konvertieren, wenn Sie Funktionen wie sort oder map explizit verwenden möchten. Zum Beispiel konvertiert diese Anforderungsfunktion Argumente mit call ():
Gibt es also eine bessere Möglichkeit in ES6, auf eine unbestimmte Anzahl von Argumenten als Array zuzugreifen? Ja!, Es ist Rest-Parameter-Syntax und es ist mit Ellipsen definiert …. Dies ist beispielsweise die ES6-Funktionssignatur mit den Rest-Parameterrückrufen, die zu einem Array mit den übrigen Parametern werden:
function(url, options, ...callbacks) {
var callback1 = callbacks
var callback2 = callbacks
// ...
}
Hinweis: Im Rest-Array ist der erste Parameter derjenige, der keinen Namen hat, z. B. befindet sich der Rückruf im Index 0, nicht 2 wie in den Argumenten von ES5. Das Einfügen anderer benannter Argumente nach dem rest-Parameter führt außerdem zu einem Syntaxfehler. Der rest-Parameter ist eine großartige Ergänzung zu JavaScript, da er das arguments-Objekt ersetzt, das kein echtes Array war.,
Wenn Sie in ES5 ein Array als Argument für eine Funktion verwenden möchten, müssen Sie die Funktion apply() verwenden:
function request(url, options, callback) {
// ...
}
var requestArgs =
request.apply(null, requestArgs)
Jetzt können wir in ES6 die Spread-Parameter verwenden, die den Rest-Parametern in der Syntax ähnlich aussehen, da sie Ellipsen verwenden…:
function request(url, options, callback) {
// ...
}
var requestArgs =
request(...requestArgs)
ES6 Entwickler können den Spread-Operator in den folgenden Fällen verwenden:
p>
Der Spread-Operator hat eine ähnliche Syntax wie die Rest-Parameter, aber rest wird in der Funktionsdefinition/Deklaration verwendet und spread wird in den Aufrufen und Literalen verwendet., Sie ersparen Entwicklern die Eingabe zusätzlicher Zeilen zwingenden Codes, daher ist es eine gute Fähigkeit, sie zu kennen und zu verwenden.
Vorlagenliterale in ES6
Vorlagenliterale (oder Interpolationen, wie sie in anderen Sprachen bekannt sind) sind eine Möglichkeit, Variablen in der Zeichenfolge auszugeben, die mit etwas Text gemischt ist, normalerweise in Benutzeroberflächen. In ES5 mussten wir die Saite so brechen.,
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id
Glücklicherweise können wir in ES6 eine neue Syntax ${NAME} innerhalb der zurück angekreuzten Zeichenfolge verwenden:
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
Dies ist ordentlich und ermöglicht es Entwicklern, das Endergebnis der Zeichenfolgen auf einen Blick zu sehen, anstatt zu versuchen, den Verkettungsausdruck auszuwerten.
ES6-Zeichenfolgenvorlagen sind gut, aber die Syntax führt zu Konflikten in der Markdown-Dokumentation, wenn Sie Zeichenfolgenvorlagen und Inline-Code-Markup verwenden (da in Markdown Inline-Code auch durch Back-Ticks gekennzeichnet ist)., Übrigens hat CoffeeScript meiner Meinung nach eine bessere Lösung, wenn es doppelt gelöschte Zeichenfolgen interpoliert (ähnlich wie Ruby):
var name = "Your name is #{first} #{last}."
var url = "http://localhost:3000/api/messages/#{id}"
Interpolation ist gut, aber wie arbeiten Sie mit mehrzeiligem Text in JavaScript?
Mehrzeilige Zeichenfolgen in ES6
Eine weitere leckere syntaktische Zuckerbeschichtung ist mehrzeilige Zeichenfolge. In ES5 mussten wir einen dieser Ansätze verwenden und es war hässlich., Mit Verkettung:
Oder mit Escape slash:
var fourAgreements = 'You have the right to be you.\n\
You can only be you when you do your best.'
Verwenden Sie in ES6 einfach die Backticks wie folgt:
var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`
var fourAgreements = `You have the right to be you.
You can only be you when you do your best.`
Mehrzeilige Zeichenfolgen sind eine nützliche Ergänzung, wenn Sie viel Text in Ihrem JavaScript-Code verwenden müssen.,
Destrukturierungszuweisung in ES6
Destrukturierung kann ein schwierigeres Konzept sein als mehrzeilige Zeichenfolgen, da hinter den Kulissen etwas Magie vor sich geht… Nehmen wir an, Sie haben einfache Zuweisungen, bei denen Schlüssel userId und AccountNumber Variablen sind userId und AccountNumber:
var data = $('body').data(), // data has properties
userId and accountNumber userId = data.userId, accountNumber = data.accountNumber
Andere Beispiele für Zuweisungen, bei denen die Namen der Variablen und Objekteigenschaften gleich sind:
In ES6 können wir die ES5 ersetzen.code oben mit diesen Anweisungen:
var { userId, accountNumber} = $('body').data()
var {json} = require('body-parser')
var {username, password} = req.body
Dies funktioniert auch mit Arrays. Verrückt!,
var = $('.column'),
= file.split('\n')
Es kann einige Zeit dauern, bis man sich an die destrukturierende Zuweisungssyntax gewöhnt hat, aber es ist trotzdem eine süße Zuckerbeschichtung.
Erweiterte Objektliterale in ES6
Was Sie mit Objektliteralen in ES6 tun können, ist umwerfend! Wir gingen von einer verherrlichten Version von JSON in ES5 zu etwas, das Klassen in ES6 sehr ähnlich ist.
In der Unternehmensentwicklung ist die Code-Modularisierung wichtig, da Projekte größer sind und eine größere Anzahl beweglicher Teile aufweisen. Mit erweiterten Objektliteralen können Sie wirklich starke Objekte erstellen, die mit Funktionalität geladen sind.,
Hier ist ein typisches ES5-Objektliteral mit einigen Methoden und Attributen/Eigenschaften:
Wenn wir schick sein möchten, können wir von ServiceBase erben, indem wir es zum Prototyp mit dem Objekt machen.methode erstellen:
Ich weiß, accountServiceES5ObjectCreate und accountServiceES5 sind NICHT völlig identisch, da ein Objekt (accountServiceES5) die Eigenschaften im __proto__ – Objekt hat, wie in der folgenden Abbildung gezeigt:
Aber für dieses Beispiel betrachten wir sie ähnlich., In ES6-Objektliteralen können wir Kurznamen für die Zuweisung verwenden. Zum Beispiel getAccounts: getAccounts, wird nur getAccounts.
Außerdem können wir super aufrufen und dynamische Schlüssel haben. Beispielsweise gibt die Methode toString() ein JSON-Objekt als Zeichenfolge zurück, indem super aufgerufen wird.valueOf () und valueOf_1_2_3 ist ein dynamischer Eigenschaftsname:
Dies ist eine großartige Erweiterung für gute alte Objektliterale, da Entwickler mehr Logik packen und mehr Dinge tun können als mit ES5-Objekten!,
Pfeilfunktionen in ES6
Dies ist wahrscheinlich die Funktion, auf die ich am meisten gewartet habe. Ich liebte CoffeeScript wegen seiner fetten Pfeile. Jetzt haben wir Sie in ES6.
Die fetten Pfeile sind erstaunlich, weil sie dazu führen würden, dass sich Ihr this richtig verhält, dh dies hat den gleichen Wert wie im Kontext der Funktion — es mutiert nicht wie normalerweise bei jedem Erstellen eines Abschlusses. Dieses Verhalten war einer der schlimmsten Teile von JavaScript und verursachte oft viel Verwirrung bei Entwicklern, die neu in der Sprache sind., Die Verwendung dieser Funktionen in ES6 ermöglicht es uns, die Verwendung von that = this oder self = this oder _this = this oder einzustellen .binden(dies).
Dieser Code in ES5 ist beispielsweise hässlich, da Sie vergessen können, den Kontext mit _this:
var _this = this
$('.btn').click(function(event){
_this.sendData()
})
Die bind () – oder call () – Ansätze sind aufgrund ihrer Ausführlichkeit nicht viel besser. Aber schauen Sie sich diesen hübschen ES6-Code an:
$('.btn').click((event) =>{
this.sendData()
})
Leider entschied das ES6-Komitee, dass das Ausleihen von skinny arrows aus CoffeeScript zu viel von einer guten Sache war und ließ uns stattdessen eine lange alte Funktion., (Der Pfeil in CoffeeScript funktioniert wie eine reguläre Funktion in ES5 und ES6).
Hier ist ein weiteres Beispiel, in dem wir den Aufruf verwenden, um den Kontext an die Funktion logUpperCase() in ES5 zu übergeben:
Während wir in ES6 nicht mit _this:
herumspielen müssen Beachten Sie, dass Sie die alte Funktion nach Belieben mischen und mit => in ES6 abgleichen können. Und wenn eine Pfeilfunktion mit einer einzeiligen Anweisung verwendet wird, wird sie zu einem Ausdruck; dh,. es wird implizit das Ergebnis dieser einzelnen Anweisung zurückgegeben. Wenn Sie mehr als eine Zeile haben, müssen Sie return explizit verwenden.,
Dieser ES5-Code erstellt ein Array aus dem Nachrichtenarray:
Wird dies in ES6:
var ids =
var messages = ids.map(value => `ID is ${value}`) // implicit return
Beachten Sie, dass ich die Zeichenfolgenvorlagen verwendet habe. Ein weiteres Feature von CoffeeScript… ich liebe sie!
Die Klammern () sind optional für einzelne Parameter in einer Pfeilfunktionssignatur. Sie benötigen sie jedoch, wenn Sie mehr als einen Parameter verwenden. In ES5 hat der Code eine Funktion mit expliziter Rückgabe:
Jetzt ist hier eine beredtere Version des Codes in ES6 mit Klammern um Parameter und impliziter Rückgabe:
Sind fette Pfeile nicht großartig? Benutze sie.,
Versprechen in ES6
Versprechen waren ein kontroverses Entwicklungsthema, insbesondere in größeren Organisationen, in denen es schwieriger sein kann, sich auf einen gemeinsamen Ansatz zu einigen. Ein Grund dafür ist die Anzahl der Promise — Implementierungen, die etwas andere Syntaxen verwenden-Q, Bluebird, deferred.
Glücklicherweise besteht die Möglichkeit, dass sich die Debatten beruhigen, wenn die Standard-Promise-Implementierung zu ES6 hinzugefügt wird!,
Betrachten wir ein eher triviales Beispiel für eine verzögerte asynchrone Ausführung mit setTimeout():
setTimeout(function(){ console.log('Yay!') }, 1000)
Wir können diesen Code in ES6 mit Versprechen neu schreiben:
var wait1000 = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
}).then(function() {
console.log('Yay!')
})
Oder mit ES6-Pfeilfunktionen:
var wait1000 = new Promise((resolve, reject)=> {
setTimeout(resolve, 1000)
}).then(()=> {
console.log('Yay!')
})
Bisher haben wir die Anzahl der Codezeilen wurde ohne offensichtlichen Nutzen von drei auf fünf erhöht. Das ist richtig, es scheint nicht intuitiv. Der Vorteil wird kommen, wenn wir mehr verschachtelte Logik innerhalb des setTimeout() Rückrufs haben., Zum Beispiel hat dieser ES5-Code zwei verschachtelte Rückrufe:
setTimeout(function(){
console.log('Yay!')
setTimeout(function(){
console.log('Wheeyee!')
}, 1000)
}, 1000)
Er kann mit ES6-Versprechungen wie folgt neu geschrieben werden:
Wie Sie beobachten können, hat sich die Codeorganisation geändert, als wir Rückrufcode nur in Code mit Versprechungen umgestaltet haben.
Ein weiterer Vorteil, der in diesem Aufsatz nicht behandelt wird-Versprechungen haben auch einen Fail-and-Catch-All-Callback, der eine nette Funktion ist. Werfen Sie einen Blick auf diesen Beitrag für weitere Informationen über Versprechungen: Einführung in ES6 Versprechen.
Block-Scoped Konstrukte: Let und Const
Möglicherweise haben Sie bereits den seltsam klingenden let in ES6-Code gesehen., Dies ist nicht einfach eine Zuckerbeschichtungsfunktion. Es ist komplizierter und fügt Ihren Variablendeklarationen mehr Logik hinzu.
let ist eine neue Variable, mit der Entwickler die Variable auf die Blöcke ausdehnen können. Wir definieren Blöcke durch die geschweiften Klammern. In ES5 haben die Blöcke den Vars NICHTS angetan, wie hier zu sehen:
Im obigen Code ist das Ergebnis 1000. Toll! Das ist ein wirklich schlechter Fehler. In ES6 verwenden wir let, um den Bereich auf die Blöcke zu beschränken. Vars sind dann Funktionsbereich.
In diesem Code ist der Wert 0, da der if-Block auch die let-Deklaration hat., Wenn es nichts hätte (Betrag=1), wäre der Ausdruck 1 gewesen.
Wenn es um const geht, sind die Dinge einfacher; Es verhindert nur das erneute Zuweisen und es ist auch blockreich wie let. Um zu demonstrieren, hier sind mehrere Konstanten und der Code funktioniert einwandfrei, da die const-Anweisungen zu verschiedenen Blöcken gehören:
Meiner bescheidenen Meinung nach überkomplizieren let und const die Sprache. Ohne sie hatten wir nur ein Verhalten, jetzt gibt es mehrere Szenarien zu berücksichtigen., ;-( Für Leute die neu in JavaScript, die aus Sprachen wie Java, const und let bieten eine neue Ebene von gebaut-in Schutz gegen einige unvorhersehbare Verhalten.
Klassen in ES6
Wenn Sie objektorientierte Programmierung (OOP) lieben, dann werden Sie diese Funktion lieben. Es macht das Schreiben von Klassen in ES6 und das Erben von ihnen so einfach wie das Gefallen eines Kommentars auf Facebook.
In ES5 war die Erstellung und Verwendung von Klassen gelinde gesagt schwierig. Es gab keine Keyword-Klasse (sie war reserviert, hat aber nichts getan)., Darüber hinaus trugen viele Vererbungsmuster wie Pseudoklassik, Klassik und Funktion zur Verwirrung bei und gießten Benzin auf die feurigen Trennungen zwischen JavaScript-Entwicklern.
Ich zeige Ihnen nicht, wie Sie eine Klasse in ES5 schreiben, da es viele Muster gibt. Schauen wir uns gleich das ES6-Beispiel an. Ich kann Ihnen sagen, dass die ES6-Klasse Prototypen verwendet, nicht den Function Factory-Ansatz. Wir haben ein classbaseModel, in dem wir einen Konstruktor und eine getName () – Methode definieren können:
Beachten Sie, dass ich Standardparameterwerte für Optionen und Daten verwende., Außerdem müssen Methodennamen nicht mehr die Wortfunktion oder den Doppelpunkt (:) haben. Der andere große Unterschied ist, dass Sie keine Eigenschaften zuweisen können this.NAME auf die gleiche Weise wie Methoden, dh Sie können den Namen nicht auf derselben Einrückungsebene wie eine Methode sagen. Um den Wert einer Eigenschaft festzulegen, weisen Sie einfach einen Wert im Konstruktor zu.,
Das AccountModel erbt von BaseModel mit Klassenname extends PARENT_NAME:
class AccountModel extends baseModel {
constructor(options, data) {
Um den übergeordneten Konstruktor aufzurufen, rufen Sie mühelos super() mit Parametern auf:
super({private: true}, ) // Call the parent method with super
this.name = 'Account Model'
this.url +='/accounts/'
}
Wenn Sie wirklich schick sein möchten, können Sie auch einen solchen Getter mit accountdata als Eigenschaft einrichten:
get accountsData() { // Calculated attribute getter
// ... make XHR
return this.data
}
}
Wie benutzt man nach all dieser Arbeit eigentlich diese Klasse abracadabra? Es ist so einfach wie einen Dreijährigen dazu zu bringen, an den Weihnachtsmann zu glauben., Verwenden Sie den neuen Operanden:
let accounts = new AccountModel(5)
accounts.getName()
console.log('Data is %s', accounts.accountsData)
Falls Sie sich fragen, lautet die Ausgabe:
Class name: Account Model
Data is %s 32113123123,524214691
Natürlich existierten Klassen in CoffeeScript und älteren JavaScript-Standards, sodass sie nicht vollständig neu sind. In ES6 wurde jedoch die Verwendung von Klassen erleichtert, was besonders für Unternehmensentwickler wichtig ist, da sie normalerweise an größeren Projekten arbeiten, die sich über mehrere Teams erstrecken (daher erfordert der Code eine Modularisierung).
Module in ES6
Wie Sie vielleicht wissen, gab es vor ES6 keine Unterstützung für native Module in JavaScript., Die Leute kamen mit AMD, RequireJS, CommonJS und anderen Problemumgehungen, aber sie waren genau das — Workaround und Hacks. Mit ES6 gibt es jetzt integrierte Module mit Import-und Exportoperanden.
In ES5 würden Sie script> Tags mit IIFE oder einer Bibliothek wie AMD verwenden, während Sie in ES6 Ihre Klasse mit export verfügbar machen können. Da bin ich ein Knoten.js-Typ also werde ich CommonJS verwenden, das auch ein Knoten ist.js-syntax, um dieses problem zu lösen. Es ist ziemlich einfach, CommonJS im Browser mit dem Browserify Bundler zu verwenden., Angenommen, wir haben die Portvariable und die getAccounts-Methode im ES5-Modul.js:
module.exports = {
port: 3000,
getAccounts: function() {
...
}
}
In ES5 main.js, wir würden(‚Modul‘) diese Abhängigkeit benötigen:
var service = require('module.js')
console.log(service.port) // 3000
In ES6 würden wir export und import verwenden. Dies ist beispielsweise unsere Bibliothek im ES6-Modul.js Datei:
export var port = 3000
export function getAccounts(url) {
...
}
Im Importeur ES6 Datei main.js, wir verwenden import {name} von ‚my-module‘ Syntax., Zum Beispiel können wir Objekte/Methoden Port importieren und getAccounts aus dem Modul namens module:
import {port, getAccounts} from 'module'
console.log(port) // 3000
Oder wir können alles als Variablen Dienst in main importieren.js:
import * as service from 'module'
console.log(service.port) // 3000
Beachten Sie, dass die native Unterstützung für ES6-Module in Browsern nicht so bald kommt (zumindest zum Zeitpunkt dieses Schreibens), sodass Sie so etwas wie jspm benötigen, um ES6-Module zu verwenden.
Weitere Informationen und Beispiele zu ES6-Modulen finden Sie in diesem Text. Und denken Sie daran — – egal was, schreiben Sie modulares JavaScript!,
Für … des Verständnisses in ES6
Hier ist ein Problem mit ES5: Wenn wir Objekte mit seinen Schlüsseln iterieren möchten, müssen wir diese Schlüssel zuerst mit Object extrahieren.Pfeiltasten(). Zum Beispiel:
Ein weiteres Problem mit forEach ist, dass Sie die Word-Funktion schreiben müssen. Aber es gibt eine bessere Aussage in ES6! Die for…of Anweisung ersetzt Standard for und forEach und ähnelt for…in außer dass das for…in iteriert über Schlüssel und für…von über Werten.,
Mit den Daten (Büchern) des vorherigen Codeausschnitts können wir mit iterieren for…in und schlüssel oder mit für…von:
for (let key in books){
console.log(books)
}
Gibt die schlüssel:
Pro Express.js
React Quickly
Full Stack JavaScript
Azat
Während die für…von wird arbeit mit werte:
for (let book of books){
console.log(book)
}
Die ausgabe von für…von:
Pro Express.js
React Quickly
Full Stack JavaScript
Beachten Sie, dass die Ausgabe von for…of ignoriert den Wert mit dem Schlüsselautor wie forEach für ein Array:
Meine persönliche Erfahrung in der Arbeit mit Comprehensions besteht darin, dass sie die Lesbarkeit des Codes erhöhen. Dies ist von größter Bedeutung für die Code-Wartung in Unternehmensanwendungen.
