standardparametre i ES6
Når vi skriver moduler, skal vi redegøre for tilfælde, hvor argumenterne udelades. Med andre ord skal gode moduler være smarte nok til at have standardværdier for parametre. I ES5 vil du skrive noget som koden nedenfor, som bruger den logiske eller (||):
disse udsagn fungerer godt bortset fra edge-sagerne. For eksempel, hvis værdien er 0 – og fordi 0 er falsk i JavaScript-betingelsen standard til den hårdt kodede værdi i stedet for at blive selve værdien, som du måske ønsker i nogle tilfælde., Selvfølgelig, hvem har brug for 0 som en værdi (#sarcasmfont), så vi ignorerede bare denne fejl og brugte logikken eller alligevel …
eller måske begivenhed en if/else betingelse for at kontrollere for den udefinerede værdi:
var getAccounts = function(limit) {
if (typeof limit == 'undefined') limit = 10
...
}
ikke mere! I ES6 kan vi sætte standardværdierne lige i signaturen af funktionerne som sådan:
var getAccounts = function(limit = 10) {
...
}
var link = function(height = 50, color = 'red', url = 'http://capitalone.io') {
...
}
Dette bruger ikke kun færre kodelinjer, men har også øget læsbarhed. Af den måde, denne syntaks ligner Ruby og Python!,
hvil og spred parametre i ES6
Hvis du nogensinde har brugt eller skrevet en JavaScript-funktion med et variabelt eller endda ubegrænset antal argumenter, kender du argumentobjektet. Dette objekt indeholder alle parametre, der overføres til funktionen. Problemet er, at dette argument objekt er ikke en reel Matri.. Du skal konvertere det til et array, hvis du vil bruge funktioner som Sorter eller kort eksplicit. For eksempel konverterer denne anmodningsfunktion argumenter ved hjælp af opkald ():
så er der en bedre måde i ES6 at få adgang til et ubestemt antal argumenter som et array? Ja!, Det er hvile parametre syntaks og det er defineret med … For eksempel, dette er ES6 funktion signatur med resten parameter tilbagekald som bliver et array med resten af parametrene:
function(url, options, ...callbacks) {
var callback1 = callbacks
var callback2 = callbacks
// ...
}
Bemærk: I resten array, den første parameter er en, der ikke har et navn, fx, tilbagekald er på index 0, og ikke 2 som i ES5 ‘ s argumenter. At sætte andre Navngivne argumenter efter rest-parameteren vil også forårsage en syntaksfejl. Resten parameter er en stor sugarcoating tilføjelse til JavaScript, da det erstatter argumenterne objekt, som ikke var en reel Matri..,
I ES5, hvis du ønsker at bruge et array som argument til en funktion, du ville have til at bruge anvend() funktion:
function request(url, options, callback) {
// ...
}
var requestArgs =
request.apply(null, requestArgs)
Nu er i ES6, vi kan bruge sprede parametre, der ligner resten af parametre på syntaks, som de bruger ellipser…:
function request(url, options, callback) {
// ...
}
var requestArgs =
request(...requestArgs)
ES6 Udviklere kan bruge sprede operatør i følgende tilfælde:
spredningen operatør har en lignende syntaks til resten parametre, men resten er, der anvendes i funktionen definering/erklæring og sprede bruges i samtaler og konstanter., De sparer udviklere fra at skrive ekstra linjer med imperativ kode, så det er en god færdighed at kende og bruge dem.
Skabelon Konstanter i ES6
Skabelon konstanter (eller interpolation, som de er kendt i andre sprog) er en måde at output-variable i strengen blandet med nogle tekster, typisk i brugergrænseflader. I ES5 måtte vi bryde strengen sådan.,
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id
Heldigvis, i ES6 kan vi bruge en ny syntaks ${NAME} indersiden af bagsiden markeret string:
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
Dette er pæne og giver udviklere mulighed for at se det endelige resultat af strengene med et blik i stedet for at forsøge at vurdere sammenkædning udtryk.
ES6 string skabeloner er god, men den syntaks, der vil medføre konflikter i Markdown-dokumentationen, hvis du bruger string skabeloner og inline-kode markup, (fordi i Markdown inline-koden er markeret med back-flåter så godt)., Af den måde, CoffeeScript er, hvad jeg tror på en bedre løsning, når det indfører dobbelt-quited strenge (svarende til Ruby):
var name = "Your name is #{first} #{last}."
var url = "http://localhost:3000/api/messages/#{id}"
Interpolation er god, men hvordan kan du arbejde med multi-line tekst i JavaScript?
multi-line Strings i ES6
en anden lækker syntaktisk sugarcoating er multi-line string. I ES5 måtte vi bruge en af disse tilgange, og det var grimt., Med sammenkædning:
Eller flygte med skråstreg:
var fourAgreements = 'You have the right to be you.\n\
You can only be you when you do your best.'
Mens der i ES6, blot bruge backticks som følger:
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.`
Multi-line strenge er et nyttigt supplement, hvis du er nødt til at bruge en masse tekst i JavaScript-koden.,
Destruktureringsdeklaration Opgave i ES6
Destruktureringsdeklaration kan være en hårdere begreb at forstå, end multi-line strenge, fordi der er nogle magic foregår bag scenen… Lad os sige, at du har enkle opgaver, hvor nøglerne userId og accountNumber er variabler userId og accountNumber:
var data = $('body').data(), // data has properties
userId and accountNumber userId = data.userId, accountNumber = data.accountNumber
Andre eksempler på opgaver, hvor navne på variabler og objekt egenskaber er de samme:
I ES6, kan vi erstatte ES5-koden ovenfor, med disse udtalelser:
var { userId, accountNumber} = $('body').data()
var {json} = require('body-parser')
var {username, password} = req.body
Dette virker også med arrays. Vanvittigt!,
var = $('.column'),
= file.split('\n')
det kan tage lidt tid at vænne sig til destructuring assignment syntaks, men det er en sød sugarcoating alligevel.
Enhanced Object Literals in ES6
hvad du kan gøre med object literals i ES6 er sind blæser! Vi gik fra en glorificeret version af JSON i ES5 til noget, der ligner klasser i ES6.
i virksomhedsudvikling er kodemodularisering vigtig, fordi projekterne er større og har et større antal bevægelige dele. Med forbedrede objektlitteraler kan du oprette virkelig stærke objekter fyldt med funktionalitet.,
Her er et typisk ES5 objekt bogstavelig med nogle metoder og attributter/egenskaber:
Hvis vi ønsker at være fancy, vi kan arve fra serviceBase ved at gøre det prototypen med Objektet.opret metode:
jeg ved, accountServiceES5ObjectCreate og accountServiceES5 er IKKE helt identiske, fordi et objekt (accountServiceES5) vil have de egenskaber, i __før__ objektet, som vist i illustrationen nedenfor:
Men af hensyn til dette eksempel, så lad os behandle dem ens., I ES6 object literals kan vi bruge stenografi til tildeling. For eksempel, getAccounts: getAccounts, bliver bare getAccounts.
Vi kan også påkalde super og have dynamiske taster. For eksempel returnerer toString () – metoden et JSON-objekt som en streng ved at kalde super.valueOf(), og valueOf_1_2_3 er en dynamisk egenskab navn:
Dette er en stor forbedring til gode gamle objekt konstanter, fordi udviklerne kan pakke mere logik og gøre flere ting end med ES5 objekter!,
Pilefunktioner i ES6
Dette er sandsynligvis den funktion, jeg ventede mest på. Jeg elskede CoffeeScript for sine fede pile. Nu har vi dem i ES6.
de fede pile er fantastiske, fordi de ville få din dette til at opføre sig ordentligt, dvs.dette vil have den samme værdi som i forbindelse med funktionen — det vil ikke mutere som typisk sker hver gang du opretter en lukning. Denne adfærd var en af de værre dele af JavaScript og ofte forårsaget en masse forvirring med udviklere nye til sproget., Brug af pile-funktioner i ES6 giver os mulighed for at stoppe med at bruge that = this eller self = this eller _this = this or .bind (dette).
For eksempel, denne kode i ES5 er grim, fordi du kan glemme alt om at overføre forbindelse til lukning med _this:
var _this = this
$('.btn').click(function(event){
_this.sendData()
})
binder() eller ringe() tilgange er ikke meget bedre på grund af deres informationsmængde. Men se på denne smukke ES6-kode:
$('.btn').click((event) =>{
this.sendData()
})
desværre besluttede ES6-udvalget, at det var for meget af en god ting at låne tynde pile fra CoffeeScript og efterlod os en lang gammel funktion i stedet., (Mager pil i CoffeeScript fungerer som almindelig funktion i ES5 og ES6).
Her er et andet eksempel, hvor vi bruger opfordring til at passere forbindelse til logUpperCase () – funktionen i ES5:
Mens der i ES6, at vi ikke behøver at rode rundt med _this:
Bemærk, at du kan mikse og matche gamle funktion med => i ES6 som du kan se passer. Og når en pil funktion bruges med en statementn linje erklæring, bliver det et udtryk; dvs. det vil implicit returnere resultatet af denne enkelt erklæring. Hvis du har mere end en linje, skal du bruge return eksplicit.,
denne ES5-kode opretter et array fra meddelelsesarrayet:
bliver dette i ES6:
var ids =
var messages = ids.map(value => `ID is ${value}`) // implicit return
Bemærk, at jeg brugte strengskabelonerne? En anden funktion fra CoffeeScript … jeg elsker dem!
parentesen () er valgfri for enkelt params i en pil funktion signatur. Du skal dog bruge dem, når du bruger mere end en param. I ES5 har koden funktion med eksplicit retur:
nu er her en mere veltalende version af koden i ES6 med parentes omkring params og implicit return:
er ikke fede pile store? Brug dem.,
Løfter i ES6
Løfter har været en kontroversiel udvikling emne, især i større organisationer, hvor det kan være sværere at blive enige om en fælles tilgang. En af grundene til dette er antallet af promise — implementeringer, der bruger lidt forskellige syntakser-Blu, bluebird, udskudt.js, vo., Avo., og J .uery udskudt for blot at nævne nogle få. En anden grund er, at nogle soft .areingeniører siger, “vi har ikke brug for løfter og kan bare bruge async, generatorer, tilbagekald osv.”
heldigvis er der en chance for, at debatterne vil stille ned med standardløftet implementering tilføjet til ES6!,
Lad os overveje et temmelig trivielt eksempel på en forsinket asynkron eksekvering med setTimeout():
setTimeout(function(){ console.log('Yay!') }, 1000)
Vi kan re-skriver denne kode i ES6 med Løfte:
var wait1000 = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
}).then(function() {
console.log('Yay!')
})
Eller med ES6 pil funktioner:
var wait1000 = new Promise((resolve, reject)=> {
setTimeout(resolve, 1000)
}).then(()=> {
console.log('Yay!')
})
Så langt, at vi har øget antallet af linjer af kode fra tre til fem uden nogen indlysende fordel. Det er rigtigt, det virker ulogisk. Fordelen vil komme, hvis vi har mere indlejret logik inde i setTimeout() tilbagekald., For eksempel, denne ES5 kode, der har to indlejrede tilbagekald:
setTimeout(function(){
console.log('Yay!')
setTimeout(function(){
console.log('Wheeyee!')
}, 1000)
}, 1000)
Det kan være re-skrevet med ES6 løfter som dette:
Som du kan observere, koden organisation ændres, når vi refactored tilbagekald-kun-kode til kode med løfter.
en anden fordel, der ikke er dækket af dette essay — løfter, har også en fejl-og-fangst-alle tilbagekald, hvilket er en dejlig funktion. Tag et kig på dette indlæg for mere info om løfter: Introduktion til ES6 løfter.
blok-Scoped konstruktioner: Lad og Const
du har måske allerede set den underlige klingende lad i ES6 kode., Dette er ikke blot en sukkerbelægning funktion. Det er mere indviklet og tilføjer mere logik til dine variable erklæringer.
Lad er en ny var, der giver udviklere mulighed for at omfordele variablen til blokkene. Vi definerer blokke af de krøllede seler. I ES5 gjorde blokkene intet til vars, som det ses her:
i koden ovenfor vil resultatet være 1000. Wowo!! Det er en rigtig dårlig fejl. I ES6 bruger vi let til at begrænse omfanget til blokkene. Vars er derefter funktion scoped.
i denne kode er værdien 0, fordi if-blokken også har let-erklæringen., Hvis det ikke havde noget (beløb=1), ville udtrykket have været 1.
Når det kommer til const, er tingene lettere; det forhindrer bare gentildeling, og det er også blok-scoped som let. Bare for at demonstrere, her er en flere konstanter, og koden fungerer fint, fordi const-udsagnene hører til forskellige blokke:
efter min ydmyge mening, lad og const overkomplicere sproget. Uden dem havde vi kun en adfærd, nu er der flere scenarier at overveje., ;-( For folk nye til JavaScript, der kommer fra sprog som Java, const, og lad tilbyde et nyt lag af indbygget beskyttelse mod nogle uforudsigelige adfærd.
klasser i ES6
Hvis du elsker objektorienteret programmering (OOP), så vil du elske denne funktion. Det gør skrive klasser i ES6, og arve fra dem, så let som smag en kommentar på Facebook.
i ES5, klasser skabelse og brug var svært at sige det mildt. Der var ikke en søgeordsklasse (den var reserveret, men gjorde intet)., Hertil kommer, at masser af arv mønstre som pseudo klassisk, klassisk, funktionel tilføjet til forvirring, hælde ben .in på de brændende divisioner mellem JavaScript udviklere.
Jeg viser dig ikke, hvordan du skriver en klasse i ES5, fordi der er mange mønstre. Lad os tage et kig på ES6-eksemplet med det samme. Jeg kan fortælle dig, at ES6-klassen vil bruge prototyper, ikke funktionen factory-tilgang. Vi har en classbaseModel, hvor vi kan definere en konstruktør og en getname () – metode:
Bemærk, at jeg bruger standardparameterværdier til Indstillinger og data., Metodenavne behøver heller ikke at have ordet funktion eller tyktarmen (:) længere. Den anden store forskel er, at du ikke kan tildele egenskaber this.NAME på samme måde som metoder, dvs.du kan ikke sige navn på samme indrykningsniveau som en metode. For at indstille værdien af en egenskab skal du blot tildele en værdi i konstruktøren.,
AccountModel vil arve fra baseModel med klasse NAVN udvider PARENT_NAME:
class AccountModel extends baseModel {
constructor(options, data) {
for At kalde den forælder constructor, ubesværet påkalde sig super() med params:
super({private: true}, ) // Call the parent method with super
this.name = 'Account Model'
this.url +='/accounts/'
}
Hvis du ønsker at være virkelig har lyst, kan du også oprette en getter som denne med accountsData som en ejendom:
get accountsData() { // Calculated attribute getter
// ... make XHR
return this.data
}
}
Så efter alt dette arbejde, hvordan kan du faktisk bruge denne klasse abrakadabra? Det er lige så nemt som at narre en treårig til at tro på julemanden., Brug ny operand:
let accounts = new AccountModel(5)
accounts.getName()
console.log('Data is %s', accounts.accountsData)
I tilfælde af at du er gad vide, output er:
Class name: Account Model
Data is %s 32113123123,524214691
selvfølgelig, klasser eksisterede i CoffeeScript og ældre JavaScript standarder, så de er ikke helt nye. I ES6 er det dog blevet lettere at bruge klasser, hvilket er særligt vigtigt for virksomhedsudviklere, fordi de typisk arbejder på større projekter, der spænder over flere hold (så koden kræver modularisering).
moduler i ES6
som du måske ved, var der ingen native moduler support i JavaScript før ES6., Folk kom op med AMD, re .uirejs, CommonJS og andre løsninger, men de var netop det — løsning og hacks. Med ES6 er der nu indbyggede moduler med import og eksport operander.
I ES5, du vil bruge <script> tags med IIFE, eller et bibliotek, som AMD, mens der i ES6 du kan udsætte din klasse med eksport. Da jeg er en knude.js fyr, så jeg vil bruge CommonJS, som også er en Node.js syntaks, for at løse dette problem. Det er ret ligetil at bruge CommonJS i Bro .seren med Bro .serify bundler., Lad os sige, at vi har port variabel og getAccounts metode i ES5 modul.js:
module.exports = {
port: 3000,
getAccounts: function() {
...
}
}
I ES5 vigtigste.js, vi ville kræve (‘modul’), at afhængighed:
var service = require('module.js')
console.log(service.port) // 3000
i ES6 ville vi bruge eksport og import. For eksempel er dette vores bibliotek i ES6-modulet.js file:
export var port = 3000
export function getAccounts(url) {
...
}
i importøren ES6 fil main.js, vi bruger import {navn} fra ‘my-module’ syntaks., For eksempel, kan vi importere objekter/metoder port, og getAccounts fra det modul, der kaldes modulet:
import {port, getAccounts} from 'module'
console.log(port) // 3000
, Eller vi kan importere alt som en variabel service i main.js:
import * as service from 'module'
console.log(service.port) // 3000
Bemærk, at native support for ES6 moduler i browsere, som ikke kommer, til enhver tid snart (som dette skrives, i hvert fald), så du har brug for noget som jspm at udnytte ES6 moduler.
For mere information og eksempler på ES6-moduler, se på denne tekst. Og husk, – uanset hvad, skriv modulopbygget JavaScript!,
for…Af forståelser i ES6
Her er et problem med ES5: når vi vil gentage over objekter ved hjælp af dens nøgler, skal vi først udtrække disse nøgler med objekt.nøgle(). For eksempel:
et andet problem med forEach er, at du skal skrive wordord-funktionen. Men der er en bedre erklæring i ES6! Den for … Af erklæring erstatter standard for og forEach, og svarer til for…in bortset fra at det for…in gentager over nøgler og for … over værdier.,
ved Hjælp af den tidligere kodestykke data (bøger), kan vi gentage brug for…og taster eller ved hjælp af…af:
for (let key in books){
console.log(books)
}
Output tasterne:
Pro Express.js
React Quickly
Full Stack JavaScript
Azat
Mens den for…i vil arbejde med værdier:
for (let book of books){
console.log(book)
}
output af for…af:
Pro Express.js
React Quickly
Full Stack JavaScript
Bemærk, at output af for…af ignorerer værdien med tasten forfatter, som ville forEach på et array:
Min personlige erfaring med at arbejde med forståelser er, at de øger kode læsbarhed. Dette er altafgørende for kode vedligeholdelse i virksomhedens applikationer.
