standardparametrar i ES6
När vi skriver moduler måste vi redogöra för fall då argumenten kommer att utelämnas. Med andra ord måste Bra moduler vara smart nog att ha standardvärden för parametrar. I ES5 skulle du skriva något som koden nedan, som använder den logiska eller (//):
dessa uttalanden fungerar bra förutom edge-Fallen. Till exempel, om värdet är 0 — och eftersom 0 är falsy i JavaScript — är villkoret standard för det hårdkodade värdet istället för att bli själva värdet, som du kanske vill ha i vissa fall., Självklart, vem behöver 0 som ett värde (#sarcasmfont), så vi ignorerade bara denna brist och använde logiken eller ändå…
eller kanske Händelse ett if/else-villkor för att kontrollera det odefinierade värdet:
var getAccounts = function(limit) {
if (typeof limit == 'undefined') limit = 10
...
}
inte mer! I ES6 kan vi sätta standardvärdena direkt i signaturen för funktionerna som så:
var getAccounts = function(limit = 10) {
...
}
var link = function(height = 50, color = 'red', url = 'http://capitalone.io') {
...
}
detta använder inte bara färre rader kod, men har också ökad läsbarhet. Förresten, denna syntax liknar Ruby och Python!,
Rest och Spread parametrar i ES6
om du någonsin har använt eller skrivit en JavaScript-funktion med en variabel eller till och med obegränsat antal argument du känner till argumentobjektet. Det här objektet innehåller alla parametrar som skickas till funktionen. Problemet är att det här argumentobjektet inte är en riktig matris. Du måste konvertera den till en array om du vill använda funktioner som Sortera eller karta explicit. Till exempel konverterar denna begäran funktion argument med anrop():
så finns det ett bättre sätt i ES6 att få tillgång till ett obestämt antal argument som en array? Ja!, Det är rest parametrar syntax och det definieras med ellipser…. Det här är till exempel ES6 function signature med rest-parametern callbacks som blir en array med resten av parametrarna:
function(url, options, ...callbacks) {
var callback1 = callbacks
var callback2 = callbacks
// ...
}
Obs! i Rest-matrisen är den första parametern den som inte har ett namn, t.ex. återuppringning är index 0, Inte 2 som i ES5: s argument. Att sätta andra namngivna argument efter rest-parametern kommer också att orsaka ett syntaxfel. Rest-parametern är ett bra sugarcoating tillägg till JavaScript eftersom det ersätter argumentobjektet, vilket inte var en riktig array.,
i ES5, om du ville använda en array som ett argument till en funktion, skulle du behöva använda funktionen apply ():
function request(url, options, callback) {
// ...
}
var requestArgs =
request.apply(null, requestArgs)
nu i ES6, kan vi använda spridningsparametrarna som liknar restparametrarna i syntax eftersom de använder ellipser…:
function request(url, options, callback) {
// ...
}
var requestArgs =
request(...requestArgs)
ES6-utvecklare kan använda spridningsoperatören i följande fall:
spread-operatören har en liknande syntax till restparametrarna, men vila används i funktionsdefinitionen / deklarationen och spridningen används i samtal och Literaler., De sparar utvecklare från att skriva extra rader av imperativ kod, så att veta och använda dem är en bra färdighet.
Template Literals in ES6
Template literals (eller interpolering som de är kända på andra språk) är ett sätt att mata ut variabler i strängen blandas med viss text, vanligtvis i användargränssnitt. I ES5 var vi tvungna att bryta strängen så här.,
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id
lyckligtvis kan vi i ES6 använda en ny syntax ${NAME} inuti den bakåtmarkerade strängen:
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
det här är snyggt och gör det möjligt för utvecklare att se slutresultatet av strängarna vid en blick istället för att försöka utvärdera sammanlänkningsuttrycket.
ES6-strängmallar är bra, men syntaxen kommer att orsaka konflikter i Markdown-dokumentationen om du använder strängmallar och inline-kodmarkering (för i Markdown inline-kod markeras även med back-ticks)., Förresten har CoffeeScript vad jag tycker är en bättre lösning när den interpolerar dubbla quited strängar (liknande Ruby):
var name = "Your name is #{first} #{last}."
var url = "http://localhost:3000/api/messages/#{id}"
Interpolation är bra, men hur arbetar du med flera rader text i JavaScript?
flera rader i ES6
en annan smaskig syntaktisk sugarcoating är flera rader sträng. I ES5 var vi tvungna att använda ett av dessa tillvägagångssätt och det var fult., Med concatenation:
eller Med escape slash:
var fourAgreements = 'You have the right to be you.\n\
You can only be you when you do your best.'
medan du är i ES6, använder du bara backticks enligt följande:
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 strängar är ett användbart tillägg om du måste använda mycket text i din JavaScript-kod.,
omstrukturering av valutan Uppdrag i ES6
omstrukturering av valutan kan vara en svårare konceptet att få grepp om än multi-line strängar eftersom det inte finns några magiska händer bakom scenen… Låt oss säga att du har enkla uppdrag där nycklar användar-id och accountNumber är variabler användar-id och accountNumber:
var data = $('body').data(), // data has properties
userId and accountNumber userId = data.userId, accountNumber = data.accountNumber
Andra exempel på uppdrag där namn på variabler och objekt egenskaper är de samma:
I ES6, vi kan ersätta de ES5 koden ovan med dessa uttalanden som:
var { userId, accountNumber} = $('body').data()
var {json} = require('body-parser')
var {username, password} = req.body
Detta fungerar även med matriser. Galet!,
var = $('.column'),
= file.split('\n')
det kan ta lite tid att vänja sig vid förstöringstilldelningssyntaxen, men det är en söt sugarcoating ändå.
förbättrade Objektliteraler i ES6
vad du kan göra med objektliteraler i ES6 är mind blowing! Vi gick från en glorifierad version av JSON i ES5 till något som liknar klasser i ES6.
i företagsutveckling är kodmodularisering viktig eftersom projekten är större och har ett större antal rörliga delar. Med förbättrade objektliteraler kan du skapa riktigt starka objekt laddade med funktionalitet.,
här är ett typiskt ES5-objekt bokstavligt med vissa metoder och attribut/egenskaper:
om vi vill vara snygga kan vi ärva från serviceBase genom att göra den till prototypen med objektet.skapa metod:
jag vet, accountServiceES5ObjectCreate och accountServiceES5 är inte helt identiska, eftersom ett objekt (accountServiceES5) kommer att ha egenskaperna i objektet __proto__ som visas i illustrationen nedan:
men för det här exemplet, låt oss betrakta dem liknande., I ES6 objektliteraler kan vi använda stenografi för uppdrag. Till exempel getAccounts: getAccounts, blir bara getAccounts.
vi kan också åberopa super och ha dynamiska nycklar. Till exempel returnerar toString () – metoden ett JSON-objekt som en sträng genom att ringa super.valueOf () och valueOf_1_2_3 är ett dynamiskt egenskapsnamn:
det här är en stor förbättring för gamla goda objektliteraler eftersom utvecklare kan packa mer logik och göra mer saker än med ES5-objekt!,
Pilfunktioner i ES6
det här är förmodligen den funktion jag väntade mest. Jag älskade CoffeeScript för sina feta pilar. Nu har vi dem i ES6.
de feta pilarna är fantastiska eftersom de skulle göra ditt detta beter sig korrekt, dvs detta kommer att ha samma värde som i samband med funktionen — det kommer inte att mutera som vanligtvis händer varje gång du skapar en stängning. Detta beteende var en av de sämre delarna av JavaScript och orsakade ofta mycket förvirring med utvecklare som är nya på språket., Använda pilar funktioner i ES6 tillåter oss att sluta använda det = detta eller själv = detta eller _this = detta eller .bind(detta).
till exempel är den här koden i ES5 ful eftersom du kan glömma att överföra sammanhanget till stängningen med _this:
var _this = this
$('.btn').click(function(event){
_this.sendData()
})
bind() eller call () – tillvägagångssätten är inte mycket bättre på grund av deras verbositet. Men ta en titt på denna vackra ES6-kod:
$('.btn').click((event) =>{
this.sendData()
})
tyvärr beslutade ES6-kommittén att låna smala pilar från CoffeeScript var för mycket bra och lämnade oss med en lång gammal funktion istället., (Smal pil i CoffeeScript fungerar som vanlig funktion i och ES5 ES6).
Här är ett annat exempel där vi använder call för att skicka sammanhanget till funktionen logUpperCase() i ES5:
medan vi är i ES6 behöver vi inte röra runt med _this:
Observera att du kan mixa och matcha gammal funktion med => I ES6 som du tycker passar. Och när en pilfunktion används med en rad uttalande, det blir ett uttryck; dvs,. det kommer implicit att returnera resultatet av det enda uttalandet. Om du har mer än en rad måste du använda retur explicit.,
den här ES5-koden skapar en array från messages array:
blir den här i ES6:
var ids =
var messages = ids.map(value => `ID is ${value}`) // implicit return
märker du att jag använde strängmallarna? En annan funktion från CoffeeScript … jag älskar dem!
parentesen () är valfri för enstaka param i en pilfunktionssignatur. Men du behöver dem när du använder mer än en param. I ES5 har koden funktion med explicit retur:
nu är här en mer vältalig version av koden i ES6 med parentes runt params och implicit retur:
är inte feta pilar bra? Använd dem.,
löften i ES6
löften har varit ett kontroversiellt utvecklingsämne, särskilt i större organisationer där det kan vara svårare att komma överens om ett gemensamt tillvägagångssätt. En anledning till detta är antalet promise implementeringar med något annorlunda syntaxer-Q, bluebird, uppskjuten.js, vow, avow och jquery uppskjuten för att bara nämna några. En annan anledning är att vissa mjukvaruingenjörer säger, ” Vi behöver inte löften och kan bara använda async, generatorer, callbacks, etc.”
lyckligtvis finns det en chans att debatterna kommer att tysta ner med standardlöftets genomförande som läggs till ES6!,
låt oss överväga ett ganska trivialt exempel på en fördröjd asynkron exekvering med setTimeout ():
setTimeout(function(){ console.log('Yay!') }, 1000)
Vi kan skriva om den här koden i ES6 med löfte:
var wait1000 = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
}).then(function() {
console.log('Yay!')
})
eller med ES6 arrow functions:
var wait1000 = new Promise((resolve, reject)=> {
setTimeout(resolve, 1000)
}).then(()=> {
console.log('Yay!')
})
så långt, vi har ökat antalet rader av kod från tre till fem utan någon uppenbar fördel. Det är rätt, det verkar kontraintuitivt. Fördelen kommer om vi har mer kapslad logik inuti setTimeout () callback., Den här ES5-koden har till exempel två kapslade callbacks:
setTimeout(function(){
console.log('Yay!')
setTimeout(function(){
console.log('Wheeyee!')
}, 1000)
}, 1000)
den kan skrivas om med ES6 promises like so:
som du kan observera ändras kodorganisationen när vi refactored callbacks-endast kod till kod med löften.
en annan fördel som inte omfattas av denna uppsats — löften har också en fail-and-catch-all callback som är en trevlig funktion. Ta en titt på det här inlägget för mer information om löften: introduktion till ES6 löften.
Blockera-Inzoomat Konstruktioner: och Låt Const
Du kanske redan har sett den konstiga klingande låt i ES6 kod., Detta är inte bara en sugarcoating funktion. Det är mer invecklat och lägger till mer logik i dina variabeldeklarationer.
låt är en ny var som tillåter utvecklare att omfattning variabeln till blocken. Vi definierar block av lockiga hängslen. I ES5 gjorde blocken ingenting mot vars som ses här:
i koden ovan blir resultatet 1000. Wow! Det är en riktigt dålig insekt. I ES6 använder vi let för att begränsa omfattningen till blocken. Vars fungerar sedan scoped.
i den här koden är värdet 0 eftersom if-blocket också har let-deklarationen., Om det inte hade något (belopp=1), skulle uttrycket ha varit 1.
När det gäller const är det lättare; det förhindrar bara att omfördela, och det är också block-scoped som let. Bara för att visa, här är en flera konstanter och koden fungerar bra eftersom const uttalanden tillhör olika block:
enligt min ödmjuka åsikt, låt och const överkomplicera språket. Utan dem hade vi bara ett beteende, nu finns det flera scenarier att överväga., ;- (För människor som är nya till JavaScript, som kommer från språk som Java, const och låt erbjuda ett nytt lager av inbyggt skydd mot något oförutsägbart beteende.
klasser i ES6
om du älskar objektorienterad programmering (OOP) kommer du att älska den här funktionen. Det gör att skriva klasser i ES6, och ärva från dem, lika enkelt som att gilla en kommentar på Facebook.
i ES5 var det minst sagt svårt att skapa och använda klasser. Det fanns inte ett nyckelord klass (det var reserverat, men gjorde ingenting)., Förutom det, massor av arv mönster som pseudo klassisk, klassisk, funktionell läggs till förvirringen, hälla bensin på eldiga divisioner mellan JavaScript utvecklare.
Jag visar inte hur du skriver en klass i ES5, eftersom det finns många mönster. Låt oss ta en titt på ES6-exemplet direkt. Jag kan berätta att ES6-klassen kommer att använda prototyper, inte funktionsfabriksmetoden. Vi har en classbaseModel där vi kan definiera en konstruktör och en getName () – metod:
Observera att jag använder standardparametervärden för alternativ och data., Också, metodnamn behöver inte ha ordet funktion eller kolon (:) längre. Den andra stora skillnaden är att du inte kan tilldela egenskaper this.NAME på samma sätt som metoder, dvs du kan inte säga namn på samma indenteringsnivå som en metod. För att ställa in värdet på en egenskap, tilldela bara ett värde i konstruktören.,
AccountModel kommer att ärva från baseModel med klass NAMN sträcker sig PARENT_NAME:
class AccountModel extends baseModel {
constructor(options, data) {
Att kalla den förälder som konstruktör, enkelt åberopa super() med params:
super({private: true}, ) // Call the parent method with super
this.name = 'Account Model'
this.url +='/accounts/'
}
Om du vill vara riktigt snygga, du kan också sätta upp en getter som gillar det här med accountsData som en egendom:
get accountsData() { // Calculated attribute getter
// ... make XHR
return this.data
}
}
Så efter allt detta arbete, hur gör man egentligen för att använda denna klass abrakadabra? Det är lika enkelt som att lura en treåring att tro på jultomten., Använd ny operand:
let accounts = new AccountModel(5)
accounts.getName()
console.log('Data is %s', accounts.accountsData)
om du undrar är utmatningen:
Class name: Account Model
Data is %s 32113123123,524214691
självklart fanns klasser i CoffeeScript och äldre JavaScript-standarder så att de inte är helt nya. I ES6 har dock klasser blivit enklare, vilket är särskilt viktigt för företagsutvecklare eftersom de vanligtvis arbetar med större projekt som spänner över flera lag (så koden kräver modularisering).
moduler i ES6
som du kanske vet fanns det inget inbyggt stöd för moduler i JavaScript före ES6., Människor kom upp med AMD, RequireJS, CommonJS och andra lösningar men de var bara Det — lösning och hacka. Med ES6 finns nu inbyggda moduler med import och export operander.
I ES5, skulle du använda <skript> taggar med IIFE, eller ett bibliotek som AMD, medan det i ES6 du kan utsätta din klass med export. Eftersom jag är en nod.js kille så jag ska använda CommonJS, vilket också är en nod.JS syntax, för att lösa detta problem. Det är ganska enkla att använda CommonJS på webbläsaren med Browserify bundler., Låt oss säga att vi har portvariabel och getAccounts metod i ES5-modulen.js:
module.exports = {
port: 3000,
getAccounts: function() {
...
}
}
I ES5 viktigaste.js, vi skulle kräva (’module’) det beroendet:
var service = require('module.js')
console.log(service.port) // 3000
i ES6 skulle vi använda export och import. Det här är till exempel vårt bibliotek i ES6-modulen.JS-fil:
export var port = 3000
export function getAccounts(url) {
...
}
i importören ES6 file main.js, vi använder import {name} från ”min-modul’ syntax., Till exempel kan vi importera objekt/metoder port, och getAccounts från modulen kallas modul:
import {port, getAccounts} from 'module'
console.log(port) // 3000
eller vi kan importera allt som en variabel tjänst i huvudsak.JS:
import * as service from 'module'
console.log(service.port) // 3000
Observera att inbyggt stöd för ES6-moduler i webbläsare inte kommer någon gång snart (från och med det här skrivandet åtminstone), så du behöver något som jspm för att utnyttja ES6-moduler.
För mer information och exempel på ES6-moduler, ta en titt på den här texten. Och kom ihåg — – oavsett vad, skriv modulär JavaScript!,
för…av förståelse i ES6
här är ett problem med ES5: när vi vill iterera över objekt med hjälp av dess nycklar måste vi extrahera dessa nycklar först med objekt.nyckel(). Till exempel:
ett annat problem med forEach är att du måste skriva word-funktionen. Men det finns ett bättre uttalande i ES6! För … av uttalande ersätter standard för och forEach, och liknar for…in förutom att det for…in iterates över nycklar och för … över värden.,
med den tidigare kodavsnittets data (böcker) kan vi iterera med for…in för…av:
for (let key in books){
console.log(books)
}
matar ut nycklarna:
Pro Express.js
React Quickly
Full Stack JavaScript
Azat
medan för…AV kommer att fungera med värden:
for (let book of books){
console.log(book)
}
utdata för för…av:
Pro Express.js
React Quickly
Full Stack JavaScript
meddelande att produktionen av för…av ignorerar värdet med nyckelförfattare som skulle foreach på en array:
min personliga erfarenhet av att arbeta med förståelse är att de ökar kodläsbarheten. Detta är av största vikt för kodunderhåll i företagsapplikationer.
