Home-theater-designers
ES6 verwijst naar versie 6 van de programmeertaal ECMA Script. ECMA Script is de gestandaardiseerde naam voor JavaScript en versie 6 is de volgende versie na versie 5, die in 2011 werd uitgebracht. Het is een belangrijke verbetering van de JavaScript-taal en voegt veel meer functies toe die bedoeld zijn om grootschalige softwareontwikkeling gemakkelijker te maken .
ECMAScript, of ES6, werd in juni 2015 gepubliceerd. Het werd vervolgens hernoemd naar ECMAScript 2015. De ondersteuning van de webbrowser voor de volledige taal is nog niet compleet, hoewel grote delen worden ondersteund. Grote webbrowsers ondersteunen sommige functies van ES6. Het is echter mogelijk om software te gebruiken die bekend staat als a speler om ES6-code om te zetten in ES5, wat in de meeste browsers beter wordt ondersteund.
Laten we nu eens kijken naar enkele belangrijke veranderingen die ES6 met zich meebrengt voor JavaScript.
1. Constanten
Eindelijk heeft het concept van constanten JavaScript bereikt! Constanten zijn waarden die slechts één keer kunnen worden gedefinieerd (per scope, scope hieronder uitgelegd). Een herdefinitie binnen hetzelfde bereik veroorzaakt een fout.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
U kunt de constante overal gebruiken waar u een variabele kunt gebruiken ( waar ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Blokvariabelen en functies
Welkom in de 21e eeuw, JavaScript! Met ES6, variabelen gedeclareerd met laten (en de constanten die hierboven worden beschreven) volgen de regels voor het afbakenen van blokken, net als in Java, C++, enz. (Zie voor meer informatie hoe variabelen in JavaScript te declareren.)
Vóór deze update waren variabelen in JavaScript functiebereik. Dat wil zeggen, wanneer u een nieuwe scope voor een variabele nodig had, moest u deze binnen een functie declareren.
Variabelen behouden de waarde tot het einde van het blok. Na het blok wordt de waarde in het buitenste blok (indien aanwezig) hersteld.
hoe u uw laptop beter kunt maken voor gamen
{
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
Binnen zulke blokken kun je ook constanten herdefiniëren.
{
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. Pijlfuncties
ES6 introduceert pijl functies naar JavaScript. (Deze zijn vergelijkbaar met traditionele functies, maar hebben een eenvoudigere syntaxis.) In het volgende voorbeeld, x is een functie die een parameter met de naam accepteert tot , en retourneert de toename:
var x = a => a + 1;
x(4) // returns 5
Met behulp van deze syntaxis kunt u gemakkelijk argumenten in functies definiëren en doorgeven.
gebruiken met een voor elk() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Definieer functies die meerdere argumenten accepteren door ze tussen haakjes te plaatsen:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. Standaard functieparameters:
Functieparameters kunnen nu worden gedeclareerd met standaardwaarden. In de volgende, x is een functie met twee parameters tot en B . De tweede parameter: B krijgt een standaardwaarde van 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
In tegenstelling tot andere talen zoals C++ of python, kunnen parameters met standaardwaarden vóór die zonder standaardwaarden verschijnen. Merk op dat deze functie is gedefinieerd als een blok met a opbrengst waarde ter illustratie.
var x = (a = 2, b) => { return a * b }
Argumenten worden echter van links naar rechts gematcht. In de eerste aanroep hieronder, B heeft een ongedefinieerd waarde hoewel tot is gedeclareerd met een standaardwaarde. Het doorgegeven argument komt overeen met tot liever dan B . De functie retourneert NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Wanneer je expliciet doorgeeft ongedefinieerd als argument wordt de standaardwaarde gebruikt als die er is.
x(undefined, 3)
// returns 6
5. Rustfunctieparameters:
Bij het aanroepen van een functie ontstaat soms de behoefte om een willekeurig aantal argumenten door te kunnen geven, en deze argumenten binnen de functie te verwerken. Deze behoefte wordt opgevangen door de rust functie parameters: syntaxis. Het biedt een manier om de rest van de argumenten na de gedefinieerde argumenten vast te leggen met behulp van de onderstaande syntaxis. Deze extra argumenten worden vastgelegd in een 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. Tekenreekssjablonen
String-templating verwijst naar het interpoleren van variabelen en expressies in strings met behulp van een syntaxis zoals perl of de shell. Een tekenreekssjabloon is ingesloten in back-tick-tekens ( `` ). Daarentegen enkele aanhalingstekens ( ' ) of dubbele aanhalingstekens ( ' ) geven normale tekenreeksen aan. Uitdrukkingen binnen de sjabloon zijn gemarkeerd tussen $ { en } . Hier is een voorbeeld:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
Natuurlijk kunt u een willekeurige uitdrukking gebruiken voor evaluatie.
// 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'
Deze syntaxis voor het definiëren van strings kan ook worden gebruikt om strings met meerdere regels te definiëren.
var x = `hello world
next line`
// returns
hello world
next line
7. Objecteigenschappen
ES6 brengt een vereenvoudigde syntaxis voor het maken van objecten. Kijk eens naar onderstaand voorbeeld:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Berekende eigenschapsnamen zijn ook heel handig. Met ES5 en eerder moest u dit doen om een objecteigenschap met een berekende naam in te stellen:
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 kunt u het allemaal in één enkele definitie doen:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
En natuurlijk, om methoden te definiëren, kun je het gewoon definiëren met de naam:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Syntaxis voor formele klassendefinitie
Klassedefinitie
En ten slotte krijgt JavaScript een formele syntaxis voor klassendefinities. Hoewel het slechts syntactische suiker is boven de reeds beschikbare op prototypen gebaseerde klassen, dient het om de duidelijkheid van de code te verbeteren. Dat betekent dat dit het geval is niet voeg een nieuw objectmodel toe of iets dergelijks.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Methoden declareren
Het definiëren van een methode is ook vrij eenvoudig. Geen verrassingen daar.
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 en setters
We hebben nu ook getters en setters, met een eenvoudige update van de syntaxis. Laten we de opnieuw definiëren Cirkel klas met een Oppervlakte eigendom.
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
Laten we nu een setter toevoegen. Om te kunnen definiëren straal als een instelbare eigenschap, moeten we het werkelijke veld opnieuw definiëren om _straal of iets dat niet botst met de setter. Anders komen we een stackoverflow-fout tegen.
Hier is de opnieuw gedefinieerde 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
Al met al is dit een mooie aanvulling op objectgeoriënteerd JavaScript.
Erfenis
Naast het definiëren van klassen met behulp van de klas trefwoord, kunt u ook de strekt zich uit trefwoord om te erven van superklassen. Laten we eens kijken hoe dit werkt met een voorbeeld.
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
En dat was een korte introductie tot enkele van de functies van JavaScript ES6.
Volgende: vertrouwd raken met een paar belangrijke JavaScript-arraymethoden en het scripten van een stemgevoelige robotanimatie! Ontdek ook over een geweldig front-end framework genaamd Vue .
Afbeelding tegoed: micrologia/ Depositphotos
Deel Deel Tweeten E-mail Canon versus Nikon: welk cameramerk is beter?Canon en Nikon zijn de twee grootste namen in de camera-industrie. Maar welk merk biedt de betere reeks camera's en lenzen?
donkere modus van bestandsverkenner werkt nietLees volgende Gerelateerde onderwerpen
- Programmeren
- JavaScript
Abonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren