Home-theater-designers
ES6 se referă la versiunea 6 a limbajului de programare ECMA Script. Scriptul ECMA este numele standardizat pentru JavaScript, iar versiunea 6 este următoarea versiune după versiunea 5, care a fost lansată în 2011. Este o îmbunătățire majoră a limbajului JavaScript și adaugă multe alte caracteristici menite să faciliteze dezvoltarea software-ului pe scară largă. .
ECMAScript sau ES6 a fost publicat în iunie 2015. Ulterior a fost redenumit în ECMAScript 2015. Suportul pentru browserul web pentru limba completă nu este încă complet, deși sunt acceptate porțiuni majore. Principalele browsere web acceptă unele caracteristici ale ES6. Cu toate acestea, este posibil să utilizați software cunoscut sub numele de jucător pentru a converti codul ES6 în ES5, care este mai bine acceptat de majoritatea browserelor.
Să analizăm acum câteva modificări majore pe care ES6 le aduce JavaScript.
1. Constantele
În cele din urmă, conceptul de constante a ajuns la JavaScript! Constantele sunt valori care pot fi definite o singură dată (pe domeniu, domeniul explicat mai jos). O redefinire din același domeniu declanșează o eroare.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Puteți utiliza constanta oriunde puteți utiliza o variabilă ( Unde ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Variabile și funcții cu domeniu de bloc
Bine ați venit în secolul 21, JavaScript! Cu ES6, variabile declarate folosind lăsa (și constantele descrise mai sus) respectă regulile de acoperire a blocurilor la fel ca în Java, C ++ etc. (Pentru a afla mai multe, consultați cum să declarați variabile în JavaScript.)
Înainte de această actualizare, variabilele din JavaScript au fost definite în funcție. Adică, atunci când aveați nevoie de un nou domeniu pentru o variabilă, a trebuit să o declarați în cadrul unei funcții.
Variabilele păstrează valoarea până la sfârșitul blocului. După blocare, valoarea din blocul exterior (dacă există) este restabilită.
care este volumul de pe telefonul meu
{
let x = 'hello';
{
let x = 'world';
console.log('inner block, x = ' + x);
}
console.log('outer block, x = ' + x);
}
// prints
inner block, x = world
outer block, x = hello
Puteți redefini și constantele, în cadrul acestor blocuri.
{
let x = 'hello';
{
const x = 4.0;
console.log('inner block, x = ' + x);
try {
x = 3.5
} catch(err) {
console.error('inner block: ' + err);
}
}
x = 'world';
console.log('outer block, x = ' + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world
3. Funcții săgeată
ES6 introduce funcții săgeată la JavaScript. (Acestea sunt similare cu funcțiile tradiționale, dar au o sintaxă mai simplă.) În exemplul următor, X este o funcție care acceptă un parametru numit la , și returnează incrementul său:
var x = a => a + 1;
x(4) // returns 5
Folosind această sintaxă, puteți defini și transmite argumente în funcții cu ușurință.
Folosind cu un pentru fiecare() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Definiți funcțiile care acceptă mai multe argumente prin încadrarea lor între paranteze:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. Parametrii funcției implicite
Parametrii funcției pot fi acum declarați cu valori implicite. În cele ce urmează, X este o funcție cu doi parametri la și b . Al doilea parametru b primește o valoare implicită de 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 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 un întoarcere valoare prin ilustrare.
var x = (a = 2, b) => { return a * b }
Cu toate acestea, argumentele sunt potrivite de la stânga la dreapta. În prima invocație de mai jos, b are un nedefinit valoare chiar dacă la a fost declarat cu o valoare implicită. Argumentul transferat este asociat cu la Decat b . Funcția revine NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Când treci explicit nedefinit ca argument, valoarea implicită este utilizată dacă există una.
x(undefined, 3)
// returns 6
5. Parametrii funcției Rest
Când se invocă o funcție, apare uneori nevoia de a putea trece într-un număr arbitrar de argumente și de a procesa aceste argumente în cadrul funcției. Această nevoie este gestionată de parametrii funcției de odihnă sintaxă. Oferă o modalitate de a captura restul argumentelor după argumentele definite folosind sintaxa prezentată mai jos. Aceste argumente suplimentare sunt capturate într-o matrice.
var x = function(a, b, ...args) { console.log('a = ' + a + ', b = ' + b + ', ' + args.length + ' args left'); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left
6. Șablonarea șirurilor
Șablonarea șirurilor se referă la interpolare de variabile și expresii în șiruri folosind o sintaxă precum perl sau shell. Un șablon de șir este inclus în caractere de bifare înapoi ( „ ). Spre deosebire de ghilimele simple ( ' ) sau ghilimele duble ( ' ) indicați șiruri normale. Expresiile din interiorul șablonului sunt marcate între $ { și } . Iată un exemplu:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
Desigur, puteți utiliza o expresie arbitrară pentru evaluare.
// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns 'hello 20'
Această sintaxă pentru definirea șirurilor poate fi utilizată și pentru definirea șirurilor cu mai multe linii.
var x = `hello world
next line`
// returns
hello world
next line
7. Proprietățile obiectului
ES6 aduce o sintaxă simplificată de creare a obiectelor. Aruncați o privire la exemplul de mai jos:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Numele de proprietăți calculate sunt și ele destul de ingenioase. Cu ES5 și versiunile anterioare, pentru a seta o proprietate obiect cu un nume calculat, a trebuit să faceți acest lucru:
var x = 'hello world', y = 25
var a = {x: x, y: y}
a['joe' + y] = 4
// a is now:
{x: 'hello world', y: 25, joe25: 4}
Acum puteți face totul într-o singură definiție:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
Și, desigur, pentru a defini metodele, o puteți defini doar cu numele:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Sintaxa formală a definiției clasei
Definiția clasei
Și, în cele din urmă, JavaScript primește o sintaxă formală de definiție a clasei. Deși este doar zahăr sintactic peste clasele deja disponibile pe bază de tipuri, acesta servește la îmbunătățirea clarității codului. Asta înseamnă că da nu adăugați un nou model de obiect sau orice altceva de lux.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Metode de declarare
Definirea unei metode este, de asemenea, destul de simplă. Nu există surprize acolo.
class Circle {
constructor(radius) {
this.radius = radius
}
computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669
Getters și Setters
Acum avem și setări și seturi, cu o simplă actualizare a sintaxei. Să redefinim Cerc clasa cu un zonă proprietate.
class Circle {
constructor(radius) {
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 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 ce nu se va ciocni cu setterul. În caz contrar, întâlnim o eroare de depășire a stivei.
Iată clasa redefinită:
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)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255
Una peste alta, acesta este un plus frumos la JavaScript orientat obiect.
Moştenire
Pe lângă definirea claselor folosind clasă cuvânt cheie, puteți utiliza și se extinde cuvânt cheie de moștenit de la superclasele. Să vedem cum funcționează acest lucru cu un exemplu.
class Ellipse {
constructor(width, height) {
this._width = width;
this._height = height;
}
get area() { return Math.PI * this._width * this._height; }
set width(w) { this._width = w; }
set height(h) { this._height = h; }
}
class Circle extends Ellipse {
constructor(radius) {
super(radius, radius);
}
set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483
Și aceasta a fost o scurtă introducere la unele dintre caracteristicile JavaScript ES6.
Următorul: familiarizarea cu câteva metode importante de matrice JavaScript și scriptarea unei animații robot sensibile la voce! De asemenea, aflați despre un cadru frontal excelent numit Vue.
Credit de imagine: micrologia / Depositphotos
Acțiune Acțiune Tweet E-mail Canon vs. Nikon: Ce marcă de camere este mai bună?Canon și Nikon sunt cele mai mari două nume din industria camerelor. Dar ce marcă oferă o gamă mai bună de camere și obiective?
Telecomanda tv roku tcl nu funcționeazăCitiți în continuare Subiecte asemănătoare
- Programare
- JavaScript
Aboneaza-te la newsletter-ul nostru
Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Faceți clic aici pentru a vă abona