Dele:
Hva er ES6 og hva Javascript-programmererne trenger å vite
ES6 refererer til versjon 6 av ECMA Script programmeringsspråket. ECMA Script er det standardiserte navnet på JavaScript Hva er JavaScript, og kan Internett eksistere uten det? Hva er JavaScript, og kan Internett eksistere uten det? JavaScript er en av de tingene mange tar for gitt. Alle bruker det. Les mer, og versjon 6 er den neste versjonen etter versjon 5, som ble utgitt i 2011. Det er en stor forbedring av JavaScript-språket, og legger til mange flere funksjoner som skal gjøre det enklere for programvareutvikling..
ECMAScript, eller ES6, ble publisert i juni 2015. Det ble senere omdøpt til ECMAScript 2015. Nettleserstøtte for hele språket er ikke fullført, men store deler støttes. Store nettlesere støtter noen funksjoner i ES6. Det er imidlertid mulig å bruke programvare som kalles a transpiler å konvertere ES6-kode til ES5, som bedre støttes på de fleste nettlesere.
La oss nå se på noen store endringer som ES6 bringer til JavaScript.
1. Konstanter
Endelig har konseptet med konstanter gjort det til JavaScript! Konstanter er verdier som kun kan defineres en gang (per omfang, omfang som er forklart nedenfor). En omdefinisjon innenfor samme omfang utløser en feil.
const JOE = 4.0 JOE = 3.5 // resulterer i: Uncaught TypeError: Oppgave til konstant variabel. Du kan bruke konstanten hvor du kan bruke en variabel (Var).
console.log ("Verdi er:" + joe * 2) // utskrifter: 8 2. Block-Scoped Variabler og Funksjoner
Velkommen til det 21. århundre, JavaScript! Med ES6, variabler deklarert med la (og konstanter beskrive over) følger blokkscoping regler som i Java, C + +, osv.
Før denne oppdateringen ble variabler i JavaScript funksjonen scoped. Det vil si at når du trengte et nytt omfang for en variabel, måtte du erklære det innenfor en funksjon.
Variabler beholder verdien til slutten av blokken. Etter blokken blir verdien i den ytre blokken (hvis noen) gjenopprettet.
la x = "hei"; la x = "verden"; console.log ("indre blokk, x =" + x); console.log ("ytre blokk, x =" + x); // skriver indre blokk, x = verdens ytre blokk, x = hei Du kan omdefinere konstanter også, innenfor slike blokker.
la x = "hei"; const x = 4,0; console.log ("indre blokk, x =" + x); prøv x = 3.5 catch (err) console.error ("indre blokk:" + feil); x = "verden"; console.log ("ytre blokk, x =" + x); // skriver inn blokk, x = 4 indre blokk: TypeError: Oppgave til konstant variabel. ytre blokk, x = verden 3. Pil Funksjoner
ES6 gir en ny syntaks for å definere funksjoner ved hjelp av en pil. I følgende eksempel, x er en funksjon som aksepterer en parameter som kalles en, og returnerer sin økning:
var x = a => a + 1; x (4) // returnerer 5 Ved hjelp av denne syntaksen kan du enkelt og enkelt definere og sende argumenter i funksjoner.
Bruke med en for hver():
[1, 2, 3, 4] .forEach (a => console.log (a + "=>" + a *)) // utskrifter 1 => 1 2 => 4 3 => 9 4 => 16 Definer funksjoner som godtar flere argumenter ved å legge dem i parentes:
[22, 98, 3, 44, 67] .sort ((a, b) => a - b) // returnerer [3, 22, 44, 67, 98] 4. Standardfunksjon Parametre
Funksjonsparametere kan nå deklareres med standardverdier. I de neste, x er en funksjon med to parametere en og b. Den andre parameteren b er gitt en standardverdi på 1.
var x = (a, b = 1) => a * b x (2) // returnerer 2 x (2, 2) // returnerer 4 I motsetning til andre språk som C ++ eller python, kan parametere med standardverdier vises før de uten standard. Merk at denne funksjonen er definert som en blokk med a komme tilbake verdi som illustrasjon.
var x = (a = 2, b) => return a * b Men argumenter matches fra venstre til høyre. I den første påkallingen nedenfor, b har en udefinert verdi selv om en har blitt erklært med en standardverdi. Det innleverte argumentet matches med en heller enn b. Funksjonen returnerer NaN.
x (2) // returnerer NaN x (1, 3) // returnerer 3 Når du eksplisitt sender inn udefinert Som argument brukes standardverdien hvis det er en.
x (undefined, 3) // returnerer 6 5. Hvilfunksjon Parametre
Når man påkaller en funksjon, oppstår et behov noen ganger for å kunne passere i et vilkårlig antall argumenter, og å behandle disse argumentene i funksjonen. Dette behovet håndteres av hvileparametere syntaks. Den gir en måte å fange resten av argumentene etter de definerte argumentene ved hjelp av syntaksen vist nedenfor. Disse ekstraargumentene er fanget i en matrise.
var x = funksjon (a, b, ... args) console.log ("a =" + a + ", b =" + b + "," + args.length + "args left"); x (2, 3) // skriver a = 2, b = 3, 0 args venstre x (2, 3, 4, 5) // skriver a = 2, b = 3, 2 args igjen 6. String Templating
String templating refererer til interpolerende variabler og uttrykk i strengene ved hjelp av en syntaks som perl eller skallet. En strengmal er vedlagt i tilbakekryssingstegn ('). I motsetning til enkelt anførselstegn (') eller doble anførselstegn (“) angir normale strenger. Uttrykk i malen er merket ut mellom $ og . Her er et eksempel:
var navnet = "joe"; var x = 'hei $ name' / returnerer "hei joe" Selvfølgelig kan du bruke et vilkårlig uttrykk for evaluering.
// definere en pil-funksjon var f = a => a * 4 // angi en parameterverdi var v = 5 // og evaluer funksjonen i strengmalen var x = 'hallo $ f (v)' // returnerer "hei 20" Denne syntaksen for å definere strenger kan også brukes til å definere multi-line strenger.
var x = 'hello world next line' // returnerer hei verden neste linje 7. Objektegenskaper
ES6 bringer en forenklet syntaks for objektskaping. Ta en titt på eksemplet nedenfor:
var x = "hallo verden", y = 25 var a = x, y // er ekvivalent med ES5: x: x, y: y Beregnede eiendomsnavn er også ganske nifty. Med ES5 og tidligere, for å sette en objektegenskap med et beregnet navn, måtte du gjøre dette:
var x = "hallo verden", y = 25 var a = x: x, y: y a ["joe" + y] = 4 // a er nå: x: "hallo verden", y: 25 , joe25: 4 Nå kan du gjøre alt i en enkelt definisjon:
var a = x, y, ["joe" + y]: 4 // returnerer x: "hallo verden", y: 25, joe25: 4 Og selvfølgelig, for å definere metoder, kan du bare definere det med navnet:
var a = x, y, ["joe" + y]: 4, foo (v) retur v + 4 a.foo (2) // returnerer 6 8. Formell klasses Definisjon syntaks
Klasse Definisjon
Og til slutt får JavaScript en formell syntaks for klasses Definisjon. Mens det bare er syntaktisk sukker over de allerede tilgjengelige protytypebaserte klassene, tjener det til å forbedre kodeklarheten. Det betyr at dette gjør ikke legg til en ny objektmodell eller noe fancy sånn.
klasse sirkel konstruktør (radius) this.radius = radius // bruk den var c = ny sirkel (4) // retur: sirkel radius: 4 Deklarere Metoder
Definere en metode er også ganske enkel. Ingen overraskelser der.
klassesirkel konstruktør (radius) this.radius = radius computeArea () return Math.PI * this.radius * this.radius var c = ny sirkel (4) c.computeArea () // retur: 50.26548245743669 Getters og Setters
Vi har nå getters og setters, med en enkel oppdatering til syntaksen. La oss omdefinere Sirkel klasse med en område eiendom.
klasse sirkel konstruktør (radius) this.radius = radius få område () return Math.PI * this.radius * this.radius var c = ny sirkel (4) // retur: sirkel radius: 4 c.area // returnerer: 50.26548245743669 La oss nå legge til en setter. For å kunne definere radius Som en settbar eiendom, bør vi omdefinere det aktuelle feltet til _radius eller noe som ikke kommer i konflikt med setteren. Ellers støter vi på en stabeloverflowfeil.
Her er den omdefinerte klassen:
klasse sirkel konstruktør (radius) this._radius = radius få område () return Math.PI * this._radius * this._radius sett radius (r) this._radius = r var c = ny sirkel (4) // retur: Sirkel _radius: 4 c.area // retur: 50.26548245743669 c.radius = 6 c.area // returnerer: 113.09733552923255 Alt i alt er dette et fint tillegg til objektorientert JavaScript.
Arv
I tillegg til å definere klasser som bruker klasse søkeord, kan du også bruke strekker søkeord å arve fra superklasser. La oss se hvordan dette fungerer med et eksempel.
klasse ellipse konstruktør (bredde, høyde) this._width = width; this._height = height; få område () return Math.PI * this._width * this._height; sett bredde (w) this._width = w; sett høyde (h) this._height = h; klasse sirkel forlender ellipse konstruktør (radius) super (radius, radius); innstilt radius (r) super.width = r; super.height = r; // lage en sirkel var c = ny sirkel (4) // retur: sirkel _width: 4, _height: 4 c.radius = 2 // c er nå: Sirkel _width: 2, _height: 2 c.area // retur: 12.566370614359172 c.radius = 5 c.area // retur: 78.53981633974483 Og det var en kort introduksjon til noen av funksjonene til JavaScript ES6.
Neste opp: Skrive en stemmefølsom robot animasjon Hvordan skrive en stemmefølsom robot animasjon i p5.js Hvordan skrive en stemmefølsom robot animasjon i p5.js Ønsker du å få barna dine interessert i programmering? Vis dem denne veiledningen for å bygge et lydreaktivt animert robothodet. Les mer !
Bilde Kreditt: Mikrologi / Depositum
Utforsk mer om: JavaScript, .