Delen:
Wat is ES6 en wat Javascript-programmeurs moeten weten
ES6 verwijst naar versie 6 van de ECMA Script-programmeertaal. ECMA Script is de gestandaardiseerde naam voor JavaScript. Wat is JavaScript en kan internet zonder het bestaan? Wat is JavaScript en kan internet zonder het bestaan? JavaScript is een van die dingen die velen als vanzelfsprekend beschouwen. Iedereen gebruikt het. Lees meer 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 nog veel meer functies toe die bedoeld zijn om grootschalige softwareontwikkeling eenvoudiger te maken.
ECMAScript, of ES6, werd gepubliceerd in juni 2015. Het werd vervolgens hernoemd naar ECMAScript 2015. Ondersteuning van de webbrowser voor de volledige taal is nog niet voltooid, hoewel grote delen worden ondersteund. Grote webbrowsers ondersteunen enkele functies van ES6. Het is echter mogelijk om software te gebruiken die bekend staat als a transpiler ES6-code converteren naar ES5, die beter wordt ondersteund door de meeste browsers.
Laten we nu eens kijken naar enkele belangrijke wijzigingen die ES6 aan JavaScript toevoegt.
1. Constanten
Eindelijk is het concept van constanten JavaScript geworden! Constanten zijn waarden die slechts één keer kunnen worden gedefinieerd (per bereik, scope hieronder uitgelegd). Een herdefinitie binnen hetzelfde bereik leidt tot een fout.
const JOE = 4.0 JOE = 3.5 // resultaten in: Uncaught TypeError: toewijzing aan constante variabele. Je kunt de constante gebruiken waar je een variabele kunt gebruiken (var).
console.log ("Waarde is:" + Joe * 2) // afdrukken: 8 2. Block-Scoped variabelen en functies
Welkom bij de 21ste eeuw, JavaScript! Met ES6, variabelen gedeclareerd met laat (en constanten beschrijven hierboven) volg blok scoping regels, net zoals in Java, C ++, enz.
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.
let x = "hallo"; let x = "world"; console.log ("binnenste blok, x =" + x); console.log ("buitenste blok, x =" + x); // drukt binnenste blok af, x = wereld buitenste blok, x = hallo Je kunt constanten ook binnen zulke blokken opnieuw definiëren.
let x = "hallo"; const x = 4,0; console.log ("binnenste blok, x =" + x); probeer x = 3.5 catch (err) console.error ("inner block:" + err); x = "wereld"; console.log ("buitenste blok, x =" + x); // print binnenste blok, x = 4 binnenste blok: TypeError: toewijzing aan constante variabele. buitenste blok, x = wereld 3. Pijlfuncties
ES6 biedt een nieuwe syntaxis voor het definiëren van functies met behulp van een pijl. In het volgende voorbeeld, X is een functie die een parameter genaamd accepteert een, en retourneert de verhoging:
var x = a => a + 1; x (4) // geeft 5 terug Met deze syntaxis kunt u gemakkelijk argumenten in functies definiëren en doorgeven.
Gebruiken met een forEach ():
[1, 2, 3, 4] .forElke (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) // retourneert [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 een en b. De tweede parameter b krijgt een standaardwaarde van 1.
var x = (a, b = 1) => a * b x (2) // geeft 2 x terug (2, 2) // geeft 4 als resultaat In tegenstelling tot andere talen zoals C ++ of python, kunnen parameters met standaardwaarden worden weergegeven vóór die zonder standaardwaarden. Merk op dat deze functie is gedefinieerd als een blok met een terugkeer waarde bij wijze van illustratie.
var x = (a = 2, b) => retourneer a * b De argumenten worden echter van links naar rechts vergeleken. In de eerste aanroep hieronder, b heeft een onbepaald waarde hoewel een is gedeclareerd met een standaardwaarde. Het doorgegeven argument is gekoppeld aan een liever dan b. De functie retourneert NaN.
x (2) // geeft NaN x terug (1, 3) // geeft 3 terug Wanneer je expliciet binnenkomt onbepaald als een argument wordt de standaardwaarde gebruikt als die er is.
x (undefined, 3) // retourneert 6 5. Rest Function Parameters
Bij het aanroepen van een functie ontstaat soms de behoefte om een willekeurig aantal argumenten door te geven en deze argumenten binnen de functie te verwerken. Deze behoefte wordt behandeld 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 syntaxis die hieronder wordt getoond. 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. String Templating
String-templating verwijst naar het interpoleren van variabelen en uitdrukkingen in strings met behulp van een syntaxis zoals perl of de shell. Een tekenreekstemplate is ingesloten in terugtiktekens ('). Daarentegen enkele aanhalingstekens (') of dubbele aanhalingstekens (“) geven normale tekenreeksen aan. Uitdrukkingen in de sjabloon worden gemarkeerd tussen $ en . Hier is een voorbeeld:
var name = "joe"; var x = 'hallo $ naam' // geeft "hallo joe" terug Natuurlijk kunt u een willekeurige uitdrukking gebruiken voor evaluatie.
// definieer een pijlfunctie var f = a => a * 4 // stel een parameterwaarde in var v = 5 // en evalueer de functie binnen de tekenreeks template var x = 'hallo $ f (v)' // geeft "hallo 20" terug Deze syntaxis voor het definiëren van strings kan ook worden gebruikt om strings met meerdere regels te definiëren.
var x = 'hallo wereld volgende regel' // geeft hallo wereldvolgorde terug 7. Objecteigenschappen
ES6 biedt een vereenvoudigde syntaxis voor het maken van objecten. Bekijk het onderstaande voorbeeld:
var x = "hallo wereld", y = 25 var a = x, y // is gelijk aan de ES5: x: x, y: y Berekende eigendomsnamen zijn ook behoorlijk handig. Met ES5 en eerder, om een objecteigenschap met een berekende naam in te stellen, moest je dit doen:
var x = "hallo wereld", y = 25 var a = x: x, y: y a ["joe" + y] = 4 // a is nu: x: "hallo wereld", y: 25 , joe25: 4 Nu kunt u het allemaal in één enkele definitie doen:
var a = x, y, ["joe" + y]: 4 // retourneert x: "hallo wereld", 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) // geeft 6 terug 8. Formele syntaxis van syntaxis van klassendefinitie
Klasse definitie
En tot slot krijgt JavaScript een formele syntaxis voor de klassendefinitie. Hoewel het slechts syntactische suiker is ten opzichte van de reeds beschikbare op protytypen gebaseerde klassen, dient het wel om de duidelijkheid van de code te verbeteren. Dat betekent dat dit zo is niet voeg een nieuw objectmodel of iets dergelijks toe.
class Circle constructor (radius) this.radius = radius // gebruik hem var c = new Circle (4) // retourneert: Circle radius: 4 Declarerende methoden
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 () // geeft als resultaat: 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 les met een Gebied eigendom.
class Circle constructor (radius) this.radius = radius get area () return Math.PI * this.radius * this.radius var c = new Circle (4) // retourneert: Circle radius: 4 c.area // retourneert: 50.26548245743669 Laten we nu een setter toevoegen. Om te kunnen definiëren radius als een instelbaar eigendom, zouden we het actuele veld opnieuw moeten definiëren _radius of iets dat niet botst met de setter. Anders komen we een stack-overflow-fout tegen.
Hier is de geherdefinieerde klasse:
class Circle constructor (radius) this._radius = radius get area () return Math.PI * this._radius * this._radius radius instellen (r) this._radius = r var c = new Circle (4) // geeft als resultaat: Cirkel _radius: 4 c.area // retourneert: 50.26548245743669 c.radius = 6 c.area // geeft als resultaat: 113.09733552923255 Al met al is dit een leuke toevoeging aan object-georiënteerd JavaScript.
Erfenis
Naast het definiëren van klassen met behulp van de klasse sleutelwoord, kunt u ook de strekt zoekwoord om te erven van superklassen. Laten we eens kijken hoe dit werkt met een voorbeeld.
klasse 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; klasse Circle verlengt Ellipse constructor (radius) super (radius, radius); set radius (r) super.width = r; super.hoogte = 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 // geeft als resultaat: 12.566370614359172 c.radius = 5 c.area // retourneert: 78.53981633974483 En dat was een korte inleiding tot enkele van de functies van JavaScript ES6.
Next up: scripting van een stemgevoelige robotanimatie Scripts schrijven voor een stemgevoelige robot-animatie in p5.js Scripts schrijven voor een stemgevoelige robotanimatie in p5.js Wil je je kinderen interesseren voor programmeren? Laat ze deze gids zien voor het bouwen van een geluid reactieve geanimeerde robotkop. Lees verder !
Beeldcredits: micrologia / Depositphotos
Ontdek meer over: JavaScript, .