In deze tutorial leer je aan de hand van voorbeelden over JavaScript ES6.
JavaScript ES6 (ook bekend als ECMAScript 2015 of ECMAScript 6 ) is de nieuwere versie van JavaScript die in 2015 is geïntroduceerd.
ECMAScript is de standaard die de programmeertaal JavaScript gebruikt. ECMAScript biedt de specificatie over hoe JavaScript-programmeertaal zou moeten werken.
Deze tutorial biedt een korte samenvatting van veelgebruikte functies van ES6, zodat u snel kunt starten in ES6.
JavaScript laat
JavaScript letwordt gebruikt om variabelen te declareren. Voorheen werden variabelen gedeclareerd met behulp van het vartrefwoord.
Ga naar JavaScript let vs var voor meer informatie over het verschil tussen leten var.
De variabelen die letzijn gedeclareerd met zijn blokbereik . Dit betekent dat ze alleen toegankelijk zijn binnen een bepaald blok. Bijvoorbeeld,
// variable declared using let let name = 'Sara'; ( // can be accessed only inside let name = 'Peter'; console.log(name); // Peter ) console.log(name); // Sara
JavaScript-const
De constinstructie wordt gebruikt om constanten in JavaScript te declareren. Bijvoorbeeld,
// name declared with const cannot be changed const name = 'Sara';
Eenmaal gedeclareerd, kunt u de waarde van een constvariabele niet wijzigen .
JavaScript-pijlfunctie
In de ES6- versie kunt u pijlfuncties gebruiken om functie-expressies te maken. Bijvoorbeeld
deze functie
// function expression let x = function(x, y) ( return x * y; )
kan worden geschreven als
// function expression using arrow function let x = (x, y) => x * y;
Voor meer informatie over pijlfuncties gaat u naar JavaScript-pijlfunctie.
JavaScript-klassen
JavaScript-klasse wordt gebruikt om een object te maken. Klasse is vergelijkbaar met een constructorfunctie. Bijvoorbeeld,
class Person ( constructor(name) ( this.name = name; ) )
Het trefwoord classwordt gebruikt om een klas te maken. De eigenschappen worden toegewezen in een constructorfunctie.
Nu kunt u een object maken. Bijvoorbeeld,
class Person ( constructor(name) ( this.name = name; ) ) const person1 = new Person('John'); console.log(person1.name); // John
Bezoek JavaScript-klassen voor meer informatie over klassen.
Standaard parameterwaarden
In de ES6-versie kunt u standaardwaarden doorgeven in de functieparameters. Bijvoorbeeld,
function sum(x, y = 5) ( // take sum // the value of y is 5 if not passed console.log(x + y); ) sum(5); // 10 sum(5, 15); // 20
Als u in het bovenstaande voorbeeld de parameter niet doorgeeft y, zijn er standaard 5 nodig .
Ga voor meer informatie over standaardparameters naar Standaardparameters voor JavaScript-functies.
Letterlijke JavaScript-sjablonen
De letterlijke sjabloon heeft het gemakkelijker gemaakt om variabelen in een string op te nemen. Voordat u bijvoorbeeld moest doen:
const first_name = "Jack"; const last_name = "Sparrow"; console.log('Hello ' + first_name + ' ' + last_name);
Dit kan worden bereikt door letterlijke sjabloon te gebruiken door:
const first_name = "Jack"; const last_name = "Sparrow"; console.log(`Hello $(first_name) $(last_name)`);
Ga naar JavaScript Template Literal voor meer informatie over sjabloonletters.
JavaScript-vernietiging
De vernietigende syntaxis maakt het gemakkelijker om waarden toe te wijzen aan een nieuwe variabele. Bijvoorbeeld,
// before you would do something like this const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Met behulp van ES6 Destructuring-syntaxis kan de bovenstaande code worden geschreven als:
const person = ( name: 'Sara', age: 25, gender: 'female' ) let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Bezoek JavaScript Destructuring voor meer informatie over destructurering.
JavaScript importeren en exporteren
U zou een functie of een programma kunnen exporteren en het in een ander programma kunnen gebruiken door het te importeren. Dit helpt om herbruikbare componenten te maken. Als u bijvoorbeeld twee JavaScript-bestanden heeft met de naam contact.js en home.js.
In het bestand contact.js kunt u de functie exporterencontact() :
// export export default function contact(name, age) ( console.log(`The name is $(name). And age is $(age).`); )
Als u de contact()functie vervolgens in een ander bestand wilt gebruiken , kunt u de functie eenvoudig importeren. Bijvoorbeeld in het home.js-bestand:
import contact from './contact.js'; contact('Sara', 25); // The name is Sara. And age is 25
JavaScript belooft
Beloften worden gebruikt om asynchrone taken af te handelen. Bijvoorbeeld,
// returns a promise let countValue = new Promise(function (resolve, reject) ( reject('Promise rejected'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); // Promise resolved ), )
Bezoek JavaScript Promises voor meer informatie over beloften.
JavaScript Rest Parameter en Spread Operator
U kunt de parameter rest gebruiken om een onbeperkt aantal argumenten als een array weer te geven. Bijvoorbeeld,
function show(a, b,… args) ( console.log(a); // one console.log(b); // two console.log(args); // ("three", "four", "five", "six") ) show('one', 'two', 'three', 'four', 'five', 'six')
U geeft de overige argumenten door met … syntaxis. Vandaar de parameter name rest .
U gebruikt de spread-syntaxis … om de items naar een enkele array te kopiëren. Bijvoorbeeld,
let arr1 = ('one', 'two'); let arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // ("one", "two", "three", "four", "five")
Zowel de rest-parameter als de spread-operator gebruiken dezelfde syntaxis. De spreidoperator wordt echter gebruikt met arrays (itereerbare waarden).
Bezoek JavaScript Spread Operator voor meer informatie over de spread-operator.
