parametrii prestabiliți în ES6
când scriem module, trebuie să ținem cont de cazurile în care argumentele vor fi omise. Cu alte cuvinte, modulele bune trebuie să fie suficient de inteligente pentru a avea valori implicite pentru parametri. În ES5, ați scrie ceva de genul codului de mai jos, care utilizează logica sau (||):
aceste declarații funcționează bine, cu excepția cazurilor de margine. De exemplu, dacă valoarea este 0 — și pentru că 0 este falsy în JavaScript – condiția este implicită la valoarea hard-codificată în loc să devină valoarea în sine, așa cum ați putea dori în unele cazuri., Desigur, cine are nevoie de 0 ca valoare (#sarcasmfont), asa ca am ignorat acest defect și a folosit logica SAU oricum…
Sau poate un eveniment dacă/altceva condiție pentru a verifica pentru o valoare nedefinită:
var getAccounts = function(limit) {
if (typeof limit == 'undefined') limit = 10
...
}
Nu mai mult! În ES6, putem pune valorile implicite chiar în semnătura funcțiilor astfel:
var getAccounts = function(limit = 10) {
...
}
var link = function(height = 50, color = 'red', url = 'http://capitalone.io') {
...
}
aceasta nu numai că folosește mai puține linii de cod, dar are și o lizibilitate crescută. Apropo, această sintaxă este similară cu Ruby și Python!,
parametrii Rest și Spread în ES6
Dacă ați folosit sau ați scris vreodată o funcție JavaScript cu un număr variabil sau chiar nelimitat de argumente, cunoașteți obiectul argument. Acest obiect conține toți parametrii transmiși funcției. Problema este că acest obiect argumente nu este o matrice reală. Trebuie să-l convertiți într-o matrice dacă doriți să utilizați funcții precum sortare sau hartă în mod explicit. De exemplu, această funcție de solicitare convertește argumentele folosind call():
deci există o modalitate mai bună în ES6 de a accesa un număr nedefinit de argumente ca matrice? Da!, Este sintaxa parametrilor de odihnă și este definită cu elipse …. De exemplu, acest lucru este ES6 funcția semnătura cu restul parametrul callback care devin o matrice cu restul parametrilor:
function(url, options, ...callbacks) {
var callback1 = callbacks
var callback2 = callbacks
// ...
}
Notă: În tot restul matrice, primul parametru este cea care nu are un nume, de exemplu, apel invers este la indicele 0, nu 2 ca la ES5 argumentele lui. De asemenea, punerea altor argumente numite după parametrul rest va provoca o eroare de sintaxă. Parametrul rest este un mare plus sugarcoating la JavaScript, deoarece înlocuiește obiectul argumente, care nu a fost o matrice reală.,
În ES5, dacă ai vrut să utilizați o matrice ca argument pentru o funcție, va trebui să utilizați aplica funcția ():
function request(url, options, callback) {
// ...
}
var requestArgs =
request.apply(null, requestArgs)
Acum, în ES6, putem folosi răspândirea unor parametri care să arate similar cu restul parametrilor în sintaxă ca ei folosesc elipse…:
function request(url, options, callback) {
// ...
}
var requestArgs =
request(...requestArgs)
ES6 Dezvoltatorii pot folosi răspândirea operator în următoarele cazuri:
răspândirea operatorul are o sintaxa similara cu restul de parametri, dar restul este folosit în funcție de definirea/declararea și răspândit este folosit în apeluri și literale., Ei salvează dezvoltatorii de la tastarea liniilor suplimentare de cod imperativ, astfel încât cunoașterea și utilizarea lor este o abilitate bună.
Șablon Literali în ES6
Șablon literali (sau interpolare cum sunt cunoscute în alte limbi) sunt o cale de ieșire variabile în șir amestecat cu un text, de obicei în interfețe de utilizator. În ES5, a trebuit să rupem șirul așa.,din fericire, în ES6 putem folosi o nouă sintaxă ${NAME} în interiorul șirului bifat:
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
Acest lucru este îngrijit și permite dezvoltatorilor să vadă rezultatul final al șirurilor dintr-o singură privire în loc să încerce să evalueze expresia de concatenare.șabloanele ES6 string sunt bune, dar sintaxa va cauza conflicte în documentația Markdown dacă utilizați șabloane string și marcare Cod inline (deoarece în Markdown codul inline este marcat și de back-ticks)., Apropo, CoffeeScript are ceea ce cred că o soluție mai bună atunci când interpolează șiruri dublu-quited (similar cu Ruby):
var name = "Your name is #{first} #{last}."
var url = "http://localhost:3000/api/messages/#{id}"
interpolarea este bună, dar cum lucrați cu text multi-linie în JavaScript?
siruri de caractere Multi-linie în ES6
Un alt sugarcoating sintactic yummy este șir multi-linie. În ES5, a trebuit să folosim una dintre aceste abordări și a fost urât., Cu concatenare:
Sau cu evacuare slash:
var fourAgreements = 'You have the right to be you.\n\
You can only be you when you do your best.'
în Timp ce în ES6, pur și simplu utiliza backticks după cum urmează:
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-linie siruri de caractere sunt un accesoriu util dacă trebuie să utilizați o mulțime de text în cod JavaScript.,
Destructurare Misiune în ES6
Destructurare poate fi mai greu să înțelegi decât multi-siruri de caractere de linie pentru că nu e ceva magic se întâmplă în spatele scenei… Sa zicem ca ai simplu misiuni în cazul în care cheile userId și accountNumber sunt variabile userId și accountNumber:
var data = $('body').data(), // data has properties
userId and accountNumber userId = data.userId, accountNumber = data.accountNumber
Alte exemple de sarcini în cazul în care numele de variabile și obiect proprietățile sunt aceleași:
În ES6, putem înlocui ES5 codul de mai sus cu aceste declarații:
var { userId, accountNumber} = $('body').data()
var {json} = require('body-parser')
var {username, password} = req.body
Acest lucru, de asemenea, funcționează cu tablouri. Nebun!,
var = $('.column'),
= file.split('\n')
ar putea dura ceva timp să se obișnuiască cu sintaxa de atribuire destructurare, dar este un sugarcoating dulce cu toate acestea.
Enhanced obiect Literals în ES6
Ce se poate face cu obiect literals în ES6 este minte suflare! Am trecut de la o versiune glorificată a JSON în ES5 la ceva asemănător claselor din ES6.
în dezvoltarea întreprinderii, modularizarea codului este importantă deoarece proiectele sunt mai mari și au un număr mai mare de piese în mișcare. Cu literali obiect îmbunătățite, puteți crea obiecte foarte puternice încărcate cu funcționalitate.,
Iată un obiect tipic ES5 literal cu unele metode și atribute/proprietăți:
dacă vrem să fim fantezie, putem moșteni de la serviceBase făcându-l prototipul cu obiectul.creați metoda:
nu știu, accountServiceES5ObjectCreate și accountServiceES5 NU sunt în totalitate identice, pentru că un obiect (accountServiceES5) vor avea proprietăți în __proto__ obiect așa cum se arată în ilustrația de mai jos:
Dar de dragul acestui exemplu, să le ia în considerare similare., În ES6 obiect literals, putem folosi shorthands pentru atribuire. De exemplu, getAccounts: getAccounts, devine doar getAccounts.de asemenea, putem invoca super și avem chei dinamice. De exemplu, toString() metoda returnează un obiect JSON ca un șir de caractere prin apelarea super.valueOf(), și valueOf_1_2_3 este o proprietate dinamică nume:
Acesta este un excelent accesoriu pentru o bună obiect vechi literale pentru că dezvoltatorii pot pack mai mult de logica și de a face mai multe lucruri decât cu ES5 obiecte!,
funcții săgeată în ES6
aceasta este, probabil, caracteristica am așteptat cel mai mult. Mi-a plăcut CoffeeScript pentru săgețile sale grase. Acum le avem în ES6.săgețile fat sunt uimitoare deoarece ar face ca acest lucru să se comporte corect, adică va avea aceeași valoare ca în contextul funcției — nu va suferi mutații așa cum se întâmplă de obicei de fiecare dată când creați o închidere. Acest comportament a fost una dintre cele mai rele părți ale JavaScript și de multe ori a provocat o mulțime de confuzie cu dezvoltatorii noi pentru limba., Utilizarea funcțiilor săgeți în ES6 ne permite să nu mai folosim asta = asta sau self = asta sau _this = asta sau .legați (acest lucru).
De exemplu, acest cod în ES5 este urât pentru că puteți uita de a transfera contextul închiderii cu _this:
var _this = this
$('.btn').click(function(event){
_this.sendData()
})
bind() sau apel() abordări nu sunt mult mai bine din cauza lor de detaliere. Dar aruncați o privire la acest cod destul de ES6:
$('.btn').click((event) =>{
this.sendData()
})
Din păcate, Comitetul ES6 a decis că împrumutarea săgeților slabe de la CoffeeScript a fost prea mult un lucru bun și ne-a lăsat cu o funcție veche lungă., (Skinny arrow în CoffeeScript funcționează ca o funcție regulată în ES5 și ES6).
Iată un alt exemplu în care ne folosim pentru a trece context logUpperCase (funcția) în ES5:
în Timp ce în ES6, nu trebuie să mizerie în jurul cu _this:
Rețineți că puteți amesteca și potrivi funcția de vechi cu => în ES6 ca tu de cuviință. Și atunci când o funcție săgeată este utilizată cu o declarație de o linie, devine o expresie; adică,. acesta va returna implicit rezultatul acelei declarații unice. Dacă aveți mai mult de o linie, atunci va trebui să utilizați return în mod explicit.,
acest cod ES5 este crearea unui tablou din matrice mesaje:
va deveni acest lucru în ES6:
var ids =
var messages = ids.map(value => `ID is ${value}`) // implicit return
observați că am folosit șabloanele șir? O altă caracteristică de la CoffeeScript … îi iubesc!
parantezele () sunt opționale pentru params unice într-o semnătură funcție săgeată. Cu toate acestea, veți avea nevoie de ele atunci când utilizați mai mult de un param. În ES5 Codul are funcție cu întoarcere explicită:
acum, aici este o versiune mai elocventă a codului în ES6 cu paranteze în jurul valorii de params și retur implicit:
nu sunt săgeți de grăsime mare? Folosește-le.,promisiunile din ES6 promisiunile au fost un subiect controversat de dezvoltare, în special în organizațiile mai mari, unde poate fi mai greu să cadă de acord asupra unei abordări comune. Un motiv pentru aceasta este numărul de implementări promise folosind sintaxe ușor diferite-Q, bluebird, amânat.js, jurământ, jurământ, și jQuery amânat pentru a numi doar câteva. Un alt motiv este că unii ingineri de software spun: „nu avem nevoie de promisiuni și putem folosi doar asincron, generatoare, apeluri de apel etc.”
Din fericire, există șansa ca dezbaterile să se liniștească odată cu implementarea promisiunii standard adăugată la ES6!,
Să considerăm mai degrabă un exemplu banal de o întârziere în executarea asincron cu setTimeout():
setTimeout(function(){ console.log('Yay!') }, 1000)
putem re-scrie acest cod în ES6 cu Promisiunea:
var wait1000 = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
}).then(function() {
console.log('Yay!')
})
Sau cu ES6 săgeată funcții:
var wait1000 = new Promise((resolve, reject)=> {
setTimeout(resolve, 1000)
}).then(()=> {
console.log('Yay!')
})
până în prezent, am crescut numărul de linii de cod de la trei la cinci fără nici un beneficiu evident. Așa este, pare contraintuitiv. Beneficiul va veni dacă avem mai multă logică imbricată în interiorul apelului setTimeout ()., De exemplu, acest ES5 cod are două imbricate callback:
setTimeout(function(){
console.log('Yay!')
setTimeout(function(){
console.log('Wheeyee!')
}, 1000)
}, 1000)
Acesta poate fi re-scris cu ES6 promite astfel:
după Cum puteți observa, codul organizației s-a schimbat când am refactored callback-doar codul în codul cu promisiuni.un alt beneficiu care nu este acoperit în acest eseu — promisiunile au, de asemenea, un apel invers, care este o caracteristică plăcută. Aruncați o privire la acest post pentru mai multe informații despre promisiuni: Introducere în promisiunile ES6.
constructe bloc-Scoped: Let și Const
este posibil să fi văzut deja let ciudat de sondare în codul ES6., Aceasta nu este pur și simplu o caracteristică sugarcoating. Este mai complicat și adaugă mai multă logică declarațiilor dvs. variabile.
let este un nou var care permite dezvoltatorilor să Domeniul de aplicare variabila la blocuri. Definim blocurile prin brațele curbate. În ES5, blocurile nu au făcut nimic var – urilor așa cum se vede aici:
în codul de mai sus, rezultatul va fi 1000. Uau! E o insectă foarte rea. În ES6, folosim let pentru a restricționa domeniul de aplicare la blocuri. Vars sunt apoi scoped funcție.
în acest cod, valoarea este 0, deoarece blocul if are și declarația let., Dacă nu ar avea nimic (suma=1), atunci expresia ar fi fost 1.
când vine vorba de const, lucrurile sunt mai ușor; doar previne re-atribuirea, și este, de asemenea, bloc-scoped ca let. Doar pentru a demonstra, aici sunt mai multe constante și Codul funcționează bine, deoarece declarațiile const aparțin diferitelor blocuri:
în umila mea părere, lăsați și const să complice limba. Fără ei am avut un singur comportament, acum există mai multe scenarii de luat în considerare., ;-( Pentru persoanele noi în JavaScript, care provin din limbi precum Java, const și let oferă un nou strat de protecție încorporată împotriva unui comportament imprevizibil.
clase în ES6
dacă vă place programarea orientată pe obiecte (OOP), atunci vă va plăcea această caracteristică. Se face scris clase în ES6, și moștenind de la ei, la fel de ușor ca place un comentariu pe Facebook.
în ES5, crearea și utilizarea claselor a fost dificil de spus cel mai puțin. Nu a existat o clasă de cuvinte cheie (a fost rezervată, dar nu a făcut nimic)., În plus, o mulțime de modele de moștenire, cum ar fi pseudo clasic, clasic, funcțional, au adăugat confuziei, turnând benzină pe diviziunile înflăcărate dintre dezvoltatorii JavaScript.
nu vă voi arăta cum să scrieți o clasă în ES5, deoarece există multe modele. Să aruncăm o privire la exemplul ES6 imediat. Vă pot spune că clasa ES6 va folosi prototipuri, nu abordarea fabricii de funcții. Avem un classbaseModel în care putem defini un constructor și o metodă getName ():
observați că folosesc valori implicite ale parametrilor pentru opțiuni și date., De asemenea, numele metodelor nu mai trebuie să aibă funcția word sau colon (:). Cealaltă mare diferență este că nu puteți atribui proprietăți this.NAME la fel ca metodele, adică nu puteți spune numele la același nivel de indentare ca o metodă. Pentru a seta valoarea unei proprietăți, pur și simplu atribuiți o valoare în constructor.,
AccountModel va moșteni de la baseModel cu NUMELE clasei se extinde PARENT_NAME:
class AccountModel extends baseModel {
constructor(options, data) {
Pentru a apela părinte constructor, fără efort invoca super() cu params:
super({private: true}, ) // Call the parent method with super
this.name = 'Account Model'
this.url +='/accounts/'
}
Dacă vrei să fii cu adevărat de lux, puteți de asemenea, înființat un getter ca asta cu accountsData ca o proprietate:
get accountsData() { // Calculated attribute getter
// ... make XHR
return this.data
}
}
Deci, după toată această muncă, cum a face tu de fapt utilizați această clasă abracadabra? Este la fel de ușor ca păcălirea unui copil de trei ani să creadă în Moș Crăciun., Utilizați noul operand:
let accounts = new AccountModel(5)
accounts.getName()
console.log('Data is %s', accounts.accountsData)
În caz că vă întrebați, de ieșire este:
Class name: Account Model
Data is %s 32113123123,524214691
desigur, clasele a existat în CoffeeScript și mai în vârstă JavaScript standarde astfel încât acestea nu sunt complet noi. Cu toate acestea, în ES6, utilizarea claselor a fost facilitată, ceea ce este deosebit de important pentru dezvoltatorii de întreprinderi, deoarece aceștia lucrează de obicei la proiecte mai mari care acoperă mai multe echipe (deci codul necesită modularizare).
Module în ES6
după cum probabil știți, nu a existat nici un suport module native în JavaScript înainte de ES6., Oamenii au venit cu AMD, RequireJS, CommonJS și alte soluții, dar au fost doar asta — soluție și hacks. Cu ES6 există acum module încorporate cu operanzi de import și export.
În ES5, ar trebui să utilizați <script-ul> tag-uri cu VIATA, sau o bibliotecă ca AMD, în timp ce în ES6 vă poate expune clasa cu export. Din moment ce eu sunt un nod.js tip așa că voi folosi CommonJS, care este, de asemenea, un nod.sintaxa js, pentru a rezolva această problemă. Este destul de simplu de a utiliza CommonJS pe browser-ul cu Browserify bundler., Să presupunem că avem variabilă port și getAccounts metoda în modulul ES5.js:
module.exports = {
port: 3000,
getAccounts: function() {
...
}
}
în ES5 principal.js, ne-ar cere(‘modul’) această dependență:
var service = require('module.js')
console.log(service.port) // 3000
în ES6, ne-ar folosi de export și de import. De exemplu, aceasta este biblioteca noastră din modulul ES6.fișier js:
export var port = 3000
export function getAccounts(url) {
...
}
în importatorul ES6 fișier principal.js, folosim import {name} din sintaxa ‘my-module’., De exemplu, putem importa obiecte/metode de port, și getAccounts de modul numit modul:
import {port, getAccounts} from 'module'
console.log(port) // 3000
Sau putem importa totul ca o variabilă de servicii în principal.js:
import * as service from 'module'
console.log(service.port) // 3000
Rețineți, că suport nativ pentru ES6 module în browsere nu vine orice moment în curând (ca din acest scris, cel puțin), așa că va trebui ceva de genul jspm de a utiliza module ES6.
Pentru mai multe informații și exemple despre modulele ES6, aruncați o privire la acest text. Și amintiți-vă, — indiferent de ce, scrieți JavaScript modular!,
pentru … de comprehensiuni în ES6
aici este o problemă cu ES5: când vrem să itera peste obiecte folosind tastele sale, avem nevoie pentru a extrage aceste chei mai întâi cu obiect.chei (). De exemplu:
O altă problemă cu forefiecare este că trebuie să scrieți funcția word. Dar există o declarație mai bună în ES6! Pentru … de declarație înlocuiește standard pentru și forEach, și este similar cu for…in cu excepția faptului că for…in iterează peste chei și pentru … de peste valori.,
Utilizarea anterioară fragment de cod date (cărți), se poate repeta folosind pentru…și cheile sau folosind pentru…de:
for (let key in books){
console.log(books)
}
Ieșiri tastele:
Pro Express.js
React Quickly
Full Stack JavaScript
Azat
în Timp ce pentru…de va lucra cu valorile:
for (let book of books){
console.log(book)
}
ieșire pentru…de:
Pro Express.js
React Quickly
Full Stack JavaScript
Observați că producția de…din ignoră valoarea cu tasta de autor ca ar forEach pe o matrice:
experiența Mea personală de lucru cu comprehensions este că ei crește lizibilitatea codului. Acest lucru este esențial pentru întreținerea codului în aplicațiile de întreprindere.
