Home-theater-designers
ES6 se odnosi na verziju 6 programskog jezika ECMA Script. ECMA Script je standardizirani naziv za JavaScript, a verzija 6 je sljedeća verzija nakon verzije 5, koja je objavljena 2011. To je veliko poboljšanje jezika JavaScript i dodaje mnogo više značajki namijenjenih olakšanju razvoja velikog softvera .
ECMAScript, ili ES6, objavljen je u lipnju 2015. Kasnije je preimenovan u ECMAScript 2015. Podrška web preglednika za cijeli jezik još nije dovršena, iako su podržani veći dijelovi. Glavni web preglednici podržavaju neke značajke ES6. Međutim, moguće je koristiti softver poznat kao igrač za pretvaranje koda ES6 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 koncept konstanti stigao do JavaScript -a! Konstante su vrijednosti koje se mogu definirati samo jednom (po opsegu, dolje objašnjeno područje). Ponovna definicija unutar istog opsega izaziva pogrešku.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Možete koristiti konstantu gdje god možete koristiti varijablu ( gdje ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Varijable i funkcije s opsegom blokova
Dobro došli u 21. stoljeće, JavaScript! Kod ES6 varijable su deklarirane korištenjem neka (i gore opisane konstante) slijede pravila opsega blokova, baš kao u Javi, C ++ itd. (Da biste saznali više, pogledajte kako deklarirati varijable u JavaScriptu.)
Prije ovog ažuriranja varijable u JavaScriptu su imale opseg funkcija. To jest, kad vam je trebao novi opseg za varijablu, morali ste ga deklarirati unutar funkcije.
Varijable zadržavaju vrijednost do kraja bloka. Nakon bloka vraća se vrijednost u vanjskom bloku (ako postoji).
besplatno preuzmite bilo koji videozapis s bilo koje web stranice
{
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
Također možete redefinirati konstante, unutar takvih blokova.
{
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 strelica
ES6 predstavlja funkcije strelica u JavaScript. (One su slične tradicionalnim funkcijama, ali imaju jednostavniju sintaksu.) U sljedećem primjeru, x je funkcija koja prihvaća parametar tzv do , i vraća njegov prirast:
var x = a => a + 1;
x(4) // returns 5
Pomoću ove sintakse možete s lakoćom definirati i prosljeđivati argumente u funkcijama.
Korištenje s a za svakoga() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
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)
// returns
[3, 22, 44, 67, 98]
4. Zadani parametri funkcija
Parametri funkcija sada se mogu deklarirati sa zadanim vrijednostima. U sljedećem, x je funkcija s dva parametra do i b . Drugi parametar b dobiva zadanu vrijednost od 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
Za razliku od drugih jezika, poput C ++ ili pythona, parametri sa zadanim vrijednostima mogu se pojaviti prije onih bez zadanih postavki. Imajte na umu da je ova funkcija definirana kao blok s povratak vrijednost ilustracijom.
var x = (a = 2, b) => { return a * b }
Međutim, argumenti se slažu s lijeva na desno. U prvom dolje navedenom pozivu, b ima nedefiniran vrijednost iako do je deklarirana sa zadanim vrijednostima. Proslijeđeni argument se podudara s do rađe nego b . Funkcija se vraća NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Kad izričito prođete nedefiniran kao argument koristi se zadana vrijednost ako postoji.
x(undefined, 3)
// returns 6
5. Parametri funkcije odmora
Prilikom dozivanja funkcije ponekad se pojavi potreba da se može proslijediti proizvoljan broj argumenata i obraditi te argumente unutar funkcije. Ovu potrebu rješava parametri funkcije mirovanja sintaksa. Pruža način za hvatanje ostatka argumenata nakon definiranih argumenata pomoću dolje navedene sintakse. Ovi dodatni argumenti hvataju se u nizu.
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. Predlošci nizova
Predložak nizova odnosi se na interpolaciju varijabli i izraza u nizove pomoću sintakse poput perla ili ljuske. Predložak niza zatvoren je u znakove povratne oznake ( `` ). Nasuprot tome, jednostruki navodnici ( ' ) ili dvostruki navodnici ( ' ) označavaju normalne nizove. Izrazi unutar predloška označeni su između $ { i } . Evo primjera:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
Naravno, za ocjenjivanje možete koristiti proizvoljan 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'
Ova se sintaksa za definiranje nizova može koristiti i za definiranje više redaka.
var x = `hello world
next line`
// returns
hello world
next line
7. Svojstva objekta
ES6 donosi pojednostavljenu sintaksu stvaranja objekata. Pogledajte primjer u nastavku:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Računati nazivi nekretnina također su prilično zgodni. Uz ES5 i starije verzije, da biste postavili svojstvo objekta s izračunatim imenom, morali ste učiniti sljedeće:
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}
Sada sve možete učiniti u jednoj definiciji:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
I naravno, da biste definirali metode, možete ga jednostavno definirati imenom:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Sintaksa formalne definicije klase
Definicija klase
I na kraju, JavaScript dobiva formalnu sintaksu definicije klase. Iako je to samo sintaksički šećer u odnosu na već dostupne klase temeljene na prototipima, on služi za poboljšanje jasnoće koda. To znači da je tako ne dodati novi objektni model ili bilo što slično.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Metode deklariranja
Definiranje metode također je vrlo jednostavno. Nema tu nikakvih iznenađenja.
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
Dobivači i postavljači
Sada imamo i preuzimače i postavljače, s jednostavnim ažuriranjem sintakse. Ponovno definiramo Krug razred s an području imovine.
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
Dodajmo sada postavljača. Da biste mogli definirati radius kao svojstvo koje se može postaviti, trebali bismo redefinirati stvarno polje u _radius ili nešto što se neće sukobiti sa postavljačem. U protivnom nailazimo na pogrešku prelijevanja steka.
Evo redefinirane klase:
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
Sve u svemu, ovo je lijep dodatak objektno orijentiranom JavaScript-u.
Nasljeđivanje
Osim definiranja klasa pomoću razred ključnu riječ, možete koristiti i produžava ključna riječ za nasljeđivanje od super klasa. Pogledajmo kako to funkcionira na primjeru.
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 to je bio kratak uvod u neke značajke JavaScripta ES6.
Slijedi: upoznavanje nekoliko važnih metoda JavaScript polja i skriptiranje animacije robota osjetljive na glas! Također saznajte o sjajnom front-end okviru koji se zove Vue.
Kredit za sliku: micrologia/ Depositphotos
Udio Udio Cvrkut E -pošta Canon protiv Nikona: Koja je marka fotoaparata bolja?Canon i Nikon dva su najveća imena u industriji fotoaparata. No, koja marka nudi bolju liniju fotoaparata i objektiva?
izvadite videozapis s web stranicePročitajte Dalje Povezane teme
- Programiranje
- JavaScript
Pretplatite se na naše obavijesti
Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!
Kliknite ovdje za pretplatu