JavaScript ES6 Features

In deze tutorial leert u meer over de nieuwe features in de nieuwste versie van JavaScript.

Wat is ECMAScript 6 (of ES6)

ECMAScript 2015 (of ES6) is de zesde en belangrijkste editie van de ECMAScript-taalspecificatiestandaard. Het definieert de standaard voor de JavaScript-implementatie.

ES6 bracht belangrijke veranderingen in de JavaScript-taal., Het introduceert een aantal nieuwe functies, zoals, block-scoped variabelen, nieuwe loop voor itereren over arrays en objecten, template literals, en vele andere verbeteringen om JavaScript-programmering gemakkelijker en leuker te maken. In dit hoofdstuk bespreken we enkele van de beste ES6-functies die u kunt gebruiken in uw dagelijkse JavaScript-codering.

het Let sleutelwoord

ES6 introduceert het nieuwe let sleutelwoord voor het declareren van variabelen. Voor ES6 was de enige manier om een variabele in JavaScript te declareren het var sleutelwoord., Laten we eens kijken wat het verschil is tussen hen.

er zijn twee kritische verschillen tussen de var en let. Variabelen gedeclareerd met het var sleutelwoord zijn functie-scoped en gehost aan de bovenkant binnen het bereik, terwijl variabelen gedeclareerd met let sleutelwoord zijn block-scoped ({}) en ze worden niet gehost.

Block scoping betekent eenvoudig dat een nieuwe scope wordt gemaakt tussen een paar accolades, d.w.z. {}., Daarom, als je een variabele declareert met het let sleutelwoord binnen een lus, bestaat deze niet buiten de lus, zoals in het volgende voorbeeld wordt aangetoond:

zoals je kunt zien in het bovenstaande voorbeeld is de variabele i in het eerste blok niet toegankelijk buiten de for lus. Dit stelt ons ook in staat om dezelfde variabelnaam meerdere keren te hergebruiken omdat de scope beperkt is tot het blok ({}), wat resulteert in minder variabele declaratie en meer cleaner code.,

het const-sleutelwoord

het nieuwe const sleutelwoord maakt het mogelijk constanten te definiëren. Constanten zijn alleen-lezen, U kunt er geen nieuwe waarden aan toewijzen. Ze zijn ook geblokkeerd als let.

const PI = 3.14;console.log(PI); // 3.14PI = 10; // error

U kunt echter nog steeds objecteigenschappen of array-elementen wijzigen:

De for…van Lus

De nieuwe for...of lus stelt ons in staat om heel gemakkelijk over arrays of andere itereerbare objecten te itereren., Ook wordt de code binnen de lus uitgevoerd voor elk element van het iterable object. Hier is een voorbeeld:

de for...of lus werkt niet met objecten omdat ze niet herhaalbaar zijn. Als u de eigenschappen van een object wilt herhalen, kunt u de lus for-in gebruiken.

Template-Literals

Template-literals bieden een eenvoudige en schone manier om meerregelige strings te maken en stringinterpolatie uit te voeren. Nu kunnen we variabelen of expressies insluiten in een string op elke plek zonder gedoe.,

Template literals worden gemaakt met back-tick (` `) (grave accent) teken in plaats van de gebruikelijke dubbele of enkele aanhalingstekens. Variabelen of expressies kunnen in de tekenreeks worden geplaatst met behulp van de syntaxis ${...}. Vergelijk de volgende voorbeelden en zie hoeveel nuttig het is:

terwijl in ES5, om hetzelfde te bereiken moesten we iets als dit schrijven:

standaardwaarden voor functieparameters

nu kunt u in ES6 standaardwaarden opgeven voor de functieparameters., Dit betekent dat als er geen argumenten worden opgegeven om te functioneren wanneer het wordt genoemd, deze standaardparameters worden gebruikt. Dit is een van de meest verwachte functies in JavaScript. Hier is een voorbeeld:

terwijl in ES5, om hetzelfde te bereiken moesten we iets als dit schrijven:

Arrow functies

Arrow functies zijn een andere interessante functie in ES6. Het biedt een meer beknopte syntaxis voor het schrijven van functie-expressies door de opt-out van de function en return sleutelwoorden.,

pijl functies worden gedefinieerd met behulp van een nieuwe syntaxis, de fat pijl (=>) notatie. Laten we eens kijken hoe het eruit ziet:

zoals u kunt zien is er geen function en return sleutelwoord in arrow function declaration.

u kunt ook de haakjes overslaan, d.w.z. () in het geval dat er precies één parameter is, maar u zult deze altijd moeten gebruiken als u nul of meer dan één parameter hebt.,

bovendien, als er meer dan één uitdrukking in de functie body is, moet je deze accolades omwikkelen ({}). In dit geval moet u ook het return statement gebruiken om een waarde te retourneren.

Er zijn verschillende variaties van hoe je pijlfuncties kunt schrijven. Hier zijn de meest gebruikte:

Er is een belangrijk verschil tussen reguliere functies en arrow-functies., In tegenstelling tot een normale functie heeft een pijlfunctie niet zijn eigen this, het neemt this van de buitenste functie waar het is gedefinieerd. In JavaScript is this de huidige uitvoeringscontext van een functie.,

om dit duidelijk te begrijpen, kijken we naar de volgende voorbeelden:

herschrijven van hetzelfde voorbeeld met behulp van ES6 template literals en arrow function:

zoals u duidelijk kunt zien, verwijst het this sleutelwoord in het bovenstaande voorbeeld naar de context van de functie die de arrow-functie omsluit die persoon object is (regel no-9), in tegenstelling tot het vorige voorbeeld waar het verwees naar het globale object venster (Regel no-9).

klassen

in ECMAScript 5 en eerder bestonden klassen nooit in JavaScript., Klassen worden geïntroduceerd in ES6 die lijkt op klassen in andere objectgeoriënteerde talen, zoals Java, PHP, enz. maar ze werken niet precies op dezelfde manier. ES6 klassen maken het makkelijker om objecten te maken, implementeren overerving met behulp van het extends sleutelwoord, en hergebruiken van de code.

in ES6 kunt u een klasse declareren met het nieuwe class sleutelwoord gevolgd door een klasse-naam. Volgens afspraak worden klassenamen geschreven in TitleCase (dat wil zeggen met hoofdletters van de eerste letter van elk woord).,

in het bovenstaande voorbeeld erft de vierkante klasse van de rechthoek met behulp van hetextends sleutelwoord. Klassen die erven van andere klassen worden afgeleide klassen of kinderklassen genoemd.

ook moet u super() aanroepen in de dochterklasse constructor voordat u toegang krijgt tot de context (this)., Als u bijvoorbeeld de super() weglaat en de getArea() methode op vierkant object aanroept, zal dit resulteren in een fout, aangezien getArea() methode toegang tot this sleutelwoord vereist.

Modules

voor ES6 was er geen native ondersteuning voor modules in JavaScript. Alles in een JavaScript-toepassing, bijvoorbeeld variabelen over verschillende JavaScript-bestanden, deelde dezelfde scope.

ES6 introduceert een bestandsgebaseerde module, waarin elke module wordt weergegeven door een afzonderlijk .js bestand., Nu kunt u het export of import statement in een module gebruiken om variabelen, functies, klassen of andere entiteiten naar/uit andere modules of bestanden te exporteren of te importeren.

laten we een module maken dat wil zeggen een JavaScript-bestand ” main.js “en plaats de volgende code in het:

Maak nu een ander JavaScript-bestand” app.js “met de volgende code:

maak uiteindelijk een HTML-bestand” test.html” en met de volgende code en open dit HTML-bestand in uw browser met behulp van HTTP-protocol (of gebruik localhost). Let ook op de type="module" Op script tag.,

de Restparameters

ES6 introduceert restparameters die ons in staat stellen een willekeurig aantal parameters door te geven aan een functie in de vorm van een array. Dit is vooral handig in situaties waarin je parameters aan een functie wilt doorgeven, maar je hebt geen idee hoeveel je er nodig hebt.

een rustparameter wordt gespecificeerd door een benoemde parameter voor te schrijven met restoperator (...), d.w.z. drie punten. Rest parameter kan alleen de laatste zijn in de lijst met parameters, en er kan slechts één rest parameter zijn., Neem een kijkje in het volgende voorbeeld, om te zien hoe het werkt:

als de rest parameter de enige parameter in een functie is, krijgt het alle argumenten doorgegeven aan de functie, anders krijgt het de rest van de argumenten die het aantal benoemde parameters overschrijdt.

de Spreadoperator

De spreadoperator, die ook wordt aangeduid met (...), vervult precies de tegenovergestelde functie van de restoperator. De spread operator spreidt een array uit (dat wil zeggen splitst) en geeft de waarden door aan de opgegeven functie, zoals getoond in het volgende voorbeeld:

De spread operator kan ook worden gebruikt om de elementen van een array in een andere array in te voegen zonder gebruik te maken van de array methoden zoals push(), unshift() concat(), enz.,

Destructuring Assignment

De destructuring assignment is een expressie die het gemakkelijk maakt om waarden uit arrays, of eigenschappen van objecten, in verschillende variabelen te extraheren door een kortere syntaxis te geven.

er zijn twee soorten destructietoewijzingen-de array en objectdestructietoewijzingen.,doe hetzelfde in slechts één regel met de array-destructietoewijzing:

u kunt ook rest-operator gebruiken in de array-destructietoewijzing, zoals hier getoond:

de objectdestructietoewijzing

in ES5 om de eigenschapswaarden van een object te extraheren moeten we zoiets als dit schrijven:

maar in ES6 kunt u de eigenschapswaarden van het object extraheren en eenvoudig toewijzen aan de variabelen zoals deze:

De meeste functies die we hierboven hebben besproken worden ondersteund in de nieuwste versie van de belangrijkste webbrowsers zoals Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, enz.,