alapértelmezett paraméterek ES6
amikor modulokat írunk, figyelembe kell vennünk azokat az eseteket, amikor az argumentumok elhagyásra kerülnek. Más szavakkal, a jó moduloknak elég okosnak kell lenniük ahhoz, hogy a paraméterek alapértelmezett értékei legyenek. Az ES5-ben valami olyasmit írna, mint az alábbi kód, amely a logikai vagy (||):
Ezek az állítások jól működnek, kivéve az éles eseteket. Például, ha az érték 0-és mivel 0 falsy a JavaScript — ben-a feltétel alapértelmezés szerint a kemény kódolt értéket jelenti, ahelyett, hogy maga az érték lenne, ahogy bizonyos esetekben érdemes., Természetesen, akinek szüksége van 0 mint érték (#szarkazmfont), így csak figyelmen kívül hagyta ezt a hibát, és használta a logika, vagy egyébként …
vagy talán esemény egy if / else feltétel, hogy ellenőrizze a meghatározatlan érték:
var getAccounts = function(limit) {
if (typeof limit == 'undefined') limit = 10
...
}
nincs több! Az ES6-ban az alapértelmezett értékeket közvetlenül a funkciók aláírásába helyezhetjük:
var getAccounts = function(limit = 10) {
...
}
var link = function(height = 50, color = 'red', url = 'http://capitalone.io') {
...
}
Ez nem csak kevesebb kódsort használ, hanem növeli az olvashatóságot is. By the way, ez a szintaxis hasonló a Ruby and Python!,
Rest and Spread Parameters in ES6
Ha valaha is használt vagy írt egy JavaScript függvényt változó vagy akár korlátlan számú argumentummal, akkor ismeri az argumentum objektumot. Ez az objektum tartalmazza a funkcióhoz átadott összes paramétert. A probléma az, hogy ez az argumentum objektum nem valódi tömb. Ha olyan funkciókat szeretne használni, mint a rendezés vagy a térkép kifejezetten. Például ez a kérés funkció konvertálja az argumentumokat call():
szóval van-e jobb módja az ES6-ban határozatlan számú argumentum tömbként való eléréséhez? Igen!, Ez rest paraméterek szintaxis és ez határozza meg ellipszis …. Például, ez ES6 funkció aláírás, a többi paraméter hívás vált egy tömb a többi paraméterek:
function(url, options, ...callbacks) {
var callback1 = callbacks
var callback2 = callbacks
// ...
}
Megjegyzés: a tömb többi, az első paraméter az egyik, hogy nincs neve, pl. a visszahívási az index 0, nem, 2, mint a ES5 érveit. Továbbá, ha más megnevezett argumentumokat helyez el a többi paraméter után, szintaktikai hibát okoz. A rest paraméter egy nagy sugarcoating mellett JavaScript mivel helyettesíti az argumentumok objektum, amely nem volt egy igazi tömb.,
A ES5, ha akartam használni egy tömb, mint egy érv a funkciót, akkor kell használni az apply() függvény:
function request(url, options, callback) {
// ...
}
var requestArgs =
request.apply(null, requestArgs)
Most ES6, tudjuk használni az elterjedt paraméterek, amelyek hasonlítanak a többi paraméter a szintaxis, mint használnak három pontra…:
function request(url, options, callback) {
// ...
}
var requestArgs =
request(...requestArgs)
ES6 a Fejlesztők használhatják a spread a szolgáltató a következő esetekben:
A spread üzemeltető hasonló szintaxist, hogy a többi paraméter, de a többi használják a funkció meghatározás/nyilatkozat elterjedt használják a hívások, valamint közvetlen használata erősen kerülendő., Megmentik a fejlesztőket a kötelező kód extra sorainak beírásától, így a tudás és a használatuk jó készség.
sablon Literals in ES6
sablon literals (vagy interpoláció, mint ők ismert más nyelveken) egy módja annak, hogy a kimeneti változók a karakterlánc keverve néhány szöveget, jellemzően felhasználói felületek. Az ES5-ben így kellett megtörnünk a húrot.,
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id
Szerencsére a ES6 tudjuk használni egy új szintaxis ${NÉV} belül a vissza-pipa string:
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
Ez milyen lehetővé teszi a fejlesztők számára, hogy a végeredmény a húrok egy pillantásra ahelyett, hogy értékelje az összefűzés kifejezés.
ES6 karakterlánc sablonok jók, de a szintaxis konfliktusokat okoz a Markdown dokumentációban, ha string sablonokat és inline kód jelölést használ (mert a Markdown inline kódban is vannak back-kullancsok)., By the way, CoffeeScript van, amit gondolok egy jobb megoldás, ha interpolálja kettős quited húrok (hasonló Ruby):
var name = "Your name is #{first} #{last}."
var url = "http://localhost:3000/api/messages/#{id}"
interpoláció jó, de hogyan működik a többsoros szöveg JavaScript?
többsoros karakterláncok ES6
egy másik finom szintaktikai sugarcoating többsoros karakterlánc. Az ES5-ben egy ilyen megközelítést kellett alkalmaznunk, ami csúnya volt., A összefűzéssel:
vagy escape slash:
var fourAgreements = 'You have the right to be you.\n\
You can only be you when you do your best.'
míg az ES6-ban egyszerűen használja a hátlapokat az alábbiak szerint:
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.`
többsoros karakterláncok hasznos kiegészítések, ha sok szöveget kell használnia a JavaScript kódjában.,
Destructuring Feladat az ES6
Destructuring lehet egy nehezebb megérteni, mint a multi-line húrok, mert van egy kis varázslat történik a színfalak mögött… tegyük fel, hogy egyszerű feladatok, ahol a kulcsok userId pedig accountNumber változó userId pedig accountNumber:
var data = $('body').data(), // data has properties
userId and accountNumber userId = data.userId, accountNumber = data.accountNumber
Egyéb példák, feladatok, ahol a nevek, a változók, valamint az objektum tulajdonságai ugyanazok:
A ES6, pótolni tudjuk a ES5 fenti kód ezekkel a kijelentésekkel:
var { userId, accountNumber} = $('body').data()
var {json} = require('body-parser')
var {username, password} = req.body
Ez is működik, tömbök. Őrült!,
var = $('.column'),
= file.split('\n')
lehet, hogy egy kis időt vesz igénybe, hogy megszokja a destructuring hozzárendelés szintaxist, de ez egy édes cukornád mindazonáltal.
Enhanced Object Literals in ES6
mit lehet tenni a tárgy literálok ES6 észbontó! Az ES5-ben a JSON dicsőített verziójától valami nagyon hasonló osztályokig mentünk az ES6-ban.
a vállalatfejlesztésben a kódmodularizáció azért fontos, mert a projektek nagyobbak, és nagyobb számú mozgó alkatrészük van. A továbbfejlesztett objektum literálokkal nagyon erős objektumokat hozhat létre, amelyek funkcionalitással vannak betöltve.,
itt van egy tipikus ES5 objektum szó néhány módszer és attribútumok / tulajdonságok:
Ha azt akarjuk, hogy divatos, mi lehet örökölni serviceBase azáltal, hogy a prototípus az objektum.módszer létrehozása:
tudom, accountServiceES5ObjectCreate and accountServiceES5 nem teljesen azonosak, mert egy objektum (accountServiceES5) lesz a tulajdonságok a __proto__ objektum látható az alábbi ábrán:
div>
de a példa kedvéért hasonlónak tekintsük őket., Az ES6 objektum literálokban rövid kezeket használhatunk a hozzárendeléshez. Például getAccounts: getAccounts, válik csak getAccounts.
is, akkor hivatkozhat super és dinamikus kulcsokat. Például a toString () metódus egy JSON objektumot ad vissza karakterláncként a super hívásával.valueOf(), és valueOf_1_2_3 egy dinamikus tulajdonság neve:
Ez egy nagy javítása a jó régi tárgy literálok, mert a fejlesztők csomag több logika és nem több dolog, mint az ES5 tárgyakkal!,
nyíl funkciók ES6
Ez valószínűleg a funkció vártam a legtöbb. Imádtam CoffeeScript a kövér nyilak. Most az ES6-ban vannak.
a kövér nyilak csodálatosak, mert azt teszik, hogy ez megfelelően viselkedjen, azaz ennek ugyanaz az értéke lesz, mint a funkció összefüggésében — ez nem változik, mint általában minden egyes Bezárás létrehozásakor. Ez a viselkedés a JavaScript egyik rosszabb része volt, gyakran sok zavart okozott a nyelv új fejlesztőivel., A nyilak használata az ES6-ban lehetővé teszi számunkra, hogy abbahagyjuk a használatát = ez vagy én = ez vagy _this = ez vagy.bind(ez).
például ez a kód az ES5-ben csúnya, mert elfelejtheti átvinni a kontextust a lezáráshoz _this:
var _this = this
$('.btn').click(function(event){
_this.sendData()
})
a kötés() vagy hívás() megközelítések nem sokkal jobbak a verbositásuk miatt. De vessen egy pillantást erre a szép ES6 kódra:
$('.btn').click((event) =>{
this.sendData()
})
sajnos az ES6 Bizottság úgy döntött, hogy a sovány nyilak kölcsönzése a CoffeeScript-ből túl sok jó dolog volt, és hosszú régi funkciót hagyott nekünk., (Skinny arrow in CoffeeScript works like regular function in ES5 and ES6).
ez Itt egy másik példa, amit használni hívás át a tekintetben, hogy a logUpperCase() függvény a ES5:
Míg ES6, nem kell szórakozni _this:
Megjegyezzük, hogy keverheted régi funkció => a ES6, ahogy jónak látod. Ha pedig egy nyílfüggvényt használunk egysoros kijelentéssel, akkor az kifejezésgé válik; azaz. ez hallgatólagosan visszaadja az egyetlen nyilatkozat eredményét. Ha egynél több sor van, akkor a visszatérést kifejezetten kell használnia.,
Ez az ES5 kód tömböt hoz létre az üzenetek tömbből:
Ez lesz az ES6-ban:
var ids =
var messages = ids.map(value => `ID is ${value}`) // implicit return
figyeljük meg, hogy a karakterlánc sablonokat használtam? Egy másik funkció a CoffeeScript – től … szeretem őket!
a zárójel () nem kötelező egyetlen params egy nyíl függvény aláírás. Azonban szüksége lesz rájuk, ha egynél több paramot használ. Az ES5-ben a kód explicit visszatéréssel rendelkezik:
most itt van a kód ékesszólóbb változata az ES6-ban, zárójelben a params körül, implicit visszatéréssel:
nem nagyszerű a kövér nyilak? Használd őket.,
az ígéretek az ES6-ban
Az ígéretek ellentmondásos fejlesztési téma voltak, különösen a nagyobb szervezeteknél, ahol nehezebb megegyezni egy közös megközelítésben. Ennek egyik oka az ígéretek száma, amelyek kissé eltérő szintaxisokat használnak-Q, bluebird, halasztott.js, vow, avow és jquery csak néhányat említ. Egy másik ok, hogy egyes szoftvermérnökök azt mondják: “nincs szükségünk ígéretekre, csak használhatjuk az async-t, generátorokat, visszahívásokat stb.”
szerencsére van esély arra, hogy a viták elcsendesedjenek az ES6-hoz hozzáadott szokásos ígéret végrehajtásával!,
nézzük meg, meglehetősen triviális példa a késleltetett aszinkron végrehajtás a setTimeout():
setTimeout(function(){ console.log('Yay!') }, 1000)
Mi lehet újra írni ezt a kódot a ES6 Ígérem, hogy:
var wait1000 = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
}).then(function() {
console.log('Yay!')
})
Vagy ES6 nyíl funkciók:
var wait1000 = new Promise((resolve, reject)=> {
setTimeout(resolve, 1000)
}).then(()=> {
console.log('Yay!')
})
eddig nőtt a sorok számát a kódot a három-öt, anélkül, hogy bármilyen egyértelmű előny. Így van, ez ellentmondásosnak tűnik. Az előny akkor jön, ha több beágyazott logika van a setTimeout() visszahívás belsejében., Például ez az ES5 kód két beágyazott visszahívással rendelkezik:
setTimeout(function(){
console.log('Yay!')
setTimeout(function(){
console.log('Wheeyee!')
}, 1000)
}, 1000)
újra lehet írni az ES6 ígéretekkel, mint így:
ahogy megfigyelheti, a kódszervezet megváltozott, amikor csak a visszahívásokat kódoltuk kódra ígéretekkel.
egy másik előny, amely nem szerepel ebben az esszében — az ígéreteknek is van egy fail-and-catch-all visszahívása, ami szép funkció. Vessen egy pillantást erre a bejegyzésre az ígéretekkel kapcsolatos további információkért: Bevezetés az ES6 Ígéretekbe.
Block-Scoped konstrukciók: Let and Const
lehet, hogy már látta a furcsa hangzást az ES6 kódban., Ez nem egyszerűen egy cukornádbevonat funkció. Bonyolultabb, és több logikát ad a változó deklarációkhoz.
let egy új var, amely lehetővé teszi a fejlesztők számára, hogy a változó a blokkokat. A blokkokat a göndör zárójelek alapján határozzuk meg. Az ES5-ben a blokkok nem tettek semmit a vars-hoz, ahogy itt látható:
a fenti kódban az eredmény 1000 lesz. Hűha! Ez egy nagyon rossz bogár. Az ES6-ban a Let használatával korlátozzuk a hatókört a blokkokra. Vars ezután funkció hatókör.
ebben a kódban az érték 0, mert az if blokk rendelkezik a let nyilatkozattal is., Ha nem lenne semmi (összeg=1), akkor a kifejezés 1 lett volna.
ha const-ról van szó, a dolgok könnyebbek; csak megakadályozza az újbóli hozzárendelést, és blokkolt, mint a let. Csak azért, hogy bemutassuk, itt van egy több konstans, és a kód jól működik, mert a const állítások különböző blokkokhoz tartoznak:
szerény véleményem szerint, hagyja, hogy a const túlkomplikálja a nyelvet. Nélkülük csak egy viselkedésünk volt, most több forgatókönyvet kell figyelembe venni., ;- (Azoknak az embereknek, akik új JavaScript, akik jönnek a nyelvek, mint a Java, const, és hadd kínál egy új réteg beépített védelem ellen néhány kiszámíthatatlan viselkedés.
osztályok az ES6-ban
Ha szereted az objektumorientált programozást (OOP), akkor imádni fogod ezt a funkciót. Az ES6-ban írási osztályokat készít, és tőlük örököl, olyan egyszerű, mint a Facebook-on kommentálni.
az ES5-ben az osztályok létrehozása és használata nehéz volt a legkevésbé. Nem volt kulcsszó osztály (ez volt fenntartva, de nem tett semmit)., Ezen kívül, sok öröklési minták, mint a pszeudo klasszikus, klasszikus, funkcionális hozzá a zavart, ömlött benzin a tüzes megosztottság között JavaScript fejlesztők.
nem fogom megmutatni, hogyan kell írni egy osztályt az ES5-ben, mert sok minta van. Vessünk egy pillantást az ES6 példára azonnal. Elmondhatom, hogy az ES6 osztály prototípusokat fog használni, nem pedig a function factory megközelítést. Van egy classbaseModel, amiben definiálhatunk egy konstruktort és egy getName () metódust:
figyeljük meg, hogy az opciók és adatok alapértelmezett paraméterértékeit használom., Ezenkívül a módszerneveknek nem kell többé rendelkezniük a word funkcióval vagy a kettősponttal (:). A másik nagy különbség az, hogy nem rendelhet tulajdonságokat this.NAME ugyanúgy, mint a módszerek, azaz nem mondhat nevet ugyanolyan behúzási szinten, mint egy módszer. Egy tulajdonság értékének beállításához egyszerűen rendeljen hozzá egy értéket a konstruktorhoz.,
a AccountModel örökli baseModel osztálynév kiterjeszti PARENT_NAME:
class AccountModel extends baseModel {
constructor(options, data) {
hívni a szülő konstruktor, könnyedén hivatkozhat super() a params:
super({private: true}, ) // Call the parent method with super
this.name = 'Account Model'
this.url +='/accounts/'
}
Ha azt szeretnénk, hogy nagyon divatos, akkor is létre egy getter, mint ez accountsData, mint ez a tulajdonság:
tehát mindezek után a munka, hogyan ténylegesen használni ezt az osztályt Abracadabra? Ez olyan egyszerű, mint becsapni egy három éves hinni Mikulás., Használjon új operandust:
let accounts = new AccountModel(5)
accounts.getName()
console.log('Data is %s', accounts.accountsData)
Ha kíváncsi, a kimenet:
Class name: Account Model
Data is %s 32113123123,524214691
természetesen az osztályok léteztek a CoffeeScript-ben és a régebbi JavaScript-szabványokban, így nem teljesen újak. Az ES6-ban azonban megkönnyítették az osztályok használatát, ami különösen fontos a vállalati fejlesztők számára, mivel általában több csapatot átfogó nagyobb projekteken dolgoznak (tehát a kód modularizációt igényel).
modulok az ES6-ban
mint tudod, az ES6 előtt nem volt Natív modul támogatás a JavaScriptben., Az emberek jöttek fel AMD, RequireJS, CommonJS és más megoldásokat, de ők csak, hogy-megoldás és hacks. Az ES6-nál már vannak beépített modulok import és export operandusokkal.
az ES5-ben a <script> címkéket használna az IIFE-vel, vagy egy olyan könyvtárat, mint az AMD, míg az ES6-ban exportálhatja az osztályát. Mivel csomópont vagyok.js srác így fogom használni CommonJS, ami szintén egy csomópont.js szintaxis, hogy megoldja ezt a problémát. Meglehetősen egyszerű a CommonJS használata a böngészőben a Browserify bundler segítségével., Tegyük fel, hogy van port változó és getAccounts módszer ES5 modul.js:
module.exports = {
port: 3000,
getAccounts: function() {
...
}
}
in ES5 main.js, mi lenne szükség (“modul”), hogy a függőség:
var service = require('module.js')
console.log(service.port) // 3000
az ES6, akkor használja export és import. Például ez a könyvtárunk az ES6 modulban.js fájl:
export var port = 3000
export function getAccounts(url) {
...
}
az importőr ES6 fájl fő.js, használjuk import {name} a “My-module” szintaxis., Például importálhatunk objektumokat / methods portot, valamint getAccounts-ot a modul nevű modulból:
import {port, getAccounts} from 'module'
console.log(port) // 3000
vagy mindent importálhatunk változó szolgáltatásként.js:
import * as service from 'module'
console.log(service.port) // 3000
vegye figyelembe, hogy az ES6 modulok natív támogatása a böngészőkben nem jön hamarosan (legalábbis ennek az írásnak köszönhetően), így szüksége lesz valami jspm-re az ES6 modulok használatához.
az ES6 modulokkal kapcsolatos további információkért és példákért nézze meg ezt a szöveget. És ne feledd, – nem számít, mit, írj moduláris JavaScript!,
az ES6
megértésének … esetében itt van egy probléma az ES5-Tel: ha a kulcsokkal rendelkező objektumokat akarjuk iterálni, először ki kell vonnunk ezeket a kulcsokat az objektummal.kulcsok (). Például:
a forEach másik problémája az, hogy meg kell írnia a word funkciót. De van egy jobb nyilatkozat az ES6-ban! A for … a nyilatkozat helyettesíti szabvány forEach, és hasonló for…in kivéve, hogy for…in a kulcsokon és a…több mint értékeken át megy.,
az előző kódrészletet adatai (könyvek), tudjuk halad használata…a gombokat, vagy használja a…a:
for (let key in books){
console.log(books)
}
Kimenet a kulcs:
Pro Express.js
React Quickly
Full Stack JavaScript
Azat
Míg az a…az a munka, értékei:
for (let book of books){
console.log(book)
}
A kimenet a…a:
Pro Express.js
React Quickly
Full Stack JavaScript
Figyeljük meg, hogy a kimenet a…a figyelmen kívül hagyja az érték a kulcs szerző, mint a forEach egy tömb:
A személyes tapasztalattal dolgozik a comprehensions, hogy növelik a kód olvashatóságát. Ez kiemelkedő fontosságú a vállalati alkalmazások kódkarbantartásához.
