Owen Little
0 
4107
90
ES6 henviser til version 6 af ECMA script-programmeringssprog. ECMA Script er det standardiserede navn for JavaScript Hvad er JavaScript, og kan Internettet eksistere uden det? Hvad er JavaScript, og kan Internettet eksistere uden det? JavaScript er en af de ting, mange tager for givet. Alle bruger det. , og version 6 er den næste version efter version 5, som blev frigivet i 2011. Det er en vigtig forbedring af JavaScript-sproget og tilføjer mange flere funktioner, der skal gøre softwareudvikling i stor skala lettere.
ECMAScript, eller ES6, blev offentliggjort i juni 2015. Det blev derefter omdøbt til ECMAScript 2015. Webbrowser-understøttelse af det fulde sprog er endnu ikke fuldført, selvom større dele understøttes. Store webbrowsere understøtter nogle funktioner i ES6. Det er dog muligt at bruge software kaldet a transpiler at konvertere ES6-kode til ES5, som bedre understøttes i de fleste browsere.
Lad os nu se på nogle større ændringer, som ES6 bringer til JavaScript.
1. Konstanter
Endelig har konceptet med konstanter gjort det til JavaScript! Konstanter er værdier, der kun kan defineres en gang (pr. Omfang, rækkefølge forklaret nedenfor). En re-definition inden for det samme omfang udløser en fejl.
const JOE = 4,0 JOE = 3,5 // resulterer i: Ikke fanget TypeError: Tildeling til konstant variabel. Du kan bruge konstanten, uanset hvor du kan bruge en variabel (Var).
console.log ("Værdi er:" + joe * 2) // udskrifter: 8 2. Block-scoped variabler og funktioner
Velkommen til det 21. århundrede, JavaScript! Med ES6 erklæres variabler ved hjælp af lade (og konstanter beskriver ovenfor) følger blokeringsomfangsregler ligesom i Java, C ++ osv.
Før denne opdatering blev variabler i JavaScript funktionsomfang. Det vil sige, at når du havde brug for et nyt omfang for en variabel, måtte du erklære det inden for en funktion.
Variabler beholder værdien indtil slutningen af blokken. Efter blokken gendannes værdien i den ydre blok (hvis nogen).
lad x = "hej"; lad x = "verden"; console.log ("indre blok, x =" + x); console.log ("ydre blok, x =" + x); // udskriver indre blok, x = verdens ydre blok, x = hej Du kan også omdefinere konstanter inden for sådanne blokke.
lad x = "hej"; const x = 4,0; console.log ("indre blok, x =" + x); prøv x = 3.5 catch (err) console.error ("indre blok:" + err); x = "verden"; console.log ("ydre blok, x =" + x); // udskriver indre blok, x = 4 indre blok: TypeError: Tildeling til konstant variabel. ydre blok, x = verden 3. Pilfunktioner
ES6 bringer en ny syntaks til definition af funktioner ved hjælp af en pil. I det følgende eksempel, x er en funktion, der accepterer en kaldet parameter -en, og returnerer dens forøgelse:
var x = a => a + 1; x (4) // returnerer 5 Ved hjælp af denne syntaks kan du nemt definere og videregive argumenter i funktioner.
Brug med en for hver():
[1, 2, 3, 4] .forEach (a => console.log (a + "=>" + a * a)) // udskrifter 1 => 1 2 => 4 3 => 9 4 => 16 Definer funktioner, der accepterer flere argumenter ved at vedlægge dem i parentes:
[22, 98, 3, 44, 67]. Sort ((a, b) => a - b) // returnerer [3, 22, 44, 67, 98] 4. Standardfunktionsparametre
Funktionsparametre kan nu deklareres med standardværdier. I det følgende, x er en funktion med to parametre -en og b. Den anden parameter b får en standardværdi på 1.
var x = (a, b = 1) => a * b x (2) // returnerer 2 x (2, 2) // returnerer 4 I modsætning til andre sprog som C ++ eller python kan parametre med standardværdier vises før dem uden standardindstillinger. Bemærk, at denne funktion er defineret som en blok med en Vend tilbage værdi som illustration.
var x = (a = 2, b) => return a * b Imidlertid matches argumenter fra venstre mod højre. I den første opfordring nedenfor, b har en undefined værdi selv -en er blevet erklæret med en standardværdi. Det indleverede argument matches med -en hellere end b. Funktionen vender tilbage NaN.
x (2) // returnerer NaN x (1, 3) // returnerer 3 Når du eksplicit passerer ind undefined Som et argument bruges standardværdien, hvis der er en.
x (udefineret, 3) // returnerer 6 5. Hvilefunktionsparametre
Når man påberåber sig en funktion, opstår der undertiden et behov for at kunne videregive et vilkårligt antal argumenter og for at behandle disse argumenter inden for funktionen. Dette behov håndteres af hvilefunktionsparametre syntaks. Det giver en måde at fange resten af argumenterne efter de definerede argumenter vha. Syntaxen vist nedenfor. Disse ekstra argumenter indfanges i en matrix.
var x = funktion (a, b, ... args) console.log ("a =" + a + ", b =" + b + "," + args.length + "args left"); x (2, 3) // udskriver a = 2, b = 3, 0 args venstre x (2, 3, 4, 5) // udskriver a = 2, b = 3, 2 args left 6. Streng Templating
Strengetemplering refererer til interpolering af variabler og udtryk i strenge ved hjælp af en syntaks som perl eller shell. En strengskabelon er lukket i bogstaver ()'). Derimod enkelt citater (') eller dobbelt citater (“) angiv normale strenge. Udtryk inde i skabelonen er markeret mellem $ og . Her er et eksempel:
var navn = "joe"; var x = 'hej $ navn' // returnerer "hej joe" Naturligvis kan du bruge et vilkårligt udtryk til evaluering.
// definere en pilefunktion var f = a => a * 4 // indstil en parameterværdi var v = 5 // og evaluer funktionen inden for strengskabelonen var x = 'hej $ f (v)' // vender tilbage "hej 20" Denne syntaks til at definere strenge kan også bruges til at definere flerstrengede strenge.
var x = 'hej verden næste linje' // returnerer hej verden næste linje 7. Objektegenskaber
ES6 bringer en forenklet syntaks til objekter, der skabes. Se eksemplet herunder:
var x = "hej verden", y = 25 var a = x, y // er ækvivalent med ES5: x: x, y: y Beregnede ejendomsnavne er også ganske smarte. Med ES5 og tidligere, for at indstille en objektegenskap med et beregnet navn, var du nødt til at gøre dette:
var x = "hej verden", y = 25 var a = x: x, y: y a ["joe" + y] = 4 // a er nu: x: "hej verden", y: 25 , joe25: 4 Nu kan du gøre det hele i en enkelt definition:
var a = x, y, ["joe" + y]: 4 // returnerer x: "hej verden", y: 25, joe25: 4 Og selvfølgelig, for at definere metoder, kan du bare definere det med navnet:
var a = x, y, ["joe" + y]: 4, foo (v) return v + 4 a.foo (2) // returnerer 6 8. Formel klassedefinitionssyntaks
Klasse Definition
Og endelig får JavaScript en formel syntaks til klassedefinition. Selvom det kun er syntaktisk sukker i forhold til de allerede tilgængelige prototypebaserede klasser, tjener det dog til at forbedre kodens klarhed. Det betyder, at det gør det ikke tilføj en ny objektmodel eller noget lignende.
klasse Cirkel konstruktør (radius) dette.radius = radius // brug det var c = nyt Cirkel (4) // returnerer: Cirkel radius: 4 Deklarationsmetoder
Definition af en metode er også ganske enkel. Ingen overraskelser der.
klasse Circle konstruktør (radius) this.radius = radius computeArea () return Math.PI * this.radius * this.radius var c = new Circle (4) c.computeArea () // returnerer: 50.26548245743669 Getters and Setters
Vi har nu også getters og setters med en simpel opdatering til syntaks. Lad os omdefinere Cirkel klasse med en areal ejendom.
klasse Circle konstruktør (radius) this.radius = radius få areal () return Math.PI * this.radius * this.radius var c = new Circle (4) // returnerer: Circle radius: 4 c.area // returnerer: 50.26548245743669 Lad os nu tilføje en setter. At være i stand til at definere radius som en fast ejendom, bør vi omdefinerer det aktuelle felt til _radius eller noget, der ikke kommer i konflikt med sætteren. Ellers støder vi på en stakoverløbsfejl.
Her er den omdefinerede klasse:
klasse Cirkel konstruktør (radius) dette._radius = radius få område () return Math.PI * dette._radius * dette._radius indstil radius (r) dette._radius = r var c = ny cirkel (4) // returnerer: Circle _radius: 4 c.area // returnerer: 50.26548245743669 c.radius = 6 c.area // returnerer: 113.09733552923255 Alt i alt er dette en dejlig tilføjelse til objektorienteret JavaScript.
Arv
Ud over at definere klasser ved hjælp af klasse nøgleord, kan du også bruge udvider nøgleord, der skal arves fra superklasser. Lad os se, hvordan dette fungerer med et eksempel.
klasse Ellipse konstruktør (bredde, højde) dette.bredde = bredde; dette.højde = højde; få område () return Math.PI * this._width * this._height; indstil bredde (w) this._width = w; indstil højde (h) this._height = h; klasse Cirkel udvider Ellipse konstruktør (radius) super (radius, radius); indstil radius (r) super.width = r; super.højde = r; // Opret en cirkel var c = ny Cirkel (4) // returnerer: Cirkel _bredde: 4, _højde: 4 c.radius = 2 // c er nu: Cirkel _bredde: 2, _højde: 2 c.area // returnerer: 12.566370614359172 c.radius = 5 c.area // returnerer: 78.53981633974483 Og det var en kort introduktion til nogle af funktionerne i JavaScript ES6.
Næste op: Skripting af en stemmefølsom robotanimation Sådan scriptes en stemmefølsom robotanimation i p5.js Sådan scriptes en stemmefølsom robotanimation i p5.js Vil du have dine børn interesseret i programmering? Vis dem denne vejledning til opbygning af et lydreaktivt animeret robothoved. !
Billedkredit: micrologia / Depositphotos