Što je ES6 i što Javascript programeri trebaju znati

ES6 odnosi se na verziju 6 programskog jezika ECMA Script. Skripta ECMA je standardizirano ime za JavaScript Što je JavaScript i može li Internet postojati bez njega? Što je JavaScript i može li Internet postojati bez njega? JavaScript je jedna od onih stvari koje mnogi uzimaju zdravo za gotovo. Svi ga koriste. , a verzija 6 je sljedeća inačica nakon verzije 5, koja je objavljena 2011. To je veliko unapređenje jezika JavaScript i dodaje još mnogo značajki koje će olakšati razvoj softvera velikih razmjera.

ECMAScript ili ES6 objavljen je u lipnju 2015. Naknadno je preimenovan u ECMAScript 2015. Podrška web-preglednika za cjeloviti jezik još nije potpuna, iako su podržani glavni dijelovi. Glavni web-preglednici podržavaju neke značajke ES6. Međutim, moguće je koristiti softver poznat kao a transpiler za pretvaranje ES6 koda u ES5, što je bolje podržano u većini preglednika.

Pogledajmo sada neke velike promjene koje ES6 donosi u JavaScript.

1. konstante

Konačno je pojam konstante postao JavaScript! Konstante su vrijednosti koje se mogu definirati samo jednom (po opsegu, opsegu objašnjenom u nastavku). Ponovno definiranje unutar istog opsega pokreće pogrešku.

const JOE = 4.0 JOE = 3.5 // rezultira u: Uncaught TypeError: Dodjela stalnoj varijabli. 

Možete koristiti konstantu gdje god možete koristiti varijablu (var).

console.log ("Vrijednost je:" + joe * 2) // ispisuje: 8 

2. Varijable i funkcije obuhvaćene blokom

Dobrodošli u 21. stoljeće, JavaScript! S ES6, varijable koje su deklarirane pomoću pustiti (a gore opisane konstante) slijedite pravila za određivanje opsega bloka, baš kao što su to u Java, C ++, itd.

Prije ovog ažuriranja, varijable u JavaScript-u bile su obuhvaćene opsegom. To jest, kad vam je trebao novi opseg za varijablu, morali ste je proglasiti u funkciji.

Varijable zadržavaju vrijednost do kraja bloka. Nakon bloka vraća se vrijednost u vanjskom bloku (ako postoji).

neka je x = "zdravo"; neka je x = "svijet"; console.log ("unutarnji blok, x =" + x);  console.log ("vanjski blok, x =" + x);  // ispisuje unutarnji blok, x = vanjski blok svijeta, x = zdravo 

Također možete redefinirati konstante unutar takvih blokova.

neka je x = "zdravo"; const x = 4,0; console.log ("unutarnji blok, x =" + x); pokušajte x = 3.5 catch (err) console.error ("unutarnji blok:" + err);  x = "svijet"; console.log ("vanjski blok, x =" + x);  // ispisuje unutarnji blok, x = 4 unutarnji blok: TypeError: Dodjela stalnoj varijabli. vanjski blok, x = svijet 

3. Funkcije strelice

ES6 donosi novu sintaksu za definiranje funkcija pomoću strelice. U sljedećem primjeru, x je funkcija koja prihvaća parametar zvan , i vraća priraštaj:

var x = a => a + 1; x (4) // vraća 5 

Pomoću ove sintakse možete lako definirati i prenositi argumente u funkcijama.

Upotreba sa a za svakoga():

[1, 2, 3, 4] .forEach (a => console.log (a + "=>" + a * a)) // ispisuje 1 => 1 2 => 4 3 => 9 4 => 16 

Definirajte funkcije koje prihvaćaju više argumenata stavljajući ih u zagrade:

[22, 98, 3, 44, 67] .sort ((a, b) => a - b) // vraća se [3, 22, 44, 67, 98] 

4. Zadani parametri funkcije

Parametri funkcija sada se mogu deklarirati sa zadanim vrijednostima. U sljedećem, x je funkcija s dva parametra i b. Drugi parametar b je dana zadana vrijednost od 1.

var x = (a, b = 1) => a * b x (2) // vraća 2 x (2, 2) // vraća 4 

Za razliku od drugih jezika kao što su C ++ ili python, parametri sa zadanim vrijednostima mogu se pojaviti prije onih bez zadanih vrijednosti. Imajte na umu da je ova funkcija definirana kao blok sa a povratak vrijednost putem ilustracije.

var x = (a = 2, b) => vrati a * b 

Međutim, argumenti se podudaraju s lijeva na desno. U prvom zazivu u nastavku, b ima nedefiniran vrijednost iako proglašen je zadanom vrijednosti. Argument koji je prenesen podudara se s rađe nego b. Funkcija se vraća NaN.

x (2) // vraća NaN x (1, 3) // vraća 3 

Kad izričito uđete nedefiniran kao argument koristi se zadana vrijednost ako je postoji.

x (nedefinirano, 3) // vraća 6 

5. Parametri funkcije odmora

Kad se poziva funkcija, ponekad se javlja potreba da se može prenijeti proizvoljni broj argumenata i obraditi ti argumenti unutar funkcije. Tu potrebu rješava parametri funkcije mirovanja sintaksa. Pruža način za hvatanje ostatka argumenata nakon definiranih argumenata koristeći sintaksu prikazanu dolje. Ti se dodatni argumenti bilježe u nizu.

var x = funkcija (a, b,… args) console.log ("a =" + a + ", b =" + b + "," + args.length + "args left");  x (2, 3) // ispisuje a = 2, b = 3, 0 argova lijevo x (2, 3, 4, 5) // ispisuje a = 2, b = 3, preostala su dva arga 

6. Predložavanje niza

Predložavanje niza odnosi se na interpoliranje varijabli i izraza u žice koristeći sintaksu poput perl ili ljuske. Predložak niza nalazi se u znakovima s povratnim kvačicama ('). Za razliku od pojedinačnih citata (') ili dvostruke navodnike (“) naznačite normalne žice. Izrezi unutar predloška označeni su između $ i . Evo primjera:

var name = "joe"; var x = 'hello $ name' // vraća "zdravo joe" 

Naravno, za evaluaciju možete koristiti proizvoljni izraz.

// definirajte funkciju strelice var f = a => a * 4 // postavite vrijednost parametra var v = 5 // i procijenite funkciju unutar predloška niza var x = 'hello $ f (v)' // vraća "zdravo 20" 

Ova se sintaksa za definiranje nizova može upotrijebiti i za definiranje nizova s ​​više linija.

var x = 'hello world next line' // vraća hello svijet sljedeći redak 

7. Svojstva objekta

ES6 donosi pojednostavljenu sintaksu za stvaranje predmeta. Pogledajte donji primjer:

var x = "zdravo svijetu", y = 25 var a = x, y // je ekvivalent ES5: x: x, y: y 

I imena računalnih svojstava su prilično sjajna. Za ES5 i starije, da biste postavili svojstvo objekta s izračunatim imenom, morali ste to učiniti:

var x = "zdravo svijetu", y = 25 var a = x: x, y: y a ["joe" + y] = 4 // a je sada: x: "zdravo svijetu", y: 25 , joe25: 4 

Sada to možete učiniti u jednoj definiciji:

var a = x, y, ["joe" + y]: 4 // vraća x: "zdravo svijetu", y: 25, joe25: 4 

I naravno, da biste definirali metode, možete ga samo definirati imenom:

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

8. Sintaksa definicije formalne klase

Definicija klase

I na kraju, JavaScript dobiva formalnu sintaksu definicije klase. Iako je samo sintaktički šećer u već dostupnim klasama temeljenim na tipovima, on služi za poboljšanje jasnoće koda. To znači da to čini ne dodajte novi model objekta ili bilo što slično.

kružnica klasa konstruktor (radijus) this.radius = radijus // koristi ga var c = novi krug (4) // vraća: krug radijus: 4 

Deklariranje metoda

Definiranje metode također je prilično jednostavno. Nema iznenađenja.

krug klase konstruktor (radijus) this.radius = radius computeArea () return Math.PI * this.radius * this.radius var c = novi krug (4) c.computeArea () // vraća se: 50.26548245743669 

Getters and Setters

Sada imamo i instalatere i programere s jednostavnim ažuriranjem sintakse. Let's redefinirati Krug klasa s an područje svojstvo.

kružnica klasa konstruktor (radijus) this.radius = radijus dobiti područje () povratak Math.PI * this.radius * this.radius var c = novi krug (4) // vraća: krug radijus: 4  c.area // vraća: 50.26548245743669 

Dodajmo sada setter. Da se mogu definirati radius kao svojstvo koje se može postaviti, trebali bismo redefinirati stvarno polje u _radius ili nešto što se ne sukobljava sa seterom. Inače nailazimo na pogrešku preljeva snopa.

Ovdje je redefinirana klasa:

Krug klase konstruktor (radijus) this._radius = radijus dobiti područje () vrati Math.PI * this._radius * this._radius postavi polumjer (r) this._radius = r var c = novi krug (4) // vraća: krug _radius: 4 c.area // vraća: 50.26548245743669 c.radius = 6 c.area // vraća: 113.09733552923255 

Sve u svemu, ovo je lijep dodatak objektno orijentiranom JavaScript-u.

baština

Pored definiranja klasa pomoću klasa možete koristiti i ključnu riječ proteže se ključna riječ koja se nasljeđuje iz super klasa. Pogledajmo kako to funkcionira na primjeru.

klasa Ellipse konstruktor (širina, visina) this._width = širina; this._height = visina;  get area () return Math.PI * this._width * this._height;  postavljena širina (w) this._width = w;  postavljena visina (h) this._height = h;  kružnica klase produžava Ellipse konstruktor (radijus) super (radijus, polumjer);  postaviti polumjer (r) super.width = r; super. visina = r;  // stvori krug var c = novi Krug (4) // vraća: Krug _ širina: 4, _ visina: 4 c.radius = 2 // c je sada: Krug _ širina: 2, _ visina: 2 c.area // vraća: 12.566370614359172 c.radius = 5 c.area // vraća: 78.53981633974483 

Ovo je bio kratki uvod nekih značajki JavaScript ES6.

Sljedeće: Skriptiranje animacije o robotu osjetljivog na glas Kako skriptirati glasovno osjetljivu animaciju robota u p5.js Kako napisati glasovno osjetljivu animaciju robota na p5.js Želite li svoju djecu zainteresirati za programiranje? Pokažite im ovaj vodič za izgradnju zvučno reaktivne animirane glave robota. !

Kreditna slika: micrologia / Depositphotos