Què és ES6 i què necessiten saber els programadors de Javascript

Què és ES6 i què necessiten saber els programadors de Javascript

ES6 fa referència a la versió 6 del llenguatge de programació ECMA Script. ECMA Script és el nom estandarditzat de JavaScript i la versió 6 és la següent versió després de la versió 5, que es va publicar el 2011. És una millora important del llenguatge JavaScript i afegeix moltes més funcions destinades a facilitar el desenvolupament de programari a gran escala. .





ECMAScript, o ES6, es va publicar el juny del 2015. Posteriorment es va canviar el nom a ECMAScript 2015. El suport del navegador web per a l’idioma complet encara no està complet, tot i que s’admeten parts principals. Els principals navegadors web admeten algunes funcions d’ES6. No obstant això, és possible utilitzar un programari conegut com a jugador per convertir el codi ES6 en ES5, que és millor compatible amb la majoria de navegadors.





Vegem ara alguns canvis importants que ES6 aporta a JavaScript.





1. Constants

Finalment, el concepte de constants ha arribat a JavaScript. Les constants són valors que només es poden definir una vegada (per abast, abast que s’explica a continuació). Una re-definició dins del mateix àmbit provoca un error.

const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.

Podeu utilitzar la constant sempre que pugueu utilitzar una variable ( on ).



console.log('Value is: ' + joe * 2)
// prints: 8

2. Variables i funcions d'abast de blocs

Benvingut al segle XXI, JavaScript! Amb ES6, variables declarades utilitzant deixar (i les constants que es descriuen més amunt) segueixen les regles d'abast de blocs igual que a Java, C ++, etc. (Per obtenir més informació, consulteu com declarar variables a JavaScript).

Abans d'aquesta actualització, les variables de JavaScript tenien l'abast de la funció. És a dir, quan necessitaveu un nou abast per a una variable, l’havíeu de declarar dins d’una funció.





Les variables conserven el valor fins al final del bloc. Després del bloc, es restaura el valor del bloc exterior (si n’hi ha).

Facebook inicia la sessió amb un compte diferent
{
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

També podeu redefinir constants dins d’aquests blocs.





{
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. Funcions de fletxa

ES6 presenta funcions de fletxa a JavaScript. (Són similars a les funcions tradicionals, però tenen una sintaxi més senzilla.) A l'exemple següent, x és una funció que accepta un paràmetre anomenat a , i retorna el seu increment:

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

Mitjançant aquesta sintaxi, podeu definir i passar arguments en funcions amb facilitat.

Ús amb un per cadascú() :

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

Definiu les funcions que accepten diversos arguments entre els parèntesis:

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

4. Paràmetres de funció predeterminats

Ara es poden declarar paràmetres de funció amb valors predeterminats. En els següents, x és una funció amb dos paràmetres a i b . El segon paràmetre b té un valor per defecte de 1 .

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

A diferència d'altres idiomes com C ++ o Python, els paràmetres amb valors predeterminats poden aparèixer abans que els que no tinguin valors predeterminats. Tingueu en compte que aquesta funció es defineix com un bloc amb tornar valor a tall d’il·lustració.

var x = (a = 2, b) => { return a * b }

Tanmateix, els arguments es combinen d’esquerra a dreta. A la primera invocació següent, b té un sense definir valor encara que a s'ha declarat amb un valor per defecte. L'argument de transmissió es fa coincidir a enlloc de b . Torna la funció NaN .

x(2)
// returns NaN
x(1, 3)
// returns 3

Quan ho expliqueu explícitament sense definir com a argument, s'utilitza el valor per defecte si n'hi ha.

x(undefined, 3)
// returns 6

5. Paràmetres de la funció de descans

En invocar una funció, de vegades sorgeix la necessitat de poder passar un nombre arbitrari d'arguments i processar aquests arguments dins de la funció. Aquesta necessitat la gestiona el paràmetres de la funció de descans sintaxi. Proporciona una manera de capturar la resta d’arguments després dels arguments definits mitjançant la sintaxi que es mostra a continuació. Aquests arguments addicionals es capturen en una matriu.

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. Plantilla de cadenes

La plantilla de cadenes fa referència a la interpolació de variables i expressions en cadenes mitjançant una sintaxi com perl o l'intèrpret d'ordres. Una plantilla de cadena està inclosa en caràcters de contrasenya ( ` ). Per contra, les cometes simples ( ' ) o cometes dobles ( ' ) indica cadenes normals. Les expressions dins de la plantilla es marquen entre $ { i } . Aquí teniu un exemple:

var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'

Per descomptat, podeu utilitzar una expressió arbitrària per avaluar-la.

// 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'

Aquesta sintaxi per definir cadenes també es pot utilitzar per definir cadenes de diverses línies.

var x = `hello world
next line`
// returns
hello world
next line

7. Propietats de l'objecte

ES6 aporta una sintaxi de creació d'objectes simplificada. Mireu l'exemple següent:

var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}

Els noms de propietats computats també són força enginyosos. Amb ES5 i versions anteriors, per establir una propietat objecte amb un nom calculat, havíeu de fer això:

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}

Ara podeu fer-ho tot en una sola definició:

var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}

I, per descomptat, per definir mètodes, només podeu definir-lo amb el nom:

var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6

8. Sintaxi formal de definició de classe

Definició de classe

I, finalment, JavaScript obté una sintaxi formal de definició de classe. Tot i que només és sucre sintàctic sobre les classes basades en prototipus ja disponibles, serveix per millorar la claredat del codi. Això vol dir que sí no afegiu un model d'objecte nou o qualsevol cosa de semblant.

class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}

Mètodes declaratius

Definir un mètode també és bastant senzill. No hi ha sorpreses.

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

Ara també tenim getters i seters, amb una senzilla actualització de la sintaxi. Redefinim el fitxer Cercle classe amb un àrea propietat.

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

Afegim ara un setter. Saber definir radi com a propietat configurable, hauríem de redefinir el camp real a _radius o alguna cosa que no xocarà amb el setter. En cas contrari, ens trobem amb un error de desbordament de pila.

Aquí teniu la classe redefinida:

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

Tot plegat, és una bona addició a JavaScript orientat a objectes.

Herència

A més de definir classes mitjançant el fitxer classe paraula clau, també podeu utilitzar el fitxer s’estén paraula clau per heretar de super classes. Vegem com funciona amb un exemple.

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 va ser una breu introducció a algunes de les funcions de JavaScript ES6.

Seguidament: familiaritzar-se alguns mètodes importants de matriu de JavaScript i crear una animació de robot sensible a la veu. A més, informeu-vos d’un marc de treball fantàstic anomenat Vue.

Crèdit de la imatge: micrologia / Depositphotos

Compartir Compartir Tweet Correu electrònic Canon vs. Nikon: quina marca de càmera és millor?

Canon i Nikon són els dos noms més importants de la indústria de les càmeres. Però, quina marca ofereix la millor gamma de càmeres i objectius?

com fer fotos privades a Facebook 2018
Llegiu a continuació Temes relacionats
  • Programació
  • JavaScript
Sobre l'autor Jay Sridhar(17 articles publicats) Més de Jay Sridhar

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us