Home-theater-designers
ES6 refererer til version 6 af programmeringssproget ECMA Script. ECMA Script er det standardiserede navn for JavaScript, og version 6 er den næste version efter version 5, som blev udgivet i 2011. Det er en stor forbedring af JavaScript-sproget og tilføjer mange flere funktioner, der skal gøre storstilet softwareudvikling lettere .
ECMAScript, eller ES6, blev udgivet i juni 2015. Det blev efterfølgende omdøbt til ECMAScript 2015. Webbrowsersupport til 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 kendt som en spiller at konvertere ES6 -kode til ES5, hvilket understøttes bedre i de fleste browsere.
Lad os nu se på nogle store ændringer, som ES6 bringer til JavaScript.
1. Konstanter
Endelig er konceptet med konstanter kommet til JavaScript! Konstanter er værdier, der kun kan defineres én gang (pr. Omfang, omfang forklaret nedenfor). En ny definition inden for samme omfang udløser en fejl.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Du kan bruge konstanten, uanset hvor du kan bruge en variabel ( hvor ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Blokomfattede variabler og funktioner
Velkommen til det 21. århundrede, JavaScript! Med ES6 deklareres variabler ved hjælp af lade (og konstanter beskriver ovenfor) følger blokbestemmelsesregler ligesom i Java, C ++ osv. (For at lære mere, se hvordan man erklærer variabler i JavaScript.)
Før denne opdatering var variabler i JavaScript funktionsomfang. Det vil sige, at når du havde brug for et nyt omfang for en variabel, var du nødt til at deklarere det inden for en funktion.
Variabler beholder værdien indtil slutningen af blokken. Efter blokken gendannes værdien i den ydre blok (hvis nogen).
hindbær pi 3 vs b+
{
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 også redefinere konstanter inden for sådanne blokke.
{
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. Pilefunktioner
ES6 introducerer pilfunktioner til JavaScript. (Disse ligner traditionelle funktioner, men har en enklere syntaks.) I det følgende eksempel, x er en funktion, der accepterer en parameter kaldet til , og returnerer sin stigning:
var x = a => a + 1;
x(4) // returns 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))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Definer funktioner, der accepterer flere argumenter ved at omslutte dem i parentes:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[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 til og b . Den anden parameter b er givet en standardværdi på 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
I modsætning til andre sprog som C ++ eller python kan parametre med standardværdier vises før dem uden standardværdier. 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 }
Men argumenter matches fra venstre mod højre. I den første påkaldelse herunder, b har en udefineret værdi selvom til er blevet erklæret med en standardværdi. Det afleverede argument matches med til hellere end b . Funktionen vender tilbage NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Når du eksplicit kommer ind udefineret som et argument bruges standardværdien, hvis der er en.
x(undefined, 3)
// returns 6
5. Restfunktionsparametre
Når man påberåber en funktion, opstår der nogle gange et behov for at kunne videregive et vilkårligt antal argumenter og 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 ved hjælp af syntaksen vist nedenfor. Disse ekstra argumenter fanges i en matrix.
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. Strenge skabelon
Strenge skabeloner refererer til interpolering af variabler og udtryk i strenge ved hjælp af en syntaks som perl eller skallen. En strengskabelon er omsluttet af tegn med tilbage-kryds ( `` ). Derimod enkelte citater ( ' ) eller dobbelte citater ( ' ) angiver normale strenge. Udtryk inde i skabelonen markeres mellem $ { og } . Her er et eksempel:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
Selvfølgelig kan du bruge et vilkårligt udtryk til evaluering.
// 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'
Denne syntaks til at definere strenge kan også bruges til at definere strenge med flere linjer.
var x = `hello world
next line`
// returns
hello world
next line
7. Objektegenskaber
ES6 bringer en forenklet syntaks til oprettelse af objekter. Tag et kig på eksemplet herunder:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Computere ejendomsnavne er også ganske fiks. Med ES5 og tidligere, for at indstille en objektegenskab med et beregnet navn, var du nødt til at gøre dette:
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øre det hele i en enkelt definition:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', 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)
// returns
6
8. Formel klassedefinitionssyntaks
Klasse definition
Og endelig får JavaScript en formel syntaks for klassedefinition. Selvom det kun er syntaktisk sukker i forhold til de allerede tilgængelige protytype-baserede klasser, tjener det til at forbedre kodens klarhed. Det betyder, at det gør det ikke tilføj en ny objektmodel eller lignende.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Deklarationsmetoder
Det er også ganske enkelt at definere en metode. Ingen overraskelser der.
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 og Setters
Vi har nu også getters og setters med en simpel opdatering af syntaksen. Lad os omdefinere Cirkel klasse med en areal ejendom.
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
Lad os nu tilføje en setter. At kunne definere radius som en indstillelig ejendom bør vi omdefinere det faktiske felt til _radius eller noget, der ikke vil kollidere med setteren. Ellers støder vi på en stack overflow -fejl.
Her er den omdefinerede klasse:
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
Alt i alt er dette en god tilføjelse til objektorienteret JavaScript.
Arv
Ud over at definere klasser ved hjælp af klasse nøgleord, kan du også bruge strækker sig nøgleord at arve fra superklasser. Lad os se, hvordan dette fungerer med et eksempel.
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
Og det var en kort introduktion til nogle af funktionerne i JavaScript ES6.
Næste op: at blive fortrolig med et par vigtige JavaScript -array -metoder og scripting af en stemmefølsom robotanimation! Find også ud af om en fantastisk front-end ramme kaldet Vue.
Billedkredit: micrologia/ Depositphotos
Del Del Tweet E -mail Canon vs Nikon: Hvilket kameramærke er bedre?Canon og Nikon er de to største navne i kameraindustrien. Men hvilket mærke tilbyder den bedre serie af kameraer og objektiver?
hvorfor får ikke macs virusLæs Næste Relaterede emner
- Programmering
- JavaScript
Abonner på vores nyhedsbrev
Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!
Klik her for at abonnere