Kaj je ES6 in kaj morajo programerji Javascript vedeti

Kaj je ES6 in kaj morajo programerji Javascript vedeti

ES6 se nanaša na različico 6 programskega jezika ECMA Script. ECMA Script je standardizirano ime za JavaScript, različica 6 pa je naslednja različica po različici 5, ki je izšla leta 2011. Je velika izboljšava jezika JavaScript in dodaja še veliko več funkcij, ki olajšajo obsežen razvoj programske opreme. .





ECMAScript ali ES6 je bil objavljen junija 2015. Nato je bil preimenovan v ECMAScript 2015. Podpora spletnega brskalnika za celoten jezik še ni popolna, čeprav so podprti večji deli. Večji spletni brskalniki podpirajo nekatere funkcije ES6. Vendar pa je mogoče uporabiti programsko opremo, znano kot predvajalnik za pretvorbo kode ES6 v ES5, ki je bolje podprta v večini brskalnikov.





Poglejmo zdaj nekaj velikih sprememb, ki jih ES6 prinaša v JavaScript.





1. Konstante

Končno je koncept konstant prišel v JavaScript! Konstante so vrednosti, ki jih je mogoče opredeliti samo enkrat (na področje uporabe, področje razlaga spodaj). Ponovna opredelitev v istem obsegu sproži napako.

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

Konstanto lahko uporabite povsod, kjer lahko uporabite spremenljivko ( kje ).



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

2. Spremenljivke in funkcije s področjem blokov

Dobrodošli v 21. stoletju, JavaScript! Pri ES6 so spremenljivke deklarirane z uporabo pustiti (in konstante, opisane zgoraj), sledite pravilom obsega blokov, tako kot v Javi, C ++ itd. (Če želite izvedeti več, si oglejte, kako razglasite spremenljivke v JavaScript.)

Pred to posodobitvijo so bile spremenljivke v JavaScriptu funkcionalno določene. To pomeni, da ko ste za spremenljivko potrebovali nov obseg, ste ga morali razglasiti znotraj funkcije.





Spremenljivke ohranijo vrednost do konca bloka. Po bloku se vrednost v zunanjem bloku (če obstaja) obnovi.

kako lahko ugotovite, če vas je nekdo blokiral na snapchatu
{
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

V teh blokih lahko tudi redefinirate konstante.





{
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. Funkcije puščic

ES6 predstavlja puščice v JavaScript. (Te so podobne tradicionalnim funkcijam, vendar imajo enostavnejšo skladnjo.) V naslednjem primeru: x je funkcija, ki sprejema parameter, imenovan do in vrne njegov prirastek:

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

S to skladnjo lahko preprosto definirate in posredujete argumente v funkcijah.

Uporaba z za vsakogar() :

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

Določite funkcije, ki sprejemajo več argumentov, tako da jih podate v oklepaje:

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

4. Privzeti parametri funkcij

Zdaj lahko parametre funkcije razglasimo s privzetimi vrednostmi. V nadaljevanju, x je funkcija z dvema parametroma do in b . Drugi parameter b ima privzeto vrednost 1 .

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

Za razliko od drugih jezikov, kot sta C ++ ali python, se lahko parametri s privzetimi vrednostmi pojavijo pred tistimi brez privzetih vrednosti. Upoštevajte, da je ta funkcija definirana kot blok z vrnitev vrednost za ponazoritev.

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

Vendar se argumenti ujemajo od leve proti desni. V prvem spodnjem pozivu, b ima nedoločeno vrednost čeprav do je bila razglašena s privzeto vrednostjo. Preneseni argument se ujema z do raje kot b . Funkcija se vrne NaN .

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

Ko izrecno vstopite nedoločeno kot argument se uporabi privzeta vrednost, če obstaja.

x(undefined, 3)
// returns 6

5. Parametri funkcije počitka

Ko se prikliče funkcija, se včasih pojavi potreba po tem, da lahko posredujemo poljubno število argumentov in te argumente obdelamo znotraj funkcije. To potrebo obravnava parametri funkcije počitka sintakso. Ponuja način za zajem preostalih argumentov po definiranih argumentih s spodnjo sintakso. Ti dodatni argumenti so zajeti v matriko.

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. Predlogi nizov

Predlogi nizov se nanašajo na interpolacijo spremenljivk in izrazov v nize z uporabo skladnje, kot sta perl ali lupina. Predloga niza je zaprta v znake za nazaj ( '' ). Nasprotno enojni narekovaji ( ' ) ali dvojni narekovaji ( ' ) označujejo običajne nize. Izrazi znotraj predloge so označeni med $ { in } . Tukaj je primer:

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

Seveda lahko za vrednotenje uporabite poljuben izraz.

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

Ta sintaksa za definiranje nizov se lahko uporablja tudi za definiranje nizov z več vrsticami.

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

7. Lastnosti objekta

ES6 prinaša poenostavljeno skladnjo za ustvarjanje predmetov. Oglejte si spodnji primer:

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

Izračunana imena nepremičnin so prav tako čudovita. Z ES5 in starejšimi različicami morate za nastavitev lastnosti objekta z izračunanim imenom narediti to:

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}

Zdaj lahko vse naredite v eni sami definiciji:

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

In seveda, če želite definirati metode, jih lahko preprosto definirate z imenom:

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

8. Skladnja za formalno opredelitev razreda

Opredelitev razreda

In nazadnje, JavaScript dobi formalno skladnjo definicije razreda. Čeprav je zgolj skladenjski sladkor nad že razpoložljivimi razredi, ki temeljijo na prototipih, služi povečanju jasnosti kode. To pomeni, da je tako ne dodajte nov objektni model ali kaj podobnega.

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

Metode prijavljanja

Določitev metode je tudi precej preprosta. Ni presenečenj.

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

Pridobivalci in nastavitelji

Zdaj imamo tudi pridobivalce in nastavitelje s preprosto posodobitvijo skladnje. Na novo opredelimo Krog razred z območje lastnine.

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

Naj zdaj dodamo nastavitelja. Da bi lahko definirali polmer kot lastnost, ki jo je mogoče nastaviti, bi morali ponovno definirati dejansko polje v _radius ali nekaj, kar ne bo v nasprotju z nastaviteljem. V nasprotnem primeru naletimo na napako prelivanja sklada.

Tu je redefiniran razred:

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

Vse skupaj je lep dodatek k objektno usmerjenemu JavaScript.

Dedovanje

Poleg opredelitve razredov z uporabo razred ključno besedo, lahko uporabite tudi podaljša ključno besedo za podedovanje po super razredih. Poglejmo, kako to deluje s primerom.

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

To je bil kratek uvod v nekatere funkcije JavaScript ES6.

Naslednje: spoznavanje nekaj pomembnih metod nizov JavaScript in skriptiranje glasovno občutljive robotske animacije! Spoznajte tudi odličen sprednji okvir, imenovan Vue.

Zasluga za sliko: micrologia/ Depositphotos

Deliti Deliti Cvrkutati E-naslov Canon proti Nikon: katera znamka fotoaparata je boljša?

Canon in Nikon sta dve največji imeni v industriji fotoaparatov. Toda katera blagovna znamka ponuja boljšo ponudbo fotoaparatov in objektivov?

da bo windows 7 videti kot xp
Preberite Naprej Sorodne teme
  • Programiranje
  • JavaScript
O avtorju Jay Sridhar(17 objavljenih člankov) Več od Jaya Sridharja

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite