Standard Parametere i ES6
Når vi skriver moduler, trenger vi å gjøre rede for tilfeller når det vil bli utelatt. Med andre ord, god modulene må være smart nok til å ha standard-verdier for parametere. I ES5, ville du skrive noe sånt koden nedenfor, som bruker den logiske ELLER (||):
Disse uttalelsene fungerer bra bortsett fra kanten tilfeller. For eksempel, hvis verdien er 0, — og fordi 0 er falsy i JavaScript — tilstanden som standard til hard-kodet verdi, i stedet for å bli den verdi i seg selv, som du kanskje vil i noen tilfeller., Selvfølgelig, som har behov for 0 som verdi (#sarcasmfont), så vi bare ignorerte dette feil, og brukte logikk ELLER uansett…
Eller kanskje hendelse en if/else-tilstand for å sjekke for udefinert verdi:
var getAccounts = function(limit) {
if (typeof limit == 'undefined') limit = 10
...
}
Ikke mer! I ES6, kan vi sette standardverdier midt i signatur av funksjoner som dette:
var getAccounts = function(limit = 10) {
...
}
var link = function(height = 50, color = 'red', url = 'http://capitalone.io') {
...
}
Dette er ikke bare bruker færre linjer med kode, men har økt lesbarhet så vel. Forresten, dette syntaks som ligner på Ruby og Python!,
Hvil og Spre Parametere i ES6
Hvis du har noen gang brukt eller skrevet en JavaScript-funksjon med en variabel eller til og med ubegrenset antall argumenter du vet argumentet objekt. Dette objektet inneholder alle parametere som sendes til funksjonen. Problemet er at denne argumenter objektet er ikke en reell matrise. Du trenger å konvertere den til en matrise hvis du ønsker å bruke funksjoner som å sortere eller kart eksplisitt. Dette kan For eksempel be om funksjonen konverterer argumenter ved hjelp av samtale():
Så er det en bedre måte i ES6 tilgang til et ubestemt antall argumenter som en matrise? Ja!, Det er resten parametere syntaks og det er definert med prikker …. For eksempel, dette er ES6 funksjon signatur med resten parameter tilbakering som blir en matrise med resten av parametere:
function(url, options, ...callbacks) {
var callback1 = callbacks
var callback2 = callbacks
// ...
}
Merk: I resten matrise, den første parameteren er en som ikke har et navn, for eksempel, tilbakeringing er på indeks 0, ikke 2 som i ES5 anførsler. Også sette andre navngitte argumenter etter resten parameteren vil føre til en syntaksfeil. Resten parameteren er en stor sugarcoating tillegg til at JavaScript siden det erstatter argumenter objekt, som ikke var en reell matrise.,
I ES5, hvis du ønsket å bruke en matrise som et argument til en funksjon, og du ville ha til å bruke søke-funksjonen ():
function request(url, options, callback) {
// ...
}
var requestArgs =
request.apply(null, requestArgs)
Nå i ES6, kan vi bruke spredning parametere som ligner på resten parametere i syntaks som de bruker ellipser…:
function request(url, options, callback) {
// ...
}
var requestArgs =
request(...requestArgs)
ES6 Utviklere kan bruke spredning operatør i følgende tilfeller:
spredningen operatøren har en lignende syntaks til resten parametere, men resten er brukt i definisjonen/erklæringen, og spredningen er brukt i samtaler og verdiane., De sparer utviklere fra å skrive inn ekstra linjer med imperativ kode, så vite og bruke dem er en god ferdighet.
Mal Verdiane i ES6
Mal verdiane (eller interpolering som de er kjent i andre språk) er en måte å overføre variabler i strengen blandet med litt tekst, vanligvis i brukergrensesnitt. I ES5, vi måtte bryte streng som dette.,
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id
Heldigvis, i ES6 vi kan bruke en ny syntaks ${NAME} innsiden av ryggen krysset av for streng:
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
Dette er ryddig og lar utviklere å se sluttresultatet av strengene på ett blikk i stedet for å prøve å vurdere sammensetning uttrykk.
ES6 string maler er god, men syntaksen vil føre til konflikter i Markdown dokumentasjon hvis du bruker string maler og innebygd kode markup, (fordi i Markdown innebygde kode er merket med tilbake-flått så vel)., Forresten, CoffeeScript er hva jeg tror en bedre løsning når det interpolerer dobbel-quited strenger (tilsvarende Ruby):
var name = "Your name is #{first} #{last}."
var url = "http://localhost:3000/api/messages/#{id}"
Interpolering er bra, men hvordan kan du jobbe med flere linjer tekst i JavaScript?
Multi-line Strenger i ES6
en Annen yummy syntaktiske sugarcoating er multi-line strengen. I ES5, vi måtte bruke en av disse tilnærmingene og den var stygg., Med sammensetting:
Eller med rømme slash:
var fourAgreements = 'You have the right to be you.\n\
You can only be you when you do your best.'
Mens i ES6, rett og slett utnytte 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 strenger er et nyttig tillegg hvis du må bruke en masse tekst i JavaScript-kode.,
Destructuring Oppdrag i ES6
Destructuring kan være en vanskeligere konsept å forstå enn multi-line strenger fordi det er noe magisk som skjer bak scenen… La oss si at du har enkle oppgaver hvor nøklene bruker-id og accountNumber er variabler bruker-id og accountNumber:
var data = $('body').data(), // data has properties
userId and accountNumber userId = data.userId, accountNumber = data.accountNumber
Andre eksempler på oppgaver hvor navn på variabler og objekt egenskaper er de samme:
I ES6, vi kan erstatte den ES5 koden ovenfor med disse uttalelsene:
var { userId, accountNumber} = $('body').data()
var {json} = require('body-parser')
var {username, password} = req.body
Dette fungerer også med matriser. Crazy!,
var = $('.column'),
= file.split('\n')
Det kan ta litt tid å bli vant til destructuring oppdrag syntaks, men det er en søt sugarcoating likevel.
Forbedret Objekt Verdiane i ES6
Hva du kan gjøre med objektet verdiane i ES6 er tankene blåser! Vi gikk fra å være en glorifisert versjon av JSON i ES5 til noe tett ligner klasser i ES6.
I bedriftsutvikling, kode modularisering er viktig fordi prosjektene er større og har et større antall bevegelige deler. Med forbedret objekt verdiane, kan du lage veldig sterk objekter spekket med funksjonalitet.,
Her er en typisk ES5 objekt bokstavelig med noen metoder og attributter/egenskaper:
Hvis vi ønsker å være fancy, vi kan arve fra serviceBase ved å gjøre det prototypen med Objektet.lag metoden:
jeg vet, accountServiceES5ObjectCreate og accountServiceES5 er IKKE helt identiske, fordi ett objekt (accountServiceES5) vil ha egenskaper i __proto__ objekt som vist i illustrasjonen nedenfor:
Men for å få til dette eksempel, la oss vurdere dem lignende., I ES6 objekt verdiane, kan vi bruke shorthands for oppdraget. For eksempel, getAccounts: getAccounts, blir bare getAccounts.
Også, vi kan påberope super, og har en dynamisk tastene. For eksempel, toString() metoden returnerer et JSON-objekt som en streng ved å ringe super.valueOf(), og valueOf_1_2_3 er en dynamisk eiendom navn:
Dette er en stor forbedring til gode gamle objekt verdiane fordi utviklerne kan pakke mer logikk og gjøre flere ting enn med ES5 objekter!,
Pil Funksjoner i ES6
Dette er trolig den har jeg ventet på de fleste. Jeg elsket CoffeeScript for det er fett piler. Nå har vi dem i ES6.
fett pilene er fantastisk fordi de ville gjøre dette oppføre seg på riktig måte, altså, dette vil ha samme verdi som i konteksten av funksjon — det vil ikke mutere som vanligvis skjer hver gang du oppretter en avslutning. Denne situasjonen var en av de verre deler av JavaScript og ofte forårsaket mye forvirring med utviklere nye språk., Ved hjelp av pilene funksjoner i ES6 tillater oss å slutte å bruke det = dette eller selv = dette eller _this = dette eller .bind(denne).
For eksempel, denne koden i ES5 er stygg fordi du kan glemme å overføre den sammenheng til lukking med _this:
var _this = this
$('.btn').click(function(event){
_this.sendData()
})
bind() eller ring() tilnærminger er ikke mye bedre på grunn av deres detaljnivå. Men ta en titt på denne vakre ES6 koden:
$('.btn').click((event) =>{
this.sendData()
})
Dessverre, ES6 komiteen besluttet at låneopptak tynne piler fra CoffeeScript var for mye av en god ting og venstre oss med en langvarig gamle funksjonen i stedet., (Tynn pil i CoffeeScript fungerer som vanlig funksjon i ES5 og ES6).
Her er et annet eksempel der vi bruker samtalen til å passere den sammenheng til logUpperCase () – funksjonen i ES5:
Mens i ES6, vi trenger ikke å rote rundt med _this:
Merk at du kan mikse og matche gamle funksjon med => i ES6 som du ser passer. Og når en pil funksjonen brukes med én linje uttalelse, det blir et uttrykk; jeg.e,. det vil implisitt returnere resultatet av at enkelt uttrykk. Hvis du har mer enn én linje, så du trenger å bruke tilbake eksplisitt.,
Dette ES5 koden for å lage en matrise fra meldinger utvalg:
Vil bli dette i ES6:
var ids =
var messages = ids.map(value => `ID is ${value}`) // implicit return
legg Merke til at jeg brukte string maler? En annen funksjon fra CoffeeScript… jeg elsker dem!
parentesene () er valgfritt for enkelt params i en pil funksjon signatur. Men, vil du trenger dem når du bruker mer enn én parameter. I ES5 koden har funksjon med eksplisitt tilbake:
her er en mer veltalende versjon av koden i ES6 med parentes rundt params og implisitt tilbake:
ikke fett piler stor? Bruk dem.,
Løfter i ES6
Lover har vært en kontroversiell utvikling emne, spesielt i store organisasjoner hvor det kan være vanskeligere å bli enige om en felles tilnærming. En grunn til dette er antall lover implementeringer ved hjelp av litt forskjellige syntaxes — Q, bluebird, utsatt.js, løfte, erklærte, og jquery utsatt for å nevne noen. En annen grunn er at noen programvare ingeniører sier, «Vi trenger ikke løfter og kan bare bruke asynkron, generatorer, tilbakering, etc.»
Heldigvis, det er en sjanse debattene vil stille ned med standard Løfte gjennomføring lagt til ES6!,
La oss vurdere en ganske trivielt eksempel på en forsinket asynkron kjøring med setTimeout():
setTimeout(function(){ console.log('Yay!') }, 1000)
Vi kan skrive denne koden i ES6 med Løfte:
var wait1000 = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
}).then(function() {
console.log('Yay!')
})
Eller med ES6 pil funksjoner:
var wait1000 = new Promise((resolve, reject)=> {
setTimeout(resolve, 1000)
}).then(()=> {
console.log('Yay!')
})
Så langt, vi har økt antall linjer med kode fra tre til fem uten noen åpenbar fordel. Det er riktig, betyr det virke counterintuitive. Fordelen vil komme hvis vi har flere nestede logikk innsiden av setTimeout() tilbakeringing., Dette kan For eksempel ES5 koden har to nestede tilbakering:
setTimeout(function(){
console.log('Yay!')
setTimeout(function(){
console.log('Wheeyee!')
}, 1000)
}, 1000)
Det kan være re-skrevet med ES6 lover som dette:
Som du kan observere, koden organisasjonen endret seg når vi refactored tilbakering-bare kode inn koden med løfter.
en Annen fordel som ikke er dekket i dette essayet — lover har også en fail-og-ta-alle innb. som er en fin funksjon. Ta en titt på dette innlegget for mer info om lover: Introduksjon til ES6 Løfter.
Blokker-Omfattet Konstruksjoner: La og Const
Du har kanskje allerede sett de rare lyder la i ES6 kode., Dette er ikke bare en sugarcoating funksjonen. Det er mer innviklet og legger mer logikk for å variabelen erklæringer.
la er en ny sti som lar utviklere å omfang variabelen til blokkene. Vi definerer blokker av krøllparentes. I ES5, blokker gjorde INGENTING for å vars som vist her:
I koden ovenfor, vil resultatet være 1000. Wow! Det er en veldig dårlig bug. I ES6, bruker vi la til å begrense omfanget til blokker. Vars er så funksjonen omfattet.
I denne koden, verdien er 0 fordi hvis blokker har også la erklæring., Hvis det hadde ingenting (beløp=1), og deretter uttrykket ville ha vært 1.
Når det kommer til const, ting er enklere, er det bare hindrer re-tilordne, og det er også blokkere-som omfattet la. Bare for å demonstrere, her er flere konstanter og koden fungerer fint fordi const uttalelser hører til forskjellige blokker:
I min ydmyke mening, og la const overcomplicate språket. Uten dem hadde vi bare én atferd, nå er det er flere scenarioer for å vurdere., ;-( For folk som ikke har JavaScript, som kommer fra språk som Java, const og la tilbyr et nytt lag med innebygd beskyttelse mot noen uforutsette konsekvenser.
Klasser i ES6
Hvis du elsker objekt-orientert programmering (OOP), så vil du elske denne funksjonen. Det gjør skriving av klasser i ES6, og arver fra dem, så enkelt som å like en kommentar på Facebook.
I ES5, klasser etablering og bruk var vanskelig å si det mildt. Det var ikke et søkeord klasse (det var reservert, men gjorde ingenting)., I tillegg til at mange av arv mønstre som pseudo-klassisk, klassisk, funksjonelle lagt til forvirring, helle bensin på den brennende divisjoner mellom JavaScript-utviklere.
jeg vil ikke vise deg hvordan å skrive en klasse i ES5, fordi det er mange mønstre. La oss ta en titt på ES6 eksempel med en gang. Jeg kan fortelle deg at ES6 klasse vil bruke prototyper, ikke funksjonen fabrikken tilnærming. Vi har en classbaseModel som vi kan definere en konstruktør og en getName () – metoden:
legg Merke til at jeg bruker standard parameterverdier for valg og data., Også, metode navn, du trenger ikke å ha ordet funksjon eller kolon (:) lenger. Den andre store forskjellen er at du ikke kan tilordne egenskaper for dette.NAVN på samme måte som metoder, altså, du kan ikke si navn på samme innrykk nivå som en metode. For å angi verdien for en egenskap, er det bare å angi en verdi i konstruktøren.,
AccountModel vil arve fra baseModel med klasse NAVN strekker seg PARENT_NAME:
class AccountModel extends baseModel {
constructor(options, data) {
for Å ringe foreldrene konstruktør, enkelt påberope super() med params:
super({private: true}, ) // Call the parent method with super
this.name = 'Account Model'
this.url +='/accounts/'
}
Hvis du ønsker å være veldig fancy, kan du også sette opp en getter som dette med accountsData som en eiendel:
get accountsData() { // Calculated attribute getter
// ... make XHR
return this.data
}
}
Så etter alt dette arbeidet, hvordan du faktisk kan bruke denne klassen abrakadabra? Det er like enkelt som å lure en tre år gammel til å tro på Julenissen., Bruk nye operand:
let accounts = new AccountModel(5)
accounts.getName()
console.log('Data is %s', accounts.accountsData)
I tilfelle du lurer på, produksjonen er:
Class name: Account Model
Data is %s 32113123123,524214691
selvfølgelig, klasser eksistert i CoffeeScript og eldre JavaScript normer slik de er ikke helt nytt. Imidlertid, i ES6 ved hjelp av klasser har blitt gjort enklere, noe som er spesielt viktig for bedrifter, utviklere, fordi de vanligvis jobber på større prosjekter som strekker seg over flere lag (så koden krever modularisering).
Moduler i ES6
Som du kanskje vet, var det ingen native moduler støtte i JavaScript før ES6., Folk kom opp med AMD, RequireJS, CommonJS og andre løsningene, men de var bare at — løsning, og hacks. Med ES6 det er nå bygget i moduler med import og eksport operander.
I ES5, kan du bruke <skript> – tager med IIFE, eller et bibliotek som AMD, mens i ES6 kan du utsette din klasse med eksport. Siden jeg er en Node.js fyr, så jeg vil bruke CommonJS, som også er en Node.js-syntaks, for å løse dette problemet. Den er ganske grei å bruke CommonJS på leseren med Browserify bundler., La oss si at vi har port variabel og getAccounts metode i ES5 modul.js:
module.exports = {
port: 3000,
getAccounts: function() {
...
}
}
I ES5 viktigste.js, ville vi krever(‘modul’) som avhengighet:
var service = require('module.js')
console.log(service.port) // 3000
I ES6, ville vi bruke eksport og import. For eksempel, dette er vårt bibliotek i ES6 modul.js-fil:
export var port = 3000
export function getAccounts(url) {
...
}
I importøren ES6 fil viktigste.js, vi bruker import {name} fra «min-modul’ syntaks., For eksempel, vi kan importere objekter/metoder-port, og getAccounts fra modul kalt modul:
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
Merk, at innebygd støtte for ES6 moduler i nettlesere kommer ikke som helst snart (i skrivende stund i hvert fall), så trenger du noe som jspm å utnytte ES6 moduler.
For mer informasjon og eksempler på ES6 moduler, ta en titt på denne teksten. Og husk — uansett hva, skrive modulære JavaScript!,
For…av Comprehensions i ES6
Her er et problem med ES5: når vi ønsker å iterere over objekter ved hjelp av tastene, vi trenger å trekke disse nøklene først med Objektet.tast(). For eksempel:
et Annet problem med forEach er at du trenger å skrive ordet funksjon. Men det er et bedre uttrykk i ES6! Den for…av dokumentet erstatter standard for og forEach, og er lik for…i, bortsett fra at det for…i koden over tastene og for…over verdier.,
ved Hjelp av den forrige kodebiten data (bøker), vi kan iterere bruke for…i og tastene eller ved hjelp av for…av:
for (let key in books){
console.log(books)
}
Utganger tastene:
Pro Express.js
React Quickly
Full Stack JavaScript
Azat
Mens det for…av vil arbeide med verdier:
for (let book of books){
console.log(book)
}
output av for…av:
Pro Express.js
React Quickly
Full Stack JavaScript
legg Merke til at resultatet av for…av ignorerer verdien med tasten forfatter som ville forEach på et utvalg:
Min personlige erfaring med comprehensions er at de øker koden lettere å lese. Dette er avgjørende for kode vedlikehold i enterprise applikasjoner.
