ES6 přinesl vývojářům JavaScriptu obrovskou novou sadu funkcí a aktualizací syntaxe, ze kterých mohou být nadšení. Některé z těchto jazykových aktualizací jsou poměrně velké, ale některé z nich jsou malé aktualizace, které byste přehlédli, kdybyste nebyli opatrní – proto jsem psal o Six Tiny But Awesome ES6 Features, seznamu maličkostí, které mohou mít velký rozdíl když kódujete pro dnešní prohlížeče. Chtěl jsem se s vámi podělit o šest dalších skvostů, které můžete začít používat ke snížení kódu a maximalizaci efektivity.
1. Objektový těsnopis
Nová zkrácená syntaxe vytváření objektů umožňuje vývojářům vytvářet objekty klíč => hodnota bez definování klíče:název proměnné se stane klíčem a hodnota proměnné se stane hodnotou nového objektu:
var x = 12; var y = 'Yes!'; var z = { one: '1', two: '2' }; // The old way: var obj = { x: x, y: y, z: z }; var obj = { x, y, z }; /* { x: 12, y: "Yes!", z: { one: '1', two: '2' } } */
Nemohu vám říci, kolikrát jsem ručně kódoval vlastnosti klíče => hodnoty přesně stejným způsobem – nyní máme pouze kratší způsob dokončení tohoto úkolu.
2. Vlastnosti metody
Pokud jde o tyto tipy ES6, zdá se, že jsem posedlý tím, abych se vyhnul přidání function
klíčové slovo...a myslím, že tento tip se neliší. V každém případě můžeme zkrátit deklarace funkcí objektu a la:
// Format: { myFn(param1) { ... } } var davidwalsh = { makeItHappen(param) { /* do stuff */ } }
Musíte uznat, že vynechání všech function
Klíčové slovo šílenství přináší čistší kód a méně údržby.
3. Bloky vs. okamžitě provedené funkce
Vzor pro vytváření okamžitě vykonávaných funkcí je trochu ošklivý:
(function() { /* do stuff */ })();
S ES6 můžeme vytvořit blok s pouhými {}
a s let
, můžeme okamžitě provést chování podobné funkcím bez všech závorek:
{ let j = 12; let divs = document.querySelectorAll('div'); /* do more stuff */ } j; // ReferenceError: j is not defined...
Pokud deklarujete funkci v rámci bloku, dojde k jejímu úniku, ale pokud dodržíte let
, v podstatě jste vytvořili IEF bez závorek.
4. for
smyčky a let
Kvůli zvedání proměnných v JavaScriptu jsme často buď deklarovali „neužitečné“ proměnné iterátoru v horní části bloků, kód for(var x =...
, nebo nejhorší ze všeho zapomenout udělat jedno z toho, a tak uniknout globální...jen proto, abyste prošli zatraceně iterovatelným. ES6 tuto nepříjemnost opravuje a umožňuje nám používat let
jako lék:
for(let x = 0; x <= elements.length; x++) { console.log(x); // x increments } x; // ReferenceError: x is not defined
V blízké budoucnosti uvidíme let
používá se tolik, ne-li více než var
.
5. get
a set
pro třídy
Jako člen týmu MooTools jsem byl velkým fanouškem tříd v JavaScriptu, než se třídy JavaScript staly skutečnou záležitostí. Teď je z nich věc:
class Cart { constructor(total) { this._total = total; } get total() { return this._total; } set total(v) { this._total = Number(v); } get totalWithTax() { return parseInt(this._total * 1.1, 10); } /* 10% tax */ } var cart = new Cart(100); cart.totalWithTax === 110;
Nejlepší na tom je nová schopnost vytvářet getry a settery pro vlastnosti! Není třeba vytvářet speciální nastavení pomocí funkcí – tyto se automaticky spustí, když jsou nastaveny pomocí základního obj.prop = {value}
.
6. startsWith
, endsWith
a includes
Příliš dlouho jsme kódovali naše vlastní základní funkce String – pamatuji si, že jsme to dělali na začátku MooTools. startsWith
, endsWith
a includes
Řetězcové funkce jsou příklady takových funkcí:
"MooTools".startsWith("Moo"); // true; "MooTools".startsWith("moo"); // false; "MooTools".endsWith("Tools"); // true; "MooTools".includes("oo"); // true;
Vidět, jak se funkce zdravého rozumu dostávají do jazyka, je neuvěřitelně uspokojující;
ES6 byl pro JavaScript neuvěřitelný skok vpřed. Tipy, na které jsem poukázal v tomto příspěvku a v předchozím příspěvku, ukazují, že i ty nejmenší aktualizace ES6 mohou mít velký vliv na údržbu. Nemůžu se dočkat, až uvidím, co nám přinese další kolo aktualizací JavaScriptu!