ECMAScript 6 - 10 Úžasné nové funkce

Věděli jste, že JavaScript (spolu s jazykem JScript a ActionScript) je implementací specifikace skriptovacího jazyka na straně klienta nazvané ECMAScript? Aby tato ošklivá definice byla o něco přitažlivější, můžeme říci, že ECMAScript (nebo oficiálně ECMA-262) je standard, který definuje, jak používáme JavaScript, a to, čeho můžeme dosáhnout s tím.

Poslední, 6. vydání tohoto jazyka, ECMAScript 2015 (nebo ES6) je pravděpodobně nejvýznamnější aktualizací od první verze v roce 1997. Hlavním cílem nejnovější verze bylo poskytnout lepší podporu pro vytváření větších aplikací a knihoven. To znamená zralejší syntaxi, nové zkratky usnadňující kódování a také nové metody, klíčová slova, datové typy a mnoho dalších vylepšení.

Dokumentace ES6 je rozsáhlá, pokud chcete hodně přečíst, můžete si stáhnout celé specifikace z webových stránek ECMA International. V tomto příspěvku se podíváme na 10 vybraných funkcí, i když ES6 nabízí mnohem více. Pokud s ním chcete experimentovat, ES6 Fiddle je skvělým místem, kde to můžete udělat..

Podpora pro ECMAScript 6

Dodavatelé prohlížečů postupně přidávají podporu pro funkce systému ECMAScript 6. Zde naleznete skvělou tabulku kompatibility o podpoře prohlížeče a kompilátoru pro nové funkce.

Pokud máte zájem o podporu ES6 v Node.js, podívejte se na dokumentaci zde.

Ačkoli ne všechny funkce jsou v současné době podporovány, můžeme použít transpilers jako Babel k transpile našeho kódu ES6 na ES5. Tam je cool Grunt plugin pro Babel, mnoho úžasné ES6 pluginy pro Grunt, a úžasné Gulp-Babel plugin tam, takže naštěstí máme spoustu možností.

Tímto způsobem můžeme začít používat vylepšenou syntaxi a možnosti, přičemž se nemusíme obávat problémů s kompatibilitou. Podívejme se nyní na vlastnosti.

1. Novinka nechat Klíčové slovo

ES6 představuje nový nechat klíčové slovo, které nám umožňuje deklarovat lokální proměnné v rozsahu bloku, například příkaz, výraz nebo funkci (n vnitřní). Můžeme například deklarovat pro smyčku následujícím způsobem, pak znovu použijte stejný název proměnné (protože jeho rozsah je omezen na pro smyčky) uvnitř dalšího -li prohlášení:

 pro (let i = 0; i < myArray.length; i++)  // Do something inside the block  if (x > 0 && x! = Y) // Opětovně používáme "i" let i = x * y

Za použití nechat klíčové slovo vede k čistšímu a použitelnějšímu kódu. Rozdíl mezi nechat a var je v rozsahu, například lokální proměnná definovaná pomocí var klíčové slovo lze použít v celé uzavírací funkci, zatímco proměnné definované nechat pracovat pouze ve vlastním (pod) bloku. Nechat lze také použít globálně, v tomto případě se chová stejně jako var. Samozřejmě, že v ES6 můžeme stále používat var pokud chceme.

2. Novinka konst Klíčové slovo

Nové konst klíčové slovo umožňuje deklarovat konstanty, také známé jako neměnné proměnné, kterým později nemůžeme nový obsah přiřadit.

 const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Tichá chyba, protože nemůžeme znovu přiřadit novou hodnotu konstantě

Neměnné proměnné nejsou vždy plně neměnné v ECMAScript 6, i když konstanta drží objekt, můžeme později změnit hodnotu jeho vlastností a metod. Totéž platí pro prvky pole.

 const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22

Stále nemůžeme přímo přenést novou hodnotu na objekt MY_CONSTANT ve výše uvedeném útržku kódu, což znamená, že nemůžeme měnit názvy vlastností a metod, také nemůžeme přidat nové nebo odstranit existující, takže nemůžeme provést následující věc:

 MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // chyba

3. Funkce šipek

ECMAScript 6 usnadňuje psaní anonymní funkce, jak můžeme zcela vynechat funkce klíčové slovo. Potřebujeme použít pouze novou syntaxi funkce šipek, pojmenovaný po znaku šipky => (tlustá šipka), který nám poskytuje skvělou zkratku.

 // 1. Jeden parametr v ES6 let sum = (a, b) => a + b; // v ES5 var sum = funkce (a, b) return a + b; ; // 2. Bez parametrů v ES6 nechť randomNum = () => Math.random (); // v ES5 var randomNum = function () return Math.random (); ; // 3. Bez návratu v ES6 nechť message = (name) => alert ("Hi" + name + "!"); // v ES5 var message = function (yourName) alert ("Hi" + yourName + "!"); ;

Je zde důležitý rozdíl mezi běžnými a šipkovými funkcemi, to znamená, že funkce šipek neobdrží tento hodnota automaticky jako funkce definované pomocí funkce klíčové slovo. Funkce šipek lexicky se váže tento hodnotu. To znamená, že můžeme snadno znovu použít tento klíčové slovo ve vnitřní funkci. V ES5 je to možné pouze s následujícím hackem:

 // ES5 Hack použít klíčové slovo "this" ve vnitřní funkci … addAll: function addAll (pieces) var self = this; _.each (kusy, funkce (kus) self.add (kus);); ,… // ES6 stejná vnitřní funkce nyní může použít svůj vlastní "this" … addAll: function addAll (pieces) _.each (pieces, piece => this.add (piece)); ,…

Výše uvedený kód je z Mozilla Hacks

4. Novinka rozpětí Operátor

Nové rozpětí operátor je označen třemi tečkami (…) a můžeme jej použít k označení místa více očekávaných položek. Jedním z nejčastějších případů použití operátoru spread je vložení prvků pole do jiného pole:

 nechť myArray = [1, 2, 3]; nechte newArray = [… myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6 

Můžeme také využít páku rozpětí operátor ve volání funkcí, ve kterých chceme předávat argumenty z pole:

 nechť myArray = [1, 2, 3]; funkce součet (a, b, c) return a + b + c;  console.log (sum (… myArray)); // 6

rozpětí operátor je poměrně flexibilní, protože může být používán vícekrát ve stejném poli nebo volání funkce.

5. Výchozí hodnoty pro parametry a nové parametry odpočinku

Dobrou zprávou je, že v ECMAScriptu 6 můžeme k parametrům funkce přidat výchozí hodnoty. To znamená, že pokud neprojdeme argumenty později ve volání funkce, použijí se výchozí parametry. V ES5 jsou vždy nastaveny výchozí hodnoty parametrů undefined, tak nová možnost, jak je postavit na cokoliv, je určitě velkým zdokonalením jazyka.

 součet funkcí (a = 2, b = 4) return a + b;  console.log (sum ()); // 6 console.log (součet (3, 6)); // 9

ES6 také zavádí nový druh parametru zbytkové parametry. Vypadají a pracují podobně jako provozovatelé šíření. Jsou užitečné, pokud nevíme, kolik argumentů bude předáno později ve volání funkce. Můžeme použít vlastnosti a metody objektu Array na parametrech odpočinku:

 funkce putInAlphabet (… args) let sort = args.sort (); návrat tříděný;  console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t

6. Novinka pro… z Prohlášení

S pomocí nového pro… z smyčku můžeme snadno iterovat přes pole nebo jiné iterovatelné objekty. Spolu s novým pro… z ECMAScript 6 zavádí také dva nové iterovatelné objekty, Mapy pro mapy klíčů / hodnot a Set pro sbírky jedinečných hodnot, které mohou být také primitivní hodnoty a odkazy na objekty. Když používáme pro… z příkaz, kód uvnitř bloku je proveden pro každý prvek iterovatelného objektu.

 nechat myArray = [1, 2, 3, 4, 5]; let sum = 0; pro (nechte i of myArray) sum + = i;  console.log (součet); // 15 (= 1 + 2 + 3 + 4 + 5)

7. Literatura šablony

ECMAScript 6 nám poskytuje novou alternativu zřetězení řetězců. Šablony literály dovolte nám snadno vytvořit šablony, do kterých můžeme vložit libovolné hodnoty na jakékoli místo, které chceme. K tomu potřebujeme použít $ … syntaxi všude tam, kde chceme vložit data, která můžeme předávat z proměnných, polí nebo objektů následujícím způsobem:

 Let customer = název: 'Ms', křestní jméno: 'Jane', příjmení: 'Doe', věk: '34'; let template = 'Vážení $ customer.title $ customer.firstname $ customer.surname! Happy $ customer.age narozeniny! '; console.log (šablona); // Vážená paní Jane Doe! Všechno nejlepší k 34. narozeninám!

8. Třídy

ES6 představuje třídy JavaScript, které jsou postaveny na existujícím dědictví založeném na prototypu. Nová syntaxe usnadňuje vytváření objektů, využití pákového efektu a kód opětovného použití. To také usnadní začátečníkům přicházejícím z jiných programovacích jazyků pochopit, jak JavaScript funguje.

Ve třídě ES6 jsou deklarovány nové třída klíčové slovo, a musí mít konstruktor () metoda, která se nazývá, když je nový objekt vytvořen instancí pomocí new myClass () syntax. Je také možné rozšířit nové třídy o třída Dítě rozšiřuje Parent syntaxi, která může být známa z jiných objektově orientovaných jazyků, jako je PHP. Je také důležité vědět, že na rozdíl od deklarací funkcí a proměnných nejsou deklarace třídy v modulu ECMAScript 6 vyvěšeny.

 třída Polygon konstruktor (height, width) // class konstruktor this.name = 'Polygon'; this.height = výška; this.width = šířka;  sayName () // metoda třídy console.log ('Ahoj, já jsem', this.name + '.');  nechť myPolygon = nový Polygon (5, 6); console.log (myPolygon.sayName ()); // Ahoj, jsem polygon.

Výše uvedený kód z příkladů ES6 Fiddle, .

9. Moduly

Přemýšleli jste někdy o tom, jak cool by bylo, kdyby JavaScript byl modulární? Samozřejmě existovala možná řešení, jako je například CommonJS (používaná v Node.js) nebo AMD (Asynchronous Module Definition) (používaná v RequireJS), aby to udělala dříve, ale ES6 zavádí moduly jako nativní prvek.

Potřebujeme definovat každý modul v jeho vlastním souboru a pak použít vývozní klíčové slovo pro export proměnných a funkcí na další soubory a import k jejich importu z další soubory podle následující syntaxe:

 // function.js funkce kostka (a) return a * a * a;  funkce cubeRoot (a) return Math.cbrt (a);  export krychle, cubeRoot / nebo: export cube jako cb, cubeRoot jako cr // app.js import cube, cubeRoot z 'funkcí'; console.log (krychle (4)); // 64 console.log (cubeRoot (125)); // 5

Toto řešení je brilantní, protože kód uložený v modulu je zvenčí neviditelný a potřebujeme exportovat pouze část, ke které chceme získat přístup jinými soubory. Díky modulům ES6 můžeme udělat mnohem více úžasných věcí, zde najdete velké a podrobné vysvětlení.

10. Zatížení nových metod

ECMAScript 6 zavádí mnoho nových metod pro existující String Prototype, Array Object, Aroty Prototype a Math Object. Nové metody mohou výrazně zlepšit způsob, jakým můžeme tyto entity manipulovat. Mozilla Dev má skvělé příklady kódů nových příloh, stojí za to si to vzít čas a důkladně je prozkoumat.

Jen abych ukázal, jak jsou skutečně cool, zde je můj nejoblíbenější: způsob hledání prototypu Array, který nám umožňuje testovat určitá kritéria na prvcích pole prováděním funkce zpětného volání na každém prvku a poté vracet první prvek, který vrátí skutečný.

 funkce isPrime (element, index, array) var start = 2; zatímco (start <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1;  console.log ([4, 6, 8, 12] .find (isPrime)); // undefined, nenalezeno console.log ([4, 5, 8, 12] .find (isPrime)); // 5

Výše uvedený kód: Mozilla Dev