Default Parameters in ES6
když píšeme moduly, musíme počítat s případy, kdy budou argumenty vynechány. Jinými slovy, dobré moduly musí být dostatečně inteligentní, aby měly výchozí hodnoty parametrů. V ES5 byste napsali něco jako níže uvedený kód, který používá logické nebo (||):
tato prohlášení fungují dobře, s výjimkou případů edge. Například, pokud hodnota je 0, — a 0, protože je falsy v Javascriptu — podmínkou výchozí hodnotu pevně místo stává hodnotou sama o sobě, jak budete chtít, v některých případech., Samozřejmě, kdo potřebuje 0 jako hodnota (#sarcasmfont), tak jsme prostě ignorovat tuto chybu a používá logiku, NEBO stejně…
Nebo možná případě, pokud/jiného stavu, aby zkontrolovat, pro nedefinované hodnoty:
var getAccounts = function(limit) {
if (typeof limit == 'undefined') limit = 10
...
}
Žádné další! V ES6, můžeme dát výchozí hodnoty přímo v podpis funkce, jako je:
var getAccounts = function(limit = 10) {
...
}
var link = function(height = 50, color = 'red', url = 'http://capitalone.io') {
...
}
To není jen používá méně řádků kódu, ale má zvýšenou čitelnost stejně. Mimochodem, tato syntaxe je podobná Ruby a Pythonu!,
parametry Rest a Spread v ES6
Pokud jste někdy použili nebo napsali funkci JavaScript s proměnnou nebo dokonce neomezeným počtem argumentů, znáte objekt argumentu. Tento objekt obsahuje všechny parametry předané funkci. Problém je v tom, že tento argument objekt není skutečné pole. Pokud chcete explicitně používat funkce jako Seřadit nebo mapovat, musíte je převést na pole. Například tato funkce požadavku převádí argumenty pomocí volání ():
takže existuje v ES6 lepší způsob přístupu k neurčitému počtu argumentů jako pole? Ano!, Je to syntaxe parametrů odpočinku a je definována elipsami…. Například, to je ES6 funkce podpis s ostatními parametr callback, který se stal pole se zbytkem parametry:
function(url, options, ...callbacks) {
var callback1 = callbacks
var callback2 = callbacks
// ...
}
Poznámka: Ve zbytku pole, první parametr je ten, který nemá jméno, např. zpětné volání je na indexu 0, ne 2 jako v ES5 argumenty. Také uvedení dalších pojmenovaných argumentů po parametru rest způsobí chybu syntaxe. Parametr rest je skvělý doplněk k JavaScriptu, protože nahrazuje objekt argumentů, který nebyl skutečným polem.,
V ES5, pokud jste chtěli použít pole jako argument funkce, budete muset použít apply() funkce:
function request(url, options, callback) {
// ...
}
var requestArgs =
request.apply(null, requestArgs)
v ES6, můžeme použít rozšíření parametrů, které vypadají podobně jako zbytek parametrů v syntaxi jako oni používají elipsy…:
function request(url, options, callback) {
// ...
}
var requestArgs =
request(...requestArgs)
ES6 Vývojáři mohou použít k šíření operátora v následujících případech:
šíření provozovatel má podobnou syntaxi ostatní parametry, ale zbytek je použit v definici funkce/deklarace a šíří se používá při volání a literály., Ušetří vývojářům od psaní dalších řádků imperativního kódu, takže jejich znalost a používání je dobrá dovednost.
Šablony Literály v ES6
Šablony literály (nebo interpolace, jak jsou známé v jiných jazycích) jsou způsob, jak výstupní proměnné v řetězci smíšené s nějakým textem, obvykle v uživatelském rozhraní. V ES5 jsme museli přerušit řetězec takhle.,
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id
Naštěstí, v ES6 můžeme použít syntaxi ${NAME} uvnitř zadní zaškrtnutá řetězec:
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
Toto je elegantní a umožňuje vývojářům vidět konečný výsledek struny, na první pohled, místo toho se snaží zhodnotit zřetězení výraz.
ES6 řetězec šablony jsou dobré, ale syntaxe způsobí konflikty v Markdown dokumentace pokud používáte řetězec šablony a inline kód značky, (protože v Markdown inline kód je označen zpět-klíšťata stejně)., Mimochodem, CoffeeScript má to, co si myslím, že lepší řešení, když se to interpoluje double-quited struny (podobně jako Ruby):
var name = "Your name is #{first} #{last}."
var url = "http://localhost:3000/api/messages/#{id}"
Interpolace je dobrý, ale jak pracovat s multi-line text v Javascriptu?
Multi-line Řetězce v ES6
Další báječný syntaktické zlehčování je víceřádkový řetězec. V ES5 jsme museli použít jeden z těchto přístupů a bylo to ošklivé., S zřetězení:
Nebo se uniknout lomítko:
var fourAgreements = 'You have the right to be you.\n\
You can only be you when you do your best.'
Zatímco v ES6, jednoduše využít ve zpětném apostrofu takto:
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 řetězce jsou užitečným doplňkem, pokud budete muset použít hodně textu v kódu jazyka JavaScript.,
Destructuring Úkol v ES6
Destructuring může být těžší pochopit, než multi-line řetězců, protože tam je nějaké kouzlo děje za scénou… řekněme, že máte jednoduché úkoly, kde klíče userId a accountNumber jsou proměnné userId a accountNumber:
var data = $('body').data(), // data has properties
userId and accountNumber userId = data.userId, accountNumber = data.accountNumber
Další příklady úkolů, kde se jména proměnných a objekt vlastnosti jsou stejné:
V ES6, můžeme nahradit ES5 kódu výše, s těmito příkazy:
var { userId, accountNumber} = $('body').data()
var {json} = require('body-parser')
var {username, password} = req.body
Tento také pracuje s poli. Šílený!,
var = $('.column'),
= file.split('\n')
může chvíli trvat, než si zvyknete na syntaxi destruktivního přiřazení,ale přesto je to sladký cukr.
Enhanced Object Literals in ES6
Co můžete dělat s objektovými literály v ES6, je ohromující! Šli jsme z oslavené verze JSON v ES5 na něco, co se podobá třídám v ES6.
v podnikovém vývoji je modularizace kódu důležitá, protože projekty jsou větší a mají větší počet pohyblivých částí. S vylepšenými literály objektů můžete vytvářet opravdu silné objekty načtené funkčností.,
Tady je typický ES5 objekt doslovný s některé metody a atributy/vlastnosti:
chceme-Li mít chuť, můžeme dědit z serviceBase tím, že prototyp s Objektem.vytvořit metodu:
já vím, accountServiceES5ObjectCreate a accountServiceES5 NEJSOU zcela totožné, protože jeden objekt (accountServiceES5) bude mít vlastnosti __proto__ objekt, jak je znázorněno na obrázku níže:
Ale pro účely tohoto příkladu, podívejme se na ně podobné., V objektových literálech ES6 můžeme použít zkratky pro přiřazení. Například getAccounts: getAccounts, stane se jen getAccounts.
také můžeme vyvolat super a mít dynamické klíče. Například metoda toString() vrací objekt JSON jako řetězec voláním super.valueOf(), a valueOf_1_2_3 je dynamická vlastnost jméno:
Tohle je skvělé vylepšení na staré dobré literály objektu, protože vývojáři mohou zabalit více logiky a dělat více věcí, než s ES5 objekty!,
funkce šipky v ES6
toto je pravděpodobně funkce, na kterou jsem čekal nejvíce. Miloval jsem CoffeeScript pro své tlusté šípy. Teď je máme v ES6.
tuk šipky jsou úžasné, protože oni by vám to správně chovat, tj., bude to mít stejnou hodnotu jako v rámci funkce — to nebude mutovat jako obvykle se stane pokaždé, když vytvoříte uzavření. Toto chování bylo jednou z horších částí JavaScriptu a často způsobilo spoustu zmatků s vývojáři novým jazykem., Použití šipek funkce v ES6 nám umožňuje přestat používat, že = to nebo já = tento nebo _this = tento nebo .bind (toto).
například, tento kód v ES5 je ošklivé, protože můžete zapomenout na předávání kontextu uzavření s _this:
var _this = this
$('.btn').click(function(event){
_this.sendData()
})
bind() nebo() přístupy nejsou o moc lepší, protože jejich podrobnost. Ale podívejte se na to docela ES6 kód:
$('.btn').click((event) =>{
this.sendData()
})
Bohužel, ES6 výbor rozhodl, že hubený půjčky šípy z CoffeeScript byl příliš dobrou věc a nechali nás s dlouhým starý funkci místo., (Skinny arrow v Coffeescriptu funguje jako běžná funkce v ES5 a ES6).
Zde je další příklad, ve kterém budeme používat volání projít souvislosti s logUpperCase() funkce v ES5:
Zatímco v ES6, nepotřebujeme, aby nepořádek kolem s _this:
Všimněte si, že můžete kombinovat staré funkce s => v ES6, jak uznáte za vhodné. A když se používá funkce šipky s jedním řádkovým příkazem, stává se výrazem; tj. implicitně vrátí výsledek tohoto jediného prohlášení. Pokud máte více než jeden řádek, budete muset explicitně použít return.,
Tento ES5 kódu je vytvoření pole z pole zprávy:
stane Se to v ES6:
var ids =
var messages = ids.map(value => `ID is ${value}`) // implicit return
Všimněte si, že jsem použil řetězec šablony? Další funkce z CoffeeScript … miluji je!
závorka () je volitelná pro jednotlivé paramy v podpisu funkce šipky. Budete je však potřebovat při použití více než jednoho paramu. V ES5 kód má funkce s explicitním návrat:
zde je výmluvnější verze kódu v ES6, s závorky kolem params a implicitní návrat:
tlustý Nejsou šípy skvělý? Použij je.,
sliby v ES6
sliby byly kontroverzním tématem vývoje, zejména ve větších organizacích, kde může být těžší dohodnout se na společném přístupu. Jedním z důvodů je počet slibných implementací pomocí mírně odlišných syntaxí-Q, bluebird, odloženo.js, slib, avow, a jquery odloženo na jméno jen několik. Dalším důvodem je, že někteří softwaroví inženýři říkají: „nepotřebujeme sliby a můžeme použít pouze async, generátory, zpětné volání atd.“
naštěstí existuje šance, že debaty utiší standardní implementace slibů přidaná do ES6!,
podívejme se na poněkud triviální příklad zpožděním asynchronní provedení s setTimeout():
setTimeout(function(){ console.log('Yay!') }, 1000)
můžeme přepsat tento kód v ES6 s Slib:
var wait1000 = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
}).then(function() {
console.log('Yay!')
})
Nebo s ES6 šipka funkce:
var wait1000 = new Promise((resolve, reject)=> {
setTimeout(resolve, 1000)
}).then(()=> {
console.log('Yay!')
})
zatím jsme zvýšený počet řádků kódu od tří do pěti bez žádné zřejmé výhody. To je pravda, zdá se to kontraintuitivní. Výhoda přijde, pokud budeme mít více vnořené logiky uvnitř setTimeout () zpětné volání., Například, to ES5 kódu má dvě vnořené volání:
setTimeout(function(){
console.log('Yay!')
setTimeout(function(){
console.log('Wheeyee!')
}, 1000)
}, 1000)
To může být re-psaný s ES6 sliby jako:
Jak vidíte, kód organizace se změnilo, když jsme refactored zpětná volání-pouze kódu do kódu sliby.
další výhoda, na kterou se tato esej nevztahuje-sliby mají také zpětné volání selhání a úlovku, což je pěkná funkce. Podívejte se na tento příspěvek pro více informací o slibech: Úvod do ES6 sliby.
Block-Scoped Constructs: Let a Const
možná jste již viděli podivné znějící nechat v ES6 kódu., Nejedná se pouze o funkci cukrování. Je to složitější a přidává více logiky do variabilních deklarací.
let je nový var, který umožňuje vývojářům rozsah proměnné do bloků. Definujeme bloky kudrnatými příchytkami. V ES5 bloky neudělaly nic Varům, jak je vidět zde:
v kódu výše bude výsledek 1000. Páni! To je opravdu špatný brouk. V ES6 používáme let k omezení rozsahu na bloky. Vars jsou pak funkce scoped.
v tomto kódu je hodnota 0, protože blok if má také deklaraci let., Pokud by to nemělo nic (částka=1), pak by výraz byl 1.
pokud jde o const, věci jsou jednodušší; to jen zabraňuje přeřazení, a to je také blok-scoped jako let. Stačí prokázat, zde je několik konstant a kód funguje dobře, protože const prohlášení patří do různých bloků,
podle mého skromného názoru, nechť a const komplikovaný jazyk. Bez nich jsme měli pouze jedno chování, nyní je třeba zvážit několik scénářů., ;-( Pro lidi nové JavaScriptu, kteří přicházejí z jazyků, jako je Java, const a let, nabízejí novou vrstvu vestavěné ochrany před nějakým nepředvídatelným chováním.
třídy v ES6
Pokud máte rádi objektově orientované programování (OOP), pak budete milovat tuto funkci. To dělá psaní tříd v ES6, a dědí z nich, stejně snadné jako Líbí Komentář na Facebook.
v ES5 bylo vytvoření a použití tříd obtížné přinejmenším. Nebyla třída klíčových slov (byla vyhrazena, ale neudělala nic)., Kromě toho, spousta dědičných vzorů, jako je pseudo klasický, klasický, funkční přidán do zmatku, nalévání benzínu na ohnivé rozdělení mezi vývojáři JavaScriptu.
nebudu vám ukazovat, jak napsat třídu v ES5, protože existuje mnoho vzorů. Podívejme se hned na příklad ES6. Mohu vám říci, že třída ES6 bude používat prototypy, nikoli funkční tovární přístup. Máme classbaseModel, ve kterém můžeme definovat konstruktor a getName() metoda:
Všimněte si, že používám výchozí hodnoty parametrů pro možnosti a údaje., Názvy metod také nemusí mít funkci word nebo dvojtečku (:). Dalším velkým rozdílem je, že nemůžete přiřadit vlastnosti this.NAME stejně jako metody, tj. nemůžete říci jméno na stejné úrovni odsazení jako metoda. Chcete-li nastavit hodnotu vlastnosti, jednoduše přiřaďte hodnotu v konstruktoru.,
AccountModel se dědí od baseModel s NÁZEV třídy rozšiřuje PARENT_NAME:
class AccountModel extends baseModel {
constructor(options, data) {
volání rodičovského konstruktoru, bez námahy vyvolat super() s parametry:
super({private: true}, ) // Call the parent method with super
this.name = 'Account Model'
this.url +='/accounts/'
}
Pokud chcete být opravdu fantazie, můžete také nastavit kariérista, jako je to s accountsData jako vlastnost:
get accountsData() { // Calculated attribute getter
// ... make XHR
return this.data
}
}
po tom všem práci, jak se vlastně použít tuto třídu abrakadabra? Je to stejně snadné jako podvádět tříletého chlapce, aby věřil v Santa Clause., Použití nové operand:
let accounts = new AccountModel(5)
accounts.getName()
console.log('Data is %s', accounts.accountsData)
V případě, že jste přemýšlel, výstup je:
Class name: Account Model
Data is %s 32113123123,524214691
samozřejmě, třídy existovaly v CoffeeScript a starší JavaScript standardy tak nejsou zcela nové. V ES6 však bylo používání tříd usnadněno, což je zvláště důležité pro vývojáře podniků, protože obvykle pracují na větších projektech pokrývajících více týmů (takže kód vyžaduje modularizaci).
moduly v ES6
Jak možná víte, neexistovala podpora nativních modulů v JavaScriptu před ES6., Lidé přišli s AMD, RequireJS, CommonJS a další řešení, ale oni byli jen to-řešení a hacky. S ES6 jsou nyní vestavěné moduly s importními a exportními operandy.
V ES5, měli byste použít <skript> značky s ŽIVOT, nebo knihovna jako AMD, zatímco v ES6 můžete vystavit své třídě s export. Protože jsem uzel.js guy takže budu používat CommonJS, což je také uzel.syntaxe js, k vyřešení tohoto problému. Je poměrně jednoduché používat CommonJS v prohlížeči s balíčkem Browserify., Řekněme, že máme port proměnnou a getAccounts metodu v modulu ES5.js:
module.exports = {
port: 3000,
getAccounts: function() {
...
}
}
v ES5 main.js, Požadovali bychom (‚modul‘) tuto závislost:
var service = require('module.js')
console.log(service.port) // 3000
V ES6 bychom použili export a import. Jedná se například o naši knihovnu v modulu ES6.soubor js:
export var port = 3000
export function getAccounts(url) {
...
}
v hlavním souboru dovozce ES6.js, používáme import {name} ze syntaxe „my-module“., Například, můžeme importovat objekty/metody přístavu, a getAccounts z modulu s názvem modulu:
import {port, getAccounts} from 'module'
console.log(port) // 3000
Nebo můžeme importovat vše jako variabilní služby v hlavní.js:
import * as service from 'module'
console.log(service.port) // 3000
Všimněte si, že nativní podpora ES6 modulů v prohlížečích nepřijde v dohledné době (jak tohoto psaní), takže budete potřebovat něco jako jspm využít ES6 moduly.
Další informace a příklady modulů ES6 naleznete v tomto textu. A nezapomeňte — bez ohledu na to, napište modulární JavaScript!,
pro … porozumění v ES6
zde je problém s ES5: když chceme iterovat objekty pomocí jeho klíčů,musíme tyto klíče nejprve extrahovat objektem.šipka(). Například:
dalším problémem s forEach je, že musíte napsat funkci word. Ale v ES6 je lepší prohlášení! Pro … prohlášení nahrazuje standard pro a forEach, a je podobný for…in až na to, že for…in iteruje přes klíče a pro … nad hodnotami.,
Pomocí předchozího kódu data (knihy), můžeme iterovat pomocí k…v a klíče, nebo pomocí…:
for (let key in books){
console.log(books)
}
Výstupy klíče:
Pro Express.js
React Quickly
Full Stack JavaScript
Azat
Zatímco pro…bude pracovat s hodnotami:
for (let book of books){
console.log(book)
}
výstup pro…:
Pro Express.js
React Quickly
Full Stack JavaScript
Všimněte si, že výstup pro…ignoruje hodnotu s klíčem autor jako by forEach na pole:
Moje osobní zkušenosti z práce s comprehensions je to, že zvyšují čitelnost kódu. To je prvořadé pro údržbu kódu v podnikových aplikacích.
