Home-theater-designers
ES6 hänvisar till version 6 av programmeringsspråket ECMA Script. ECMA Script är det standardiserade namnet för JavaScript, och version 6 är nästa version efter version 5, som släpptes 2011. Det är en stor förbättring av JavaScript-språket och lägger till många fler funktioner som är avsedda att göra storskalig mjukvaruutveckling enklare .
ECMAScript, eller ES6, publicerades i juni 2015. Det döptes därefter om till ECMAScript 2015. Webbläsarstöd för hela språket är ännu inte klart, även om större delar stöds. Stora webbläsare stöder vissa funktioner i ES6. Det är dock möjligt att använda programvara som kallas en spelare att konvertera ES6 -kod till ES5, vilket stöds bättre i de flesta webbläsare.
Låt oss nu titta på några stora förändringar som ES6 ger JavaScript.
1. Konstanter
Slutligen har konceptet konstanter nått JavaScript! Konstanter är värden som bara kan definieras en gång (per omfattning, omfattning förklaras nedan). En omdefinition inom samma omfattning utlöser ett fel.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Du kan använda konstanten var du än kan använda en variabel ( var ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Block-omfattande variabler och funktioner
Välkommen till 2000 -talet, JavaScript! Med ES6 deklareras variabler med låta (och konstanter beskriver ovan) följer blockregleringsregler precis som i Java, C ++, etc. (För mer information, se hur man deklarerar variabler i JavaScript.)
Före denna uppdatering var variabler i JavaScript funktionsomfattande. Det vill säga när du behövde ett nytt omfång för en variabel var du tvungen att deklarera det inom en funktion.
Variabler behåller värdet till slutet av blocket. Efter blocket återställs värdet i det yttre blocket (om sådant finns).
hur man kommer åt min telefon från min dator
{
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
Du kan också omdefiniera konstanter inom sådana block.
{
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. Pilfunktioner
ES6 introducerar pilfunktioner till JavaScript. (Dessa liknar traditionella funktioner, men har en enklare syntax.) I följande exempel, x är en funktion som accepterar en parameter som kallas till och returnerar sin ökning:
var x = a => a + 1;
x(4) // returns 5
Med denna syntax kan du enkelt definiera och skicka argument i funktioner.
Använd med en för varje() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Definiera funktioner som accepterar flera argument genom att infoga dem inom parentes:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. Standardfunktionsparametrar
Funktionsparametrar kan nu deklareras med standardvärden. I följande, x är en funktion med två parametrar till och b . Den andra parametern b har ett standardvärde på 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
Till skillnad från andra språk som C ++ eller python kan parametrar med standardvärden visas före de utan standardvärden. Observera att denna funktion definieras som ett block med a lämna tillbaka värde som illustration.
var x = (a = 2, b) => { return a * b }
Men argumenten matchas från vänster till höger. I det första anropet nedan, b har en odefinierad värde trots till har deklarerats med ett standardvärde. Det godkända argumentet matchas med till hellre än b . Funktionen återkommer NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
När du uttryckligen går in odefinierad som argument används standardvärdet om det finns ett.
x(undefined, 3)
// returns 6
5. Restfunktionsparametrar
När man åberopar en funktion uppstår ibland ett behov av att kunna skicka in ett godtyckligt antal argument och bearbeta dessa argument inom funktionen. Detta behov hanteras av vilofunktionsparametrar syntax. Det ger ett sätt att fånga resten av argumenten efter de definierade argumenten med hjälp av syntaxen som visas nedan. Dessa extra argument fångas i en array.
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. Strängmall
Strängmallning avser interpolering av variabler och uttryck i strängar med en syntax som perl eller skalet. En strängmall är innesluten i tecken med back-tick ( '' ). Däremot enkla citat ( ' ) eller dubbla citattecken ( ' ) anger normala strängar. Uttryck i mallen markeras mellan $ { och } . Här är ett exempel:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
Naturligtvis kan du använda ett godtyckligt uttryck för utvärdering.
// 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'
Denna syntax för att definiera strängar kan också användas för att definiera flerradiga strängar.
var x = `hello world
next line`
// returns
hello world
next line
7. Objektegenskaper
ES6 ger en förenklad syntax för objektskapande. Ta en titt på exemplet nedan:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Beräknade fastighetsnamn är också ganska fina. Med ES5 och tidigare, för att ställa in en objektegenskap med ett beräknat namn, var du tvungen att göra detta:
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}
Nu kan du göra allt i en enda definition:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
Och naturligtvis, 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)
// returns
6
8. Formell klassdefinitionssyntax
Klassdefinition
Och slutligen får JavaScript en formell klassdefinitionssyntax. Även om det bara är syntaktiskt socker över de redan tillgängliga protytypbaserade klasserna, tjänar det till att förbättra kodens klarhet. Det betyder att det här gör inte lägg till en ny objektmodell eller något liknande.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Deklarationsmetoder
Att definiera en metod är också ganska enkelt. Inga överraskningar där.
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
Getters och Setters
Vi har nu också getters och setters, med en enkel uppdatering av syntaxen. Låt oss omdefiniera Cirkel klass med en område fast egendom.
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
Låt oss nu lägga till en setter. Att kunna definiera radie som en ställbar egendom bör vi omdefiniera det faktiska fältet till _radie eller något som inte kommer att kollidera med setter. Annars stöter vi på ett stack overflow -fel.
Här är den omdefinierade klassen:
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
Sammantaget är detta ett trevligt tillägg till objektorienterad JavaScript.
Arv
Förutom att definiera klasser med klass nyckelord kan du också använda sträcker sig nyckelord att ärva från superklasser. Låt oss se hur detta fungerar med ett exempel.
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
Och det var en kort introduktion till några av funktionerna i JavaScript ES6.
Nästa upp: bli bekant med några viktiga JavaScript -matrismetoder och skriva en röstkänslig robotanimation! Ta också reda på om en fantastisk front-end-ram som kallas Vue.
Bildkredit: micrologia/ Depositphotos
Dela med sig Dela med sig Tweet E-post Canon vs Nikon: Vilket kameramärke är bättre?Canon och Nikon är de två största namnen i kameraindustrin. Men vilket märke erbjuder den bättre sortimentet av kameror och objektiv?
titta på filmer online gratis utan registreringLäs Nästa Relaterade ämnen
- Programmering
- JavaScript
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!
Klicka här för att prenumerera