Home-theater-designers
ES6 viitab ECMA Scripti programmeerimiskeele versioonile 6. ECMA Script on JavaScripti standardnimi ja versioon 6 on järgmine versioon pärast versiooni 5, mis ilmus 2011. aastal. See on JavaScripti keele oluline täiustus ja lisab veel palju funktsioone, mis lihtsustavad suuremahulist tarkvaraarendust .
ECMAScript ehk ES6 avaldati juunis 2015. Hiljem nimetati see ümber ECMAScript 2015. Veebibrauseri tugi täiskeele jaoks pole veel täielik, kuigi suuri osi toetatakse. Suuremad veebibrauserid toetavad mõningaid ES6 funktsioone. Siiski on võimalik kasutada tarkvara, mis on tuntud kui a mängija teisendada ES6 kood ES5 -ks, mida enamus brausereid paremini toetavad.
Vaatame nüüd mõningaid olulisi muudatusi, mida ES6 JavaScripti toob.
1. Konstandid
Lõpuks on konstandite mõiste jõudnud JavaScripti! Konstandid on väärtused, mida saab määratleda ainult üks kord (ulatuse, ulatuse kohta allpool). Samas ulatuses olev uuesti määratlemine käivitab vea.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Konstanti saate kasutada kõikjal, kus saate kasutada muutujat ( kus ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Blokeeritud ulatusega muutujad ja funktsioonid
Tere tulemast 21. sajandisse, JavaScript! ES6 puhul deklareeriti muutujad kasutades lase (ja konstante kirjeldatakse eespool) järgige plokkide ulatuse reegleid nagu Java, C ++ jne (lisateabe saamiseks vaadake, kuidas JavaScriptis muutujaid deklareerida.)
Enne seda värskendust olid JavaScripti muutujate funktsioonide ulatus. See tähendab, et kui vajate muutuja jaoks uut ulatust, pidite selle funktsiooni sees deklareerima.
Muutujad säilitavad väärtuse kuni ploki lõpuni. Pärast plokki taastatakse välise ploki väärtus (kui see on olemas).
parimad rakendused android tv box 2018 jaoks
{
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
Sellistes plokkides saate ka konstandid uuesti määratleda.
{
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. Noolefunktsioonid
ES6 tutvustab noolefunktsioonid JavaScripti juurde. (Need on sarnased traditsiooniliste funktsioonidega, kuid neil on lihtsam süntaks.) Järgmises näites x on funktsioon, mis aktsepteerib parameetrit nimega et , ja tagastab selle juurdekasvu:
var x = a => a + 1;
x(4) // returns 5
Selle süntaksi abil saate funktsioonides argumente hõlpsalt määratleda ja edastada.
Kasutamine koos a igaühele() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Määrake funktsioonid, mis aktsepteerivad mitut argumenti, lisades need sulgudesse:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. Vaikefunktsiooni parameetrid
Funktsiooni parameetreid saab nüüd deklareerida vaikeväärtustega. Järgnevalt x on kahe parameetriga funktsioon et ja b . Teine parameeter b on antud vaikeväärtuseks 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
Erinevalt teistest keeltest, näiteks C ++ või python, võivad vaikeväärtustega parameetrid ilmuda enne vaikeseadeid. Pange tähele, et see funktsioon on defineeritud kui plokk a tagasi väärtus näitlikustamiseks.
var x = (a = 2, b) => { return a * b }
Argumendid sobitatakse aga vasakult paremale. Esimesel allpool esitatud kutsel b on an määratlemata väärtus isegi et on deklareeritud vaikeväärtusega. Möödunud argument on sobitatud et pigem kui b . Funktsioon naaseb NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Kui sisenete selgesõnaliselt määratlemata argumendina kasutatakse vaikeväärtust, kui see on olemas.
x(undefined, 3)
// returns 6
5. Puhkefunktsiooni parameetrid
Funktsiooni käivitamisel tekib mõnikord vajadus suvalise arvu argumentide edastamiseks ja nende argumentide töötlemiseks funktsioonis. Selle vajadusega tegeleb puhkefunktsiooni parameetrid süntaks. See annab võimaluse ülejäänud argumentide jäädvustamiseks pärast määratletud argumente, kasutades allpool näidatud süntaksit. Need täiendavad argumendid jäädvustatakse massiivis.
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. Stringide mallimine
Stringide mallimine viitab muutujate ja avaldiste interpoleerimisele stringideks, kasutades süntaksit nagu perl või shell. Stringimall on ümbritsetud tagumiste märkidega ( '' ). Seevastu üksikud jutumärgid ( ' ) või kahekordseid jutumärke ( ' ) näitavad tavalisi stringe. Malli sees olevad avaldised on märgitud vahele $ { ja } . Siin on näide:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
Loomulikult võite hindamiseks kasutada suvalist avaldist.
// 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'
Seda stringide määratlemise süntaksi saab kasutada ka mitmerealiste stringide määratlemiseks.
var x = `hello world
next line`
// returns
hello world
next line
7. Objekti omadused
ES6 toob lihtsustatud objekti loomise süntaksi. Vaadake allolevat näidet:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Arvutatud kinnisvara nimed on ka üsna nutikad. ES5 ja varasemate versioonide puhul peate arvutatud nimega objekti atribuudi määramiseks tegema järgmist.
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}
Nüüd saate seda kõike teha ühes määratluses:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
Ja muidugi, meetodite määratlemiseks saate selle määratleda lihtsalt nimega:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Ametliku klassi määratluse süntaks
Klassi määratlus
Ja lõpuks saab JavaScript ametliku klassi määratluse süntaksi. Kuigi see on pelgalt süntaktiline suhkur juba olemasolevate protüüpipõhiste klasside osas, aitab see koodi selgust parandada. See tähendab, et nii läheb mitte lisage uus objektimudel või midagi sellist väljamõeldud.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Deklareerimismeetodid
Meetodi määratlemine on samuti üsna lihtne. Üllatusi seal pole.
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
Getterid ja setterid
Nüüd on meil ka getterid ja setterid koos süntaksi lihtsa värskendusega. Määratleme uuesti Ring klass koos piirkonnas vara.
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
Lisame nüüd setteri. Et oleks võimalik määratleda raadius seadistatava omadusena peaksime tegeliku välja uuesti määratlema _raadius või midagi, mis setteriga vastuollu ei lähe. Vastasel juhul ilmneb virna ületäitumise viga.
Siin on uuesti määratletud klass:
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
Kokkuvõttes on see tore lisand objektorienteeritud JavaScriptile.
Pärand
Lisaks klasside määratlemisele, kasutades klassi märksõna, saate kasutada ka ulatub superklassidelt päritav märksõna. Vaatame näite abil, kuidas see toimib.
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
Ja see oli lühike sissejuhatus mõnedesse JavaScript ES6 funktsioonidesse.
Järgmine: tutvumine mõned olulised JavaScripti massiivi meetodid ja skriptida häältundlikku robotianimatsiooni! Uurige ka suurepärast kasutajaliidese raamistikku nimega Vue.
Pildikrediit: micrologia/ Depositphotos
Jaga Jaga Piiksuma E -post Canon vs Nikon: milline kaamera kaubamärk on parem?Canon ja Nikon on kaameratööstuse kaks suurimat nime. Kuid milline kaubamärk pakub paremat kaamerate ja objektiivide valikut?
ootamatu kerneli režiimi lõks Windows 10Loe edasi Seotud teemad
- Programmeerimine
- JavaScript
Telli meie uudiskiri
Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!
Tellimiseks klõpsake siin