Ce este ES6 și ce programatori Javascript trebuie să știți

ES6 se referă la versiunea 6 a limbajului de programare ECMA Script. ECMA Script este numele standardizat pentru JavaScript Ce este JavaScript, și poate exista Internetul fără ea? Ce este JavaScript, și poate exista Internetul fără ea? JavaScript este unul dintre acele lucruri pe care mulți le consideră necesare. Toată lumea o folosește. Citiți mai multe și versiunea 6 este următoarea versiune după versiunea 5, care a fost lansată în 2011. Este o îmbunătățire majoră a limbii JavaScript și adaugă multe alte caracteristici menite să ușureze dezvoltarea software-ului pe scară largă.

ECMAScript sau ES6 a fost publicat în iunie 2015. A fost ulterior redenumit la ECMAScript 2015. Suportul browser-ului web pentru limba completă nu este încă complet, deși sunt acceptate porțiuni importante. Browserele web majore acceptă anumite caracteristici ale ES6. Cu toate acestea, este posibil să se utilizeze software cunoscut sub numele de a transpiler pentru a converti codul ES6 în ES5, care este mai bine suportat pe majoritatea browserelor.

Să ne uităm acum la unele modificări majore pe care ES6 le aduce la JavaScript.

1. Constante

În cele din urmă, conceptul de constante a făcut-o JavaScript! Constantele sunt valori care pot fi definite numai o singură dată (pentru fiecare domeniu de aplicare, domeniul de aplicare explicat mai jos). O redefinire în același scop declanșează o eroare.

const JOE = 4.0 JOE = 3.5 // rezultate în: Uncaught TypeError: Atribuirea unei variabile constante. 

Puteți utiliza constanta oriunde puteți utiliza o variabilă (var).

console.log ("Valoarea este:" + joe * 2) // imprimă: 8 

2. Variabile și funcții în bloc

Bine ați venit în secolul 21, JavaScript! Cu ES6, variabilele declarate folosind lăsa (și constantele descriu mai sus) respectă regulile de definire a domeniului ca și în Java, C ++, etc.

Înainte de această actualizare, variabilele din JavaScript erau funcționale. Adică atunci când aveați nevoie de un nou domeniu pentru o variabilă, trebuia să o declarați în cadrul unei funcții.

Variabilele păstrează valoarea până la sfârșitul blocului. După bloc, valoarea din blocul exterior (dacă există) este restabilită.

let x = "salut"; let x = "lumea"; console.log ("bloc interior, x =" + x);  console.log ("bloc exterior, x =" + x);  // imprimă blocul interior, x = blocul exterior exterior, x = salut 

Puteți să redefiniți și constantele, în cadrul unor astfel de blocuri.

let x = "salut"; const x = 4,0; console.log ("bloc interior, x =" + x); încercați x = 3.5 captura (err) console.error ("bloc interior:" + err);  x = "lume"; console.log ("bloc exterior, x =" + x);  // imprimă blocul interior, x = 4 bloc interior: TypeError: Alocarea la variabila constantă. bloc exterior, x = lume 

3. Funcții cu săgeți

ES6 aduce o nouă sintaxă pentru definirea funcțiilor utilizând o săgeată. În exemplul următor, X este o funcție care acceptă un parametru numit A, și returnează incrementul său:

var x = a => a + 1; x (4) // returnează 5 

Folosind această sintaxă, puteți defini și transmite ușor argumentele în funcții.

Utilizarea cu a pentru fiecare():

[1, 2, 3, 4] .pentru fiecare (a => console.log (a + "=>" + a * a)) // imprimă 1 => 1 2 => 4 3 => 9 4 => 16 

Definiți funcțiile acceptând mai multe argumente prin includerea lor în paranteze:

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

4. Parametrii funcțiilor implicite

Parametrii funcționali pot fi acum declarați cu valori implicite. În cele ce urmează, X este o funcție cu doi parametri A și b. Al doilea parametru b i se atribuie o valoare implicită de 1.

var x = (a, b = 1) => a * b x (2) // returnează 2 x (2, 2) // returnează 4 

Spre deosebire de alte limbi, cum ar fi C ++ sau Python, parametrii cu valori implicite pot apărea înaintea celor fără valori implicite. Rețineți că această funcție este definită ca un bloc cu a întoarcere valoare prin ilustrare.

var x = (a = 2, b) => returnați a * b 

Cu toate acestea, argumentele sunt potrivite de la stânga la dreapta. În prima invocare de mai jos, b are un nedefinit valoare chiar dacă A a fost declarată cu o valoare implicită. Argumentul "pass-in" este asociat cu A Decat b. Funcția revine NaN.

x (2) // returnează NaN x (1, 3) // returnează 3 

Când intrați în mod explicit nedefinit ca argument, valoarea implicită este utilizată dacă există una.

x (undefined, 3) // returnează 6 

5. Parametrii funcției de odihnă

Atunci când se invocă o funcție, uneori apare necesitatea de a trece un număr arbitrar de argumente și de a procesa aceste argumente în cadrul funcției. Această nevoie este tratată de către restul parametrilor funcției sintaxă. Acesta oferă o modalitate de a captura restul argumentelor după argumentele definite folosind sintaxa prezentată mai jos. Aceste argumente suplimentare sunt captate într-o matrice.

var x = funcția (a, b, ... args) console.log ("a =" + a + ", b =" + b + ", + args.length +" args left ");  x (2, 3) // imprimă a = 2, b = 3, 0 args stânga x (2, 3, 4, 5) // imprimă a = 2, b = 

Templul cu șir

Striparea șirului se referă la interpolarea variabilelor și expresiilor în șiruri folosind o sintaxă ca perl sau shell. Un șablon de șir este inclus în caracterele "back-tick" ('). Prin contrast, citatele simple (') sau citate duble (“) indică șiruri normale. Expresiile din interiorul șablonului sunt marcate între $ și . Iată un exemplu:

var nume = "joe"; var x = 'salut $ name' // returnează "hello joe" 

Desigur, puteți utiliza o expresie arbitrară pentru evaluare.

// definiți o funcție a săgeții var f = a => a * 4 // setați o valoare a parametrului var v = 5 // și evaluați funcția în șirul de șir var x = 'hello $ f (v)' // se întoarce "hello 20" 

Această sintaxă pentru definirea șirurilor poate fi, de asemenea, utilizată pentru a defini șiruri cu mai multe linii.

var x = 'hello world next line' // returnează linia de salut lume următoare 

7. Proprietățile obiectului

ES6 aduce o sintaxă simplificată de creare a obiectului. Aruncați o privire la exemplul de mai jos:

var x = "salut lume", y = 25 var a = x, y // este echivalent cu ES5: x: x, y: y 

Numele de proprietate computerizate sunt de asemenea foarte drăguțe. Cu ES5 și mai devreme, pentru a seta o proprietate obiect cu un nume calculat, a trebuit să faceți acest lucru:

var x = "salut lume", y = 25 var a = x: x, y: y a ["joe" + y] = 4 // a este acum: x: hello world , joe25: 4 

Acum puteți face totul într-o singură definiție:

var a = x, y, ["joe" + y]: 4 // returnează x: "hello world", y: 25, joe25: 4 

Și, bineînțeles, pentru a defini metode, puteți să-l definiți cu numele:

var a = x, y, ["joe" + y]: 4, foo (v) retur v + 4 a.foo (2) 

8. Sintaxă de definire a claselor formale

Definiția clasei

În fine, JavaScript devine o sintaxă de definire a claselor formale. În timp ce este vorba doar de zahăr sintactic peste clasele bazate pe protytype deja disponibile, acesta nu serveste pentru a spori claritatea codului. Asta inseamna asta nu adăugați un nou model de obiect sau ceva asemănător.

clasa Cerc constructor (rază) this.radius = radius // utilizați-l var c = nou Cerc (4) // returnează: Circle radius: 

Metode de declarare

Definirea unei metode este, de asemenea, destul de simplă. Nu se suprapune acolo.

class Cerc constructor (rază) this.radius = radius computeArea () return Math.PI * this.radius * this.radius var c = cerc nou (4) c.computeArea () // returns: 50.26548245743669 

Getters și Setters

Acum avem și getters și setters, cu o simplă actualizare a sintaxei. Să redefinim Cerc clasa cu un zonă proprietate.

clasa Circle constructor (rază) this.radius = radius get area () return Math.PI * this.radius * this.radius var c = nou Cerc (4)  c.area // returnează: 50.26548245743669 

Să adăugăm acum un setter. Pentru a putea defini rază ca proprietate setabilă, ar trebui să redefinim câmpul real la _rază sau ceva care nu va intra în conflict cu setter-ul. În caz contrar, întâlnim o eroare de depășire a stivei.

Aici este clasa redefinită:

clasa cerc constructor (rază) this._radius = radius get area () return Math.PI * this._radius * this._radius set raza (r) this._radius = r var c = (4) // returnează: Circle _radius: 4 c.area // returnează: 50.26548245743669 c.radius = 6 c.area // revine: 113.09733552923255 

În general, acesta este un plus frumos pentru JavaScript orientat pe obiecte.

Moştenire

În plus față de definirea claselor folosind clasă cuvânt cheie, puteți utiliza, de asemenea, extinde Cuvinte cheie pentru a moșteni de la super-clase. Să vedem cum funcționează acest lucru cu un exemplu.

clasa Ellipse constructor (lățime, înălțime) this._width = width; this._height = înălțime;  get area () retur Math.PI * this._width * this._height;  setați lățimea (w) this._width = w;  înălțime set (h) this._height = h;  Cercul de clasă extinde Ellipse constructor (rază) super (rază, rază);  raza setată (r) super.width = r; super.height = r;  // a crea un cerc var c = un nou Cerc (4) // returneaza: Cercul _width: 4, _height: 4 c.radius = 2 // c este acum: Cercul _width: c.area // returnează: 12.566370614359172 c.radius = 5 c.area // revine: 78.53981633974483 

Și aceasta a fost o scurtă introducere la unele dintre caracteristicile JavaScript ES6.

Urmatorul pas: Scrierea unei animatii robot sensibile la voce Cum sa scrii un animator robot sensibil la voce in p5.js Cum sa scrii un animat robot sensibil la voce in p5.js Dori sa-ti faci copiii interesati de programare? Arătați-le acestui ghid pentru a construi un cap robot animat reactiv sonor. Citeste mai mult !

Credit de imagine: micrologia / Depositphotos

Explorați mai multe despre: JavaScript, .