Co je ES6 a co potřebují programátoři Javascriptu vědět

ES6 odkazuje na verzi 6 programovacího jazyka ECMA Script. ECMA Script je standardizovaný název JavaScriptu. Co je JavaScript a může internet bez něj existovat? Co je to JavaScript a může bez něj existovat internet? JavaScript je jednou z těch věcí, které mnozí považují za samozřejmost. Každý to používá. a verze 6 je další verzí po verzi 5, která byla vydána v roce 2011. Jedná se o významné vylepšení jazyka JavaScript a přidává mnoho dalších funkcí, které mají usnadnit vývoj softwaru ve velkém měřítku.

ECMAScript, nebo ES6, byl publikován v červnu 2015. Následně byl přejmenován na ECMAScript 2015. Podpora plného jazyka webového prohlížeče není dosud úplná, přestože jsou podporovány hlavní části. Hlavní webové prohlížeče podporují některé funkce ES6. Je však možné použít software známý jako transpiler převést kód ES6 na ES5, což je ve většině prohlížečů lépe podporováno.

Podívejme se nyní na některé významné změny, které ES6 přináší do JavaScriptu.

1. Konstanty

Konečně se koncept konstant dostal do JavaScriptu! Konstanty jsou hodnoty, které lze definovat pouze jednou (pro rozsah, rozsah vysvětlený níže). Změna definice ve stejném rozsahu způsobí chybu.

const JOE = 4.0 JOE = 3,5 // výsledky: Uncaught TypeError: Přiřazení konstantní proměnné. 

Konstantu můžete použít kdekoli můžete použít proměnnou (var).

console.log ("Hodnota je:" + joe * 2) // tiskne: 8 

2. Proměnné a funkce s blokovým rozsahem

Vítejte v 21. století, JavaScript! U ES6 jsou proměnné deklarovány jako použití nechat (a konstanty popsané výše) se řídí pravidly pro určování rozsahu bloků stejně jako v Java, C ++ atd.

Před touto aktualizací byly proměnné v JavaScriptu sledovány podle funkcí. To znamená, že když jste pro proměnnou potřebovali nový rozsah, museli jste ji deklarovat v rámci funkce.

Proměnné si zachovávají hodnotu až do konce bloku. Po bloku se obnoví hodnota ve vnějším bloku (pokud existuje).

let x = "ahoj"; let x = "svět"; console.log ("vnitřní blok, x =" + x);  console.log ("vnější blok, x =" + x);  // tiskne vnitřní blok, x = světový vnější blok, x = ahoj 

V rámci těchto bloků můžete také předefinovat konstanty.

let x = "ahoj"; const x = 4,0; console.log ("vnitřní blok, x =" + x); zkuste x = 3,5 catch (err) console.error ("vnitřní blok:" + err);  x = "svět"; console.log ("vnější blok, x =" + x);  // tiskne vnitřní blok, x = 4 vnitřní blok: TypeError: Přiřazení konstantní proměnné. vnější blok, x = svět 

3. Funkce šipek

ES6 přináší novou syntaxi pro definování funkcí pomocí šipky. V následujícím příkladu, X je funkce, která přijímá volaný parametr A, a vrací jeho přírůstek:

var x = a => a + 1; x (4) // vrací 5 

Pomocí této syntaxe můžete snadno definovat a předávat argumenty ve funkcích.

Použití s pro každého():

[1, 2, 3, 4]. Pro každý (a => console.log (a + "=>" + a * a)) // vytiskne 1 => 1 2 => 4 3 => 9 4 => 16 

Definujte funkce přijímající více argumentů jejich uzavřením do závorek:

[22, 98, 3, 44, 67] .sort ((a, b) => a - b) // vrací [3, 22, 44, 67, 98] 

4. Výchozí funkční parametry

Parametry funkce lze nyní deklarovat pomocí výchozích hodnot. V následujícím, X je funkce se dvěma parametry A a b. Druhý parametr b výchozí hodnota je 1.

var x = (a, b = 1) => a * b x (2) // vrací 2 x (2, 2) // vrací 4 

Na rozdíl od jiných jazyků, jako je C ++ nebo python, se parametry s výchozími hodnotami mohou objevit před jazyky bez výchozích hodnot. Tato funkce je definována jako blok s a vrátit se hodnota pro ilustraci.

var x = (a = 2, b) => návrat a * b 

Argumenty jsou však přiřazeny zleva doprava. V prvním vyvolání níže, b má nedefinováno hodnota, i když A byl deklarován s výchozí hodnotou. Předaný argument se shoduje s A spíše než b. Funkce se vrací NaN.

x (2) // vrací NaN x (1, 3) // vrací 3 

Když výslovně předáte nedefinováno jako argument se použije výchozí hodnota, pokud existuje.

x (undefined, 3) // vrátí 6 

5. Parametry zbytkové funkce

Při vyvolání funkce někdy vzniká potřeba předat libovolný počet argumentů a zpracovat tyto argumenty v rámci funkce. Tuto potřebu řeší parametry zbytkové funkce syntax. Poskytuje způsob, jak zachytit zbývající argumenty po definovaných argumentech pomocí níže uvedené syntaxe. Tyto další argumenty jsou zachyceny v poli.

var x = function (a, b,… args) console.log ("a =" + a + ", b =" + b + "," + args.length + "args left");  x (2, 3) // tiskne a = 2, b = 3, 0 args left x (2, 3, 4, 5) // tiskne a = 2, b = 3, 2 args left 

6. Řetězce s řetězci

Řetězec String označuje interpolování proměnných a výrazů do řetězců pomocí syntaxe, jako je perl nebo shell. Šablona řetězce je uzavřena znaky zpětného zaškrtnutí ('). Naproti tomu jednoduché uvozovky (') nebo dvojité uvozovky (“) označují normální řetězce. Výrazy uvnitř šablony jsou označeny mezi $ a . Zde je příklad:

var name = "joe"; var x = 'ahoj $ name' // vrací "ahoj joe" 

Pro hodnocení můžete samozřejmě použít libovolný výraz.

// definuje funkci šipky var f = a => a * 4 // nastaví hodnotu parametru var v = 5 // a vyhodnotí funkci v šabloně řetězce var x = 'ahoj $ f (v)' // vrátí "ahoj 20" 

Tuto syntaxi pro definování řetězců lze také použít k definování víceřádkových řetězců.

var x = 'hello world next line' // vrací hello world next line 

7. Vlastnosti objektu

ES6 přináší zjednodušenou syntaxi vytváření objektů. Podívejte se na níže uvedený příklad:

var x = "ahoj svět", y = 25 var a = x, y // je ekvivalentní s ES5: x: x, y: y 

Názvy vypočtených vlastností jsou také docela šikovné. U ES5 a dřívějších, musíte nastavit vlastnost objektu s vypočítaným názvem, musíte to udělat:

var x = "hello world", y = 25 var a = x: x, y: y a ["joe" + y] = 4 // a je nyní: x: "hello world", y: 25 , joe25: 4 

Nyní to můžete udělat v jediné definici:

var a = x, y, ["joe" + y]: 4 // vrací x: "ahoj svět", y: 25, joe25: 4 

A samozřejmě, pro definování metod, můžete jednoduše definovat pomocí jména:

var a = x, y, ["joe" + y]: 4, foo (v) return v + 4 a.foo (2) // vrací 6 

8. Formální syntaxe definice třídy

Definice třídy

A konečně JavaScript získá formální syntaxi definice třídy. I když je to pouze syntaktický cukr oproti již dostupným třídám založeným na protytypech, slouží ke zvýšení jasnosti kódu. To znamená, že ano ne přidejte nový objektový model nebo něco podobného.

class Circle constructor (radius) this.radius = radius // use it var c = new Circle (4) // návraty: Circle radius: 4 

Metody deklarování

Definování metody je také docela jednoduché. Žádné překvapení.

class Circle constructor (radius) this.radius = radius computeArea () return Math.PI * this.radius * this.radius var c = new Circle (4) c.computeArea () // návraty: 50.26548245743669 

Getters a Setters

Nyní máme také getery a setters s jednoduchou aktualizací syntaxe. Předefinujme Kruh třída s plocha vlastnictví.

class Circle constructor (radius) this.radius = radius get area () return Math.PI * this.radius * this.radius var c = new Circle (4) // návraty: Circle radius: 4  c.area // se vrací: 50.26548245743669 

Nyní přidáme setter. Být schopen definovat poloměr jako vlastnost, kterou lze nastavit, bychom měli předefinovat skutečné pole _poloměr nebo něco, co nebude v rozporu se setrem. Jinak dojde k chybě přetečení zásobníku.

Zde je nově definovaná třída:

class Circle constructor (radius) this._radius = radius get area () return Math.PI * this._radius * this._radius set radius (r) this._radius = r var c = new Circle (4) // vrací: Kruh _radius: 4 c.area // vrací: 50.26548245743669 c.radius = 6 c.area // vrací: 113,09733552923255 

Celkově vzato, je to pěkný doplněk k objektově orientovanému JavaScript.

Dědictví

Kromě definování tříd pomocí třída klíčové slovo, můžete také použít rozšiřuje klíčové slovo zdědit od super tříd. Podívejme se, jak to funguje na příkladu.

class Ellipse constructor (width, height) this._width = width; this._height = výška;  get area () return Math.PI * this._width * this._height;  nastavit šířku (w) this._width = w;  nastavit výšku (h) this._height = h;  třída Circle rozšiřuje Ellipse konstruktor (poloměr) super (poloměr, poloměr);  nastavit poloměr (r) super.width = r; super.height = r;  // vytvořit kruh var c = nový kruh (4) // návraty: Kruh _width: 4, _height: 4 c.radius = 2 // c je nyní: Circle _width: 2, _height: 2 c.area // vrací: 12.566370614359172 c.radius = 5 c.area // vrací: 78.53981633974483 

A to byl krátký úvod do některých funkcí JavaScriptu ES6.

Další krok: Skriptování animace robota citlivého na hlas Jak skriptovat animaci robota citlivého na hlas v p5.js Jak skriptovat animaci robota citlivého na hlas v p5.js Chcete, aby se vaše děti zajímaly o programování? Ukažte jim tohoto průvodce, jak sestavit zvukově reaktivní animovanou robotickou hlavu. !

Obrázek Kredit: micrologia / Depositphotos