Oletus Parametrit ES6
Kun me kirjoittaa moduulit, meidän täytyy ottaa huomioon silloin, kun argumentit on jätetty pois. Toisin sanoen hyvien moduulien on oltava riittävän älykkäitä, jotta niillä on oletusarvot parametreille. ES5, voit kirjoittaa jotain, kuten alla oleva koodi, joka käyttää looginen TAI (||):
Nämä lausunnot toimivat hyvin, paitsi reuna tapauksissa. Esimerkiksi, jos arvo on 0, ja koska 0 on falsy JavaScript — tila on oletusarvoisesti kova-koodattu arvo sen sijaan tulee arvo itsessään, niin kannattaa joissakin tapauksissa., Tietenkin, joka tarvitsee 0 arvona (#sarcasmfont), joten me vain sivuuttaa tämän virheen, ja käyttää logiikkaa TAI joka tapauksessa…
Tai ehkä tapahtuma jos/else ehto tarkistaa määrittelemätön arvo:
var getAccounts = function(limit) {
if (typeof limit == 'undefined') limit = 10
...
}
– Ei enää! Vuonna ES6, voimme laittaa oletusarvot aivan allekirjoitus toimintoja, kuten niin:
var getAccounts = function(limit = 10) {
...
}
var link = function(height = 50, color = 'red', url = 'http://capitalone.io') {
...
}
Tämä ei ole vain käyttää vähemmän riviä koodia, mutta on lisääntynyt luettavuutta sekä. Muuten, tämä syntaksi on samanlainen Ruby ja Python!,
Loput ja Levitä Parametrit ES6
Jos olet koskaan käytetty tai kirjoitettu JavaScript-funktio, jonka muuttuja tai jopa rajoittamaton määrä argumentteja tiedät argumentti kohde. Tämä objekti sisältää kaikki funktiolle siirretyt parametrit. Ongelma on, että tämä argumentit objekti ei ole todellinen array. Sinun täytyy muuntaa se array, jos haluat käyttää toimintoja, kuten lajitella tai kartta nimenomaisesti. Esimerkiksi, tämä pyyntö toiminto muuntaa argumentteja käyttäen call():
Joten on olemassa parempi tapa, ES6 pääsy rajoittamaton määrä argumentteja, kuten array? Kyllä!, Se on loput parametrit syntaksi ja se on määritelty ellipsejä …. Esimerkiksi, tämä on ES6 toiminto allekirjoitus muun parametrin kutsuja, joita on tullut array loput parametrit:
function(url, options, ...callbacks) {
var callback1 = callbacks
var callback2 = callbacks
// ...
}
Huomautus: muualla array, ensimmäinen parametri on yksi, joka ei ole nimeä, esim. soittopyyntö on indeksi 0, ei 2 kuten ES5 perustelut. Myös muiden nimettyjen argumenttien asettaminen lepoparametrin mukaan aiheuttaa syntaksivirheen. Loput parametri on suuri kaunistella lisäksi JavaScript, koska se korvaa väitteet esine, joka ei ollut todellinen array.,
ES5, jos halusi käyttää array argumenttina funktio, sinun täytyy käyttää käytä() toiminta:
function request(url, options, callback) {
// ...
}
var requestArgs =
request.apply(null, requestArgs)
Nyt ES6, voimme käyttää levinnyt parametrit, jotka näyttävät samanlaisilta loput parametrit syntaksi, koska ne käyttää ellipsejä…:
function request(url, options, callback) {
// ...
}
var requestArgs =
request(...requestArgs)
ES6 Kehittäjät voivat käyttää levitä toimijan seuraavissa tapauksissa:
levitä toimijan on samanlainen syntaksi loput parametrit, mutta loput käytetään funktion määritelmä/ilmoitus ja leviäminen on käytetty puhelut ja literaaleja., Ne säästävät kehittäjiä kirjoittamasta ylimääräisiä viivoja imperatiivista koodia, joten niiden tunteminen ja käyttäminen on hyvä taito.
Malli Literaaleja vuonna ES6
Malli literaaleja (tai interpoloimalla, kun ne ovat tiedossa muilla kielillä) ovat tapa ulostulo muuttujat string höystettyä tekstiä, tyypillisesti käyttöliittymät. ES5: ssä naru piti katkaista näin.,
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id
Onneksi ES6 voimme käyttää uutta syntaksia ${NAME} sisällä takaisin-rasti merkkijono:
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
Tämä on siisti ja avulla kehittäjät voivat nähdä lopputulos jouset yhdellä silmäyksellä sen sijaan, että yrittää arvioida ketjuuntuminen ilme.
ES6 string mallit ovat hyviä, mutta syntaksi aiheuttaa konflikteja Markdown asiakirjat, jos käytät string malleja ja inline-koodi markup, (koska inline Markdown koodi on merkitty takaisin-punkkeja samoin)., Muuten, CoffeeScript on mielestäni parempi ratkaisu, kun se laskee interpoloimalla double-quited jouset (samanlainen Rubyn):
var name = "Your name is #{first} #{last}."
var url = "http://localhost:3000/api/messages/#{id}"
Interpolointi on hyvä, mutta miten työskennellä multi-line teksti JavaScript?
Multi-line Jouset ES6
Toinen namia syntaktinen kaunistelua on multi-line string. ES5: ssä jouduimme käyttämään yhtä näistä lähestymistavoista ja se oli ruma., Kanssa ketjuuntuminen:
Tai paeta slash:
var fourAgreements = 'You have the right to be you.\n\
You can only be you when you do your best.'
Vaikka ES6, yksinkertaisesti käyttää backticks seuraavasti:
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 jouset on hyödyllinen lisä, jos sinun täytyy käyttää paljon tekstiä JavaScript-koodia.,
Tuhoa Tehtävän ES6
Tuhoa voi olla vaikeampi ymmärtää kuin multi-line jouset, koska siellä on taikuutta tapahtuu takana kohtauksen… sanotaan sinulla on yksinkertaisia tehtäviä, joissa avaimet käyttäjätunnus ja accountNumber ovat muuttujia käyttäjätunnus ja accountNumber:
var data = $('body').data(), // data has properties
userId and accountNumber userId = data.userId, accountNumber = data.accountNumber
Muita esimerkkejä toimeksiannoista, joissa nimet muuttujien ja objektien ominaisuudet ovat samat:
ES6, emme voi korvata ES5 koodi ennen näitä lausuntoja:
var { userId, accountNumber} = $('body').data()
var {json} = require('body-parser')
var {username, password} = req.body
Tämä toimii myös taulukot. Hullua!,
var = $('.column'),
= file.split('\n')
Se saattaa kestää jonkin aikaa tottua tuhoa tehtävän syntaksin, mutta se on makea sievistellä kuitenkin.
Enhanced Object Literals in ES6
What you can do with object literals in ES6 is mind blowing! Menimme kirkastettu versio JSON ES5 jotain muistuttavista luokat ES6.
yrityksen kehittämiseen, koodin modularisointi on tärkeää, koska hankkeita ovat suurempia ja on enemmän liikkuvia osia. Tehostetun objektin literals, voit luoda todella vahvoja esineitä täynnä toiminnallisuutta.,
Tässä on tyypillinen ES5 esine kirjaimellinen joitakin menetelmiä ja ominaisuuksia/ominaisuudet:
Jos haluamme olla fancy, voimme periä serviceBase tekemällä siitä prototyyppi Esine.luo menetelmä:
– tiedän, accountServiceES5ObjectCreate ja accountServiceES5 eivät OLE täysin identtisiä, koska yksi esine (accountServiceES5) on ominaisuudet __proto__ – objekti, kuten on esitetty kuva alla:
Mutta yksinkertaisuuden vuoksi tässä esimerkissä tarkastellaan niitä vastaavia., ES6 object literalsissa Voimme käyttää pikakirjoitusta. Esimerkiksi, getAccounts: getAccounts, tulee vain getAccounts.
Myös, voimme vedota super ja on dynaaminen avaimet. Esimerkiksi toString () – menetelmä palauttaa JSON-objektin merkkijonona kutsumalla Superia.valueOf(), ja valueOf_1_2_3 on dynaaminen kiinteistön nimi:
– Tämä on loistava lisälaite hyvä vanha esine literaaleja, koska kehittäjät voivat pakata enemmän logiikkaa ja tehdä enemmän asioita kuin ES5 esineitä!,
Nuoli Toimintoja ES6
Tämä on luultavasti ominaisuus odotin eniten. Rakastin Coffeescriptiä sen lihavista nuolista. Nyt ne ovat ES6: ssa.
rasvaa nuolet ovat uskomattomia, koska he tekevät tätä käyttäytyä oikein, eli tämä on sama arvo kuin osana toimintaa — ei se muuta muotoaan kuten tyypillisesti tapahtuu joka kerta, kun luot sulkeminen. Tämä käytös oli yksi JavaScriptin huonommista osista ja aiheutti usein paljon sekaannusta kielelle uusien kehittäjien kanssa., Käyttämällä nuolia toiminnot ES6 avulla voimme lopettaa käyttämällä että = tämä tai itse = tämä tai _this = tämä tai .sido(tämä).
esimerkiksi, tämä koodi ES5 on ruma, koska voit unohda siirtää yhteydessä sulkemisen kanssa _this:
var _this = this
$('.btn').click(function(event){
_this.sendData()
})
bind() tai soita() lähestymistavat eivät ole paljon parempi, koska niiden monisanaisuus. Mutta katsokaa tämä kaunis ES6 koodi:
$('.btn').click((event) =>{
this.sendData()
})
Valitettavasti, ES6 komitea katsoi, että otto laiha nuolia CoffeeScript oli liian paljon hyvä asia ja jätti meille pitkiä vanha funktion sijaan., (Skinny arrow in CoffeeScript toimii kuten säännöllinen toiminta ES5 ja ES6).
Tässä on toinen esimerkki, jossa käytämme puhelun siirtää yhteydessä logUpperCase () – funktio ES5:
Vaikka ES6, meidän ei tarvitse pelleillä _this:
Huomaa, että voit sekoittaa ja sovittaa vanha toiminto => vuonna ES6 kuin parhaaksi näette. Ja kun nuolifunktiota käytetään yhden rivin lausekkeella, siitä tulee lauseke; ts. se palauttaa implisiittisesti tämän yhden lausuman tuloksen. Jos sinulla on useampi kuin yksi rivi, sinun täytyy käyttää return nimenomaisesti.,
Tämä ES5-koodi on luoda array viestit array:
Tulee tämä ES6:
var ids =
var messages = ids.map(value => `ID is ${value}`) // implicit return
Huomaa, että käytin string malleja? Toinen ominaisuus CoffeeScript … rakastan niitä!
suluissa () ovat valinnaisia yhden params vuonna nuoli toiminto allekirjoitus. Kuitenkin, tarvitset niitä, kun käytät enemmän kuin yksi param. ES5 koodi on toiminto, jossa nimenomaisesti paluu:
Nyt täällä on enemmän kaunopuheinen versio koodi ES6 kanssa suluissa noin params ja implisiittinen tuotto:
ole rasvaa nuolet suuri? Käytä niitä.,
Lupauksia ES6
Lupauksia on ollut kiistanalainen kehittämisen aihe, erityisesti suuremmissa organisaatioissa, joissa se voi olla vaikeampi sopia yhteisestä lähestymistavasta. Yksi syy tähän on määrä lupaus toteutukset käyttäen hieman eri syntaksien — Q, bluebird, laskennallinen.JS, vala, avow ja jquery antoivat vain muutaman nimen. Toinen syy on se, että jotkut ohjelmistoinsinöörit sanovat: ”emme tarvitse lupauksia ja voimme vain käyttää async: tä, generaattoreita, takaisinkutsuja jne.”
Onneksi on mahdollisuus keskusteluihin rauhoittuu standardin Lupauksen täytäntöönpano lisätty ES6!,
tarkastellaan melko triviaali esimerkki viivästynyt asynkronisen suorittamisen kanssa setTimeout():
setTimeout(function(){ console.log('Yay!') }, 1000)
Voimme uudelleen kirjoittaa tämä koodi ES6 kanssa Lupaus:
var wait1000 = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
}).then(function() {
console.log('Yay!')
})
Tai ES6 nuoli toiminnot:
var wait1000 = new Promise((resolve, reject)=> {
setTimeout(resolve, 1000)
}).then(()=> {
console.log('Yay!')
})
toistaiseksi olemme lisänneet useita riviä koodia kolme-viisi ilman mitään selvää hyötyä. Aivan, se vaikuttaa kielteiseltä. Hyöty tulee, jos meillä on sisäkkäisempää logiikkaa takaisinkutsun() sisällä., Esimerkiksi tämä ES5-koodi on kaksi sisäkkäisiä kutsuja:
setTimeout(function(){
console.log('Yay!')
setTimeout(function(){
console.log('Wheeyee!')
}, 1000)
}, 1000)
Se voi olla uudelleen kirjoitettu ES6 lupauksia, kuten niin:
Kuten voit tarkkailla, koodi organisaatio muuttui, kun meidän refactored callbacks-vain koodi koodi lupauksia.
Toinen etu ei koske tässä essee — lupaa myös epäonnistua-ja-saalis-kaikki soittopyyntö, joka on mukava ominaisuus. Katso tästä postauksesta lisätietoja lupauksista: Johdanto ES6-lupauksiin.
Block-Scoped Konstruktioita: Anna ja Const
Olet ehkä jo nähnyt outoja kuulostava anna ES6 koodi., Tämä ei ole vain sokerointia ominaisuus. Se on monimutkaisempaa ja lisää logiikkaa muuttuviin ilmoituksiisi.
let on uusi var, jonka avulla kehittäjät voivat laajentaa muuttujan lohkoihin. Me määrittelemme lohkot kihara henkselit. ES5, lohkot ei MITÄÄN vars kuten tässä:
yllä oleva koodi, tulos on 1000. Vau! Se on todella paha ötökkä. Vuonna ES6, käytämme anna rajoittaa koskemaan korttelin. Vars ovat sitten funktio scoped.
tässä koodissa arvo on 0, koska if-lohkossa on myös let-ilmoitus., Jos siinä ei olisi mitään (määrä=1), niin ilmaisu olisi ollut 1.
Kun se tulee const, asiat ovat helpompia; se vain estää uudelleen määrittäminen, ja se on myös lohko-scoped, kuten anna. Vain osoittaa, täällä on useita vakioita ja koodi toimii hyvin, koska const lausunnot kuuluvat eri lohkot:
vaatimaton mielipiteeni on, anna ja const overcomplicate kieltä. Ilman niitä meillä oli vain yksi käytös, nyt on useita skenaarioita harkittavana., ;-( Ihmisille uusia JavaScript, jotka tulevat kielillä, kuten Java, const ja anna tarjous uusi kerros sisäänrakennettu suojaus joitakin arvaamaton käyttäytyminen.
Luokat ES6
Jos rakastat olio-ohjelmointi (OOP), tulet rakastamaan tätä ominaisuutta. Se tekee ES6: n kirjoitustunneista ja perii niiltä, yhtä helppoa kuin Facebook-kommentista tykkääminen.
ES5: ssä luokkien luominen ja käyttö oli vähintäänkin vaikeaa. Ei ollut avainsanaluokkaa (se oli varattu, mutta ei tehnyt mitään)., Lisäksi, että, on paljon perintö malleja, kuten pseudo-klassinen, klassinen, toimiva lisäsi hämmennystä, kaatamalla bensiiniä tulinen osastojen välillä JavaScript kehittäjille.
en näytä, miten ES5-luokkaan kirjoitetaan, koska kuvioita on paljon. Katsotaanpa ES6: n esimerkkiä heti. Voin kertoa, että ES6-luokassa käytetään prototyyppejä, ei funktiotehtaan lähestymistapaa. Meillä on classbaseModel jossa voimme määritellä konstruktori ja getnimi() menetelmä:
Huomaa, että olen käyttäen parametrin oletusarvot asetukset ja tiedot., Myöskään metodinimillä ei tarvitse olla enää sanafunktiota tai paksusuolta (:). Toinen suuri ero on, että et voi määrittää ominaisuuksia tämän.NIMI samalla tavalla kuin menetelmät, eli et voi sanoa, nimi samaan sisennys tasolla kuin menetelmä. Voit määrittää kiinteistön arvon yksinkertaisesti määrittää arvon konstruktorissa.,
AccountModel ei peri baseModel luokan NIMI ulottuu PARENT_NAME:
class AccountModel extends baseModel {
constructor(options, data) {
soittaa vanhemman rakentaja, vaivattomasti vedota super() kanssa params:
super({private: true}, ) // Call the parent method with super
this.name = 'Account Model'
this.url +='/accounts/'
}
Jos haluat saada todella fancy, voit myös perustaa getter näin accountsData ominaisuus:
get accountsData() { // Calculated attribute getter
// ... make XHR
return this.data
}
}
Joten kun kaikki tämä työ, miten voit todella käyttää tämän luokan abracadabra? On yhtä helppoa kuin huijata kolmevuotias uskomaan Joulupukkiin., Käytä uusia operandi:
let accounts = new AccountModel(5)
accounts.getName()
console.log('Data is %s', accounts.accountsData)
jos mietit, lähtö on:
Class name: Account Model
Data is %s 32113123123,524214691
tietenkin, luokat olemassa CoffeeScript ja vanhemmat JavaScript-standardeja, joten ne eivät ole täysin uusia. Kuitenkin, ES6 käyttäen luokkia on helpotettu, mikä on erityisen tärkeää, että yrityksen kehittäjät, koska he tyypillisesti suurempia hankkeita, jotka kattavat useita joukkueita (joten koodi edellyttää modularisointi).
Moduulit ES6
Kuten ehkä tiedätte, ei ole syntyperäinen moduulit tukevat JavaScript, ennen kuin ES6., Ihmiset keksivät AMD, RequireJS, CommonJS ja muut työkoirat, mutta ne olivat vain että-kiertää ja hakata. ES6 on nyt sisäänrakennettu moduulit tuonti ja vienti operands.
ES5, voit käyttää <käsikirjoitus> tunnisteet ELÄMÄ, tai kirjasto, kuten AMD, kun taas ES6 voit paljastaa oman luokan kanssa viedä. Koska olen solmu.JS guy joten käytän CommonJS, joka on myös solmu.JS syntaksi, tämän ongelman ratkaisemiseksi. Se on melko helppo käyttää CommonJS selaimessa Browserify Niputtaja., Sanotaan, että meillä on porttimuuttuja ja getAccounts menetelmä ES5 moduuli.js:
module.exports = {
port: 3000,
getAccounts: function() {
...
}
}
ES5 tärkein.js, meillä olisi vaatia(’module’), että riippuvuus:
var service = require('module.js')
console.log(service.port) // 3000
ES6, haluamme käyttää vienti ja tuonti. Tämä on esimerkiksi ES6-moduulin kirjastomme.js-tiedosto:
export var port = 3000
export function getAccounts(url) {
...
}
maahantuoja ES6-tiedoston main.JS, käytämme import {name} ’my-module’ syntaksista., Esimerkiksi voimme tuoda esineitä/menetelmät-portti, ja getAccounts päässä moduuli nimeltään moduuli:
import {port, getAccounts} from 'module'
console.log(port) // 3000
Tai voimme tuoda kaiken muuttujan palvelun tärkein.js:
import * as service from 'module'
console.log(service.port) // 3000
Huomaa, että natiivi tuki ES6 moduulit selaimissa ei ole tulossa tahansa pian (tätä kirjoitettaessa ainakin), joten tarvitset jotain jspm käyttää ES6 moduulit.
lisätietoja ja esimerkkejä ES6-moduuleista, katso tätä tekstiä. Ja muista, – ei väliä mitä, kirjoittaa modulaarinen JavaScript!,
…ja Käsityksiä vuonna ES6
Tässä on ongelma ES5: kun haluamme kerrata esineitä käyttämällä sen näppäimiä, meidän täytyy poimia avaimet ensin Kohde.näppäin(). Esimerkiksi:
toinen asia foreachin kanssa on se, että sanafunktio pitää kirjoittaa. Mutta ES6: ssa on parempi lausunto! For…lausuma korvaa standardin ja forEach, ja on samanlainen varten…paitsi, että, että…vuonna iteroi avaimet ja…yli arvoja.,
Käyttämällä edellisen koodinpätkä on tieto (kirjat), voimme kerrata käyttäen ja näppäimiä tai käyttäen…seuraavista:
for (let key in books){
console.log(books)
}
Lähdöt avaimet:
Pro Express.js
React Quickly
Full Stack JavaScript
Azat
Kun saat…ja toimii arvot:
for (let book of books){
console.log(book)
}
lähtö varten…on:
Pro Express.js
React Quickly
Full Stack JavaScript
Huomaa, että lähtö varten…ja ohittaa arvon keskeinen tekijä kuin olisi forEach on array:
– Minun henkilökohtainen kokemus työskentelystä käsityksiä on, että ne lisäävät koodin luettavuutta. Tämä on ensiarvoisen tärkeää koodin ylläpitoon yrityksen sovelluksissa.
