Dela med sig:
Vad är ES6 och vad Javascript programmerare behöver veta
ES6 avser version 6 av ECMA Script programmeringsspråket. ECMA Script är det standardiserade namnet för JavaScript Vad är JavaScript, och kan Internet existera utan det? Vad är JavaScript, och kan Internet existera utan det? JavaScript är ett av de saker som många tar för givet. Alla använder det. Läs mer, och version 6 är nästa version efter version 5, som släpptes 2011. Den är en viktig förbättring av JavaScript-språket och lägger till många fler funktioner som syftar till att göra storskalig mjukvaruutveckling enklare.
ECMAScript, eller ES6, publicerades i juni 2015. Det ändrades därefter till ECMAScript 2015. Webbläsarsupport för hela språket är ännu inte fullständigt, även om stora portioner stöds. Största webbläsare stöder vissa funktioner i ES6. Det är dock möjligt att använda program som kallas a transpiler att konvertera ES6-kod till ES5, vilket bättre stöds på de flesta webbläsare.
Låt oss nu titta på några större förändringar som ES6 ger till JavaScript.
1. Konstanter
Slutligen har konceptet konstanter gjort det till JavaScript! Konstanter är värden som endast kan definieras en gång (per räckvidd, räckvidd förklaras nedan). En omdefiniering inom samma räckvidd utlöser ett fel.
const JOE = 4.0 JOE = 3.5 // resulterar i: Uncaught TypeError: Uppgift till konstant variabel. Du kan använda konstanten varhelst du kan använda en variabel (var).
console.log ("Värdet är:" + joe * 2) // utskrifter: 8 2. Block-Scoped Variabler och Funktioner
Välkommen till det 21: a århundradet, JavaScript! Med ES6, variabler deklarerade med låta (och konstanter beskrivna ovan) följ block scoping regler precis som i Java, C ++, etc.
Före denna uppdatering var variabler i JavaScript funktionen scoped. Det vill säga när du behövde ett nytt utrymme för en variabel, var du tvungen att deklarera den inom en funktion.
Variabler behåller värdet till slutet av blocket. Efter blocket återställs värdet i det yttre blocket (om det finns någon).
let x = "hej"; let x = "world"; console.log ("inre block, x =" + x); console.log ("yttre blocket, x =" + x); // skriver innerblock, x = världens yttre block, x = hej Du kan omdefiniera konstanter också inom sådana block.
let x = "hej"; const x = 4,0; console.log ("inre block, x =" + x); försök x = 3.5 fånga (err) console.error ("innerblock:" + err); x = "world"; console.log ("yttre blocket, x =" + x); // skriver inre block, x = 4 inre block: TypeError: Uppgift till konstant variabel. yttre blocket, x = värld 3. Pilfunktioner
ES6 ger en ny syntax för att definiera funktioner med hjälp av en pil. I följande exempel, x är en funktion som accepterar en parameter som heter en, och returnerar dess inkrement:
var x = a => a + 1; x (4) // returnerar 5 Med hjälp av denna syntax kan du enkelt och enkelt definiera och överföra argument i funktioner.
Användning med a för varje():
[1, 2, 3, 4] .forEach (a => console.log (a + "=>" + a * a)) // utskrifter 1 => 1 2 => 4 3 => 9 4 => 16 Definiera funktioner som accepterar flera argument genom att bifoga dem inom parentes:
[22, 98, 3, 44, 67] .sort ((a, b) => a - b) // returnerar [3, 22, 44, 67, 98] 4. Standardfunktionsparametrar
Funktionsparametrar kan nu deklareras med standardvärden. I följande, x är en funktion med två parametrar en och b. Den andra parametern b har ett standardvärde på 1.
var x = (a, b = 1) => a * b x (2) // returnerar 2 x (2, 2) // returnerar 4 Till skillnad från andra språk som C ++ eller python kan parametrar med standardvärden visas före de som inte har standardinställningar. Observera att denna funktion definieras som ett block med a lämna tillbaka värde som illustration.
var x = (a = 2, b) => returnera a * b Men argument matchas från vänster till höger. I den första anropningen nedan, b har en odefinierad värdet trots att en har deklarerats med ett standardvärde. Det inkommande argumentet matchas med en hellre än b. Funktionen returnerar NaN.
x (2) // returnerar NaN x (1, 3) // returnerar 3 När du skickar in explicit odefinierad Som argument används standardvärdet om det finns en.
x (odefinierad, 3) // returnerar 6 5. Vilafunktionsparametrar
När man åberopar en funktion uppstår ett behov ibland för att kunna överföras i ett godtyckligt antal argument och att bearbeta dessa argument inom funktionen. Detta behov hanteras av vila funktion parametrar syntax. Det ger ett sätt att fånga resten av argumenten efter de definierade argumenten med hjälp av den syntax som visas nedan. Dessa extraargument är fångade i en array.
var x = funktion (a, b, ... args) console.log ("a =" + a + ", b =" + b + "," + args.length + "args left"); x (2, 3) // skriver a = 2, b = 3, 0 args kvar x (2, 3, 4, 5) // skriver a = 2, b = 3, 2 args kvar 6. String Templating
Stringmallering avser interpolerande variabler och uttryck i strängar med en syntax som perl eller skalet. En strängmall är inbäddad i back-tick-tecken ('). Enstaka citat (') eller dubbla citat (“) anger normala strängar. Uttryck i mallen är markerade mellan $ och . Här är ett exempel:
var namn = "joe"; var x = 'hej $ name' // returnerar hej joe Naturligtvis kan du använda ett godtyckligt uttryck för utvärdering.
// definiera en pilfunktion var f = a => a * 4 // ange ett parametervärde var v = 5 // och utvärdera funktionen inom strängmallen var x = 'hej $ f (v)' // returnerar "hej 20" Denna syntax för att definiera strängar kan också användas för att definiera strängar med flera linjer.
var x = 'hej världens nästa rad' // returnerar hej världens nästa rad 7. Objektegenskaper
ES6 ger en förenklad objekt skapande syntax. Ta en titt på exemplet nedan:
var x = "hej världen", y = 25 var a = x, y // motsvarar ES5: x: x, y: y Beräknade egendom namn är ganska nifty också. Med ES5 och tidigare, för att ställa in en objektegenskap med ett beräknat namn, var du tvungen att göra det här:
var x = "hej värld", y = 25 var a = x: x, y: y a ["joe" + y] = 4 // a är nu: x: "hej värld", y: 25 , joe25: 4 Nu kan du göra allt i en enda definition:
var a = x, y, ["joe" + y]: 4 // returnerar x: "hej världen", y: 25, joe25: 4 Och självklart, för att definiera metoder, kan du bara definiera det med namnet:
var a = x, y, ["joe" + y]: 4, foo (v) return v + 4 a.foo (2) // returnerar 6 8. Formell klassdefinitionssyntax
Klass Definition
Och till sist får JavaScript en formell syntetisk klassdefinition. Även om det bara är syntaktiskt socker över de redan tillgängliga protytypbaserade klasserna, tjänar det till att förbättra kod klarhet. Det betyder det här inte lägg till en ny objektmodell eller något som är så fint.
klass cirkel konstruktör (radien) this.radius = radius // använd den var c = ny cirkel (4) // returnerar: Cirkel rad: 4 Deklarera Metoder
Att definiera en metod är också ganska enkel. Inga överraskningar där.
klass cirkel konstruktör (radien) this.radius = radius computeArea () returnera Math.PI * this.radius * this.radius var c = ny cirkel (4) c.computeArea () // returnerar: 50.26548245743669 Getters och Setters
Vi har nu getters och setters med en enkel uppdatering till syntaxen. Låt oss omdefiniera Cirkel klass med en område fast egendom.
klass cirkel konstruktör (radien) this.radius = radius få area () returnera Math.PI * this.radius * this.radius var c = ny cirkel (4) // returnerar: Cirkel radius: 4 c.area // returnerar: 50.26548245743669 Låt oss nu lägga till en setter. För att kunna definiera radie Som en ställbar egendom borde vi omdefiniera själva fältet till _radie eller något som inte kommer att kollidera med setteren. Annars stöter vi på ett stackflödesfel.
Här är den omdefinierade klassen:
klass cirkel konstruktör (radien) this._radius = radius get area () returnera Math.PI * this._radius * this._radius radien (r) this._radius = r var c = ny cirkel (4) // Returer: Cirkel _radius: 4 c.area // Returer: 50.26548245743669 c.radius = 6 c.area // Returer: 113.09733552923255 Sammantaget är detta ett bra komplement till objektorienterad JavaScript.
Arv
Förutom att definiera klasser som använder klass sökord, kan du också använda sträcker sökord att ärva från superklasser. Låt oss se hur det här fungerar med ett exempel.
klass Ellipse konstruktör (bredd, höjd) this._width = width; this._height = height; få area () returnera Math.PI * this._width * this._height; inställd bredd (w) this._width = w; inställd höjd (h) this._height = h; klass Circle sträcker Ellipse konstruktör (radien) super (radie, radie); radie (r) super.width = r; super.height = r; // Skapa en cirkel var c = Ny cirkel (4) // Returer: Cirkel _width: 4, _height: 4 c.radius = 2 // c är nu: Cirkel _width: 2, _height: 2 c.area // returnerar: 12.566370614359172 c.radius = 5 c.area // returnerar: 78.53981633974483 Och det var en kort introduktion till några av funktionerna i JavaScript ES6.
Nästa upp: Scripting en röstkänslig robotanimering Hur man skriver en röstsensiv robot animation i p5.js Hur man skriver en röstsensiv robot animation i p5.js Vill du få dina barn intresserade av programmering? Visa dem den här guiden för att bygga ett ljudaktivt animerat robothuvud. Läs mer !
Bildkredit: Mikrologi / Depositionfoton
Utforska mer om: JavaScript, .