Javascript ES6
ECMAScript 2015 was de tweede grote herziening van JavaScript.
ECMAScript 2015 is ook bekend als ES6 en ECMAScript 6.
Dit hoofdstuk beschrijft de belangrijkste kenmerken van ES6.
Nieuwe functies in ES6
- Het let trefwoord
- Het const-sleutelwoord
- Pijlfuncties
- voor/van
- Kaartobjecten
- Objecten instellen
- Klassen
- Beloften
- Symbool
- Standaardparameters:
- Functie Rustparameter:
- String.inclusief()
- String.startsWith()
- String.endsWith()
- Matrix.van()
- Matrixtoetsen()
- matrix vinden()
- Matrix findIndex()
- Nieuwe wiskundige methoden
- Nieuwe nummereigenschappen
- Nieuwe nummermethoden
- Nieuwe wereldwijde methoden
- Iterables Object.entries
- JavaScript-modules
Browserondersteuning voor ES6 (2015)
Safari 10 en Edge 14 waren de eerste browsers die ES6 volledig ondersteunden:
| Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
| Jan 2017 | Aug 2016 | Mar 2017 | Jul 2016 | Aug 2018 |
JavaScript laat
Met het letsleutelwoord kunt u een variabele met een blokbereik declareren.
Voorbeeld
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
Lees er meer over letin het hoofdstuk: JavaScript Let .
JavaScript-const
Met het constsleutelwoord kunt u een constante declareren (een JavaScript-variabele met een constante waarde).
Constanten zijn vergelijkbaar met let-variabelen, behalve dat de waarde niet kan worden gewijzigd.
Voorbeeld
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
Lees er meer over constin het hoofdstuk: JavaScript Const .
Pijlfuncties
Pijlfuncties staan een korte syntaxis toe voor het schrijven van functie-uitdrukkingen.
U hebt het functiontrefwoord, het returntrefwoord en de
accolades niet nodig .
Voorbeeld
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Pijlfuncties hebben geen eigen this. Ze zijn niet erg geschikt voor het definiëren van objectmethoden .
Pijlfuncties worden niet gehesen. Ze moeten worden gedefinieerd voordat ze worden gebruikt.
Gebruiken const
is veiliger dan gebruiken var, omdat een functie-uitdrukking altijd een constante waarde is.
returnU kunt het trefwoord en de accolades alleen weglaten als de functie een enkele instructie is. Daarom is het misschien een goede gewoonte om ze altijd te bewaren:
Voorbeeld
const x = (x, y) => { return x * y };
Leer meer over Pijlfuncties in het hoofdstuk: JavaScript Pijlfunctie .
De For/Of-lus
De JavaScript for/of-instructie doorloopt de waarden van een itereerbaar object.
for/oflaat je datastructuren doorlopen die itereerbaar zijn, zoals arrays, strings, kaarten, nodelists en meer.
De for/oflus heeft de volgende syntaxis:
for (variable of iterable) {
// code block to be executed
}
variabele - Voor elke iteratie wordt de waarde van de volgende eigenschap aan de variabele toegewezen. Variabele kan worden gedeclareerd met
const, let, of var.
itereerbaar - Een object met itereerbare eigenschappen.
Looping over een array
Voorbeeld
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + " ";
}
Looping over een string
Voorbeeld
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + " ";
}
Lees meer in het hoofdstuk: JavaScript Loop For/In/Of .
JavaScript-kaartobjecten
Het kunnen gebruiken van een object als sleutel is een belangrijke kaartfunctie.
Voorbeeld
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a new Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
Lees meer over kaartobjecten in het hoofdstuk: JavaScript Map() .
JavaScript-objecten instellen
Voorbeeld
// Create a Set
const letters = new Set();
// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
Lees meer over Set-objecten in het hoofdstuk: JavaScript Set() .
JavaScript-klassen
JavaScript-klassen zijn sjablonen voor JavaScript-objecten.
Gebruik het trefwoord classom een klas aan te maken.
Voeg altijd een methode toe met de naam constructor():
Syntaxis
class ClassName {
constructor() { ... }
}
Voorbeeld
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
In het bovenstaande voorbeeld wordt een klasse gemaakt met de naam "Car".
De klasse heeft twee initiële eigenschappen: "naam" en "jaar".
Een JavaScript-klasse is geen object.
Het is een sjabloon voor JavaScript-objecten.
Een klas gebruiken
Als je een klasse hebt, kun je de klasse gebruiken om objecten te maken:
Voorbeeld
const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);
Lees meer over klassen in het hoofdstuk: JavaScript-klassen .
JavaScript-beloften
Een belofte is een JavaScript-object dat "Producing Code" en "Consuming Code" met elkaar verbindt.
"Code produceren" kan enige tijd duren en "Code consumeren" moet wachten op het resultaat.
Belofte-syntaxis
const myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject(); // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Voorbeeld met een belofte
const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
Lees meer over Promises in het hoofdstuk: JavaScript Promises .
Het symbooltype
Een JavaScript-symbool is een primitief gegevenstype, net als Number, String of Boolean.
Het vertegenwoordigt een unieke "verborgen" identificatie waartoe geen enkele andere code per ongeluk toegang kan krijgen.
Als verschillende codeurs bijvoorbeeld een eigenschap person.id willen toevoegen aan een persoonsobject dat bij een code van een derde partij hoort, kunnen ze elkaars waarden combineren.
Door Symbol() te gebruiken om unieke identifiers aan te maken, wordt dit probleem opgelost:
Voorbeeld
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
let id = Symbol('id');
person[id] = 140353;
// Now person[id] = 140353
// but person.id is still undefined
Symbolen zijn altijd uniek.
Als u twee symbolen met dezelfde beschrijving maakt, hebben ze verschillende waarden.
Symbol("id") == Symbol("id") // false
Standaard parameterwaarden
Met ES6 kunnen functieparameters standaardwaarden hebben.
Voorbeeld
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(5); // will return 15
Functie Rustparameter:
Met de parameter rest (...) kan een functie een onbepaald aantal argumenten als een array behandelen:
Voorbeeld
function sum(...args) {
let sum = 0;
for (let arg of args) sum += arg;
return sum;
}
let x = sum(4, 9, 16, 25, 29, 100, 66, 77);
String.inclusief()
De includes()methode retourneert trueals een tekenreeks een opgegeven waarde bevat, anders false:
Voorbeeld
let text = "Hello world, welcome to the universe.";
text.includes("world") // Returns true
String.startsWith()
De startsWith()methode retourneert true
als een tekenreeks begint met een opgegeven waarde, anders false:
Voorbeeld
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // Returns true
String.endsWith()
De endsWith()methode retourneert true
als een tekenreeks eindigt met een opgegeven waarde, anders false:
Voorbeeld
var text = "John Doe";
text.endsWith("Doe") // Returns true
Matrix.van()
The Array.from() method returns an Array object from any object with a length
property or any iterable object.
Example
Create an Array from a String:
Array.from("ABCDEFG") // Returns [A,B,C,D,E,F,G]
Array keys()
The keys() method returns an Array Iterator object with the keys of an array.
Example
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
Array find()
The find() method returns the value of the first array element that passes a
test function.
This example finds (returns the value of ) the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
Array findIndex()
The findIndex() method returns the index of the first array element that
passes a test function.
This example finds the index of the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
New Math Methods
ES6 added the following methods to the Math object:
Math.trunc()Math.sign()Math.cbrt()Math.log2()Math.log10()
The Math.trunc() Method
Math.trunc(x) returns the integer part of x:
Example
Math.trunc(4.9); // returns 4
Math.trunc(4.7); // returns 4
Math.trunc(4.4); // returns 4
Math.trunc(4.2); // returns 4
Math.trunc(-4.2); // returns -4
The Math.sign() Method
Math.sign(x) returns if x is negative, null or positive:
Example
Math.sign(-4); // returns -1
Math.sign(0); // returns 0
Math.sign(4); // returns 1
The Math.cbrt() Method
Math.cbrt(x) returns the cube root of x:
Example
Math.cbrt(8); // returns 2
Math.cbrt(64); // returns 4
Math.cbrt(125); // returns 5
The Math.log2() Method
Math.log2(x) returns the base 2 logarithm of x:
Example
Math.log2(2); // returns 1
The Math.log10() Method
Math.log10(x) returns the base 10 logarithm of x:
Example
Math.log10(10); // returns 1
New Number Properties
ES6 added the following properties to the Number object:
EPSILONMIN_SAFE_INTEGERMAX_SAFE_INTEGER
Example
let x = Number.EPSILON;
Example
let x = Number.MIN_SAFE_INTEGER;
Example
let x = Number.MAX_SAFE_INTEGER;
New Number Methods
ES6 added 2 new methods to the Number object:
Number.isInteger()Number.isSafeInteger()
The Number.isInteger() Method
The Number.isInteger() method returns true if the argument is an integer.
Example
Number.isInteger(10); // returns true
Number.isInteger(10.5); // returns false
The Number.isSafeInteger() Method
A safe integer is an integer that can be exactly represented as a double precision number.
The Number.isSafeInteger() method returns true if the argument is a safe integer.
Example
Number.isSafeInteger(10); // returns true
Number.isSafeInteger(12345678901234567890); // returns false
Safe integers are all integers from -(253 - 1) to +(253 - 1).
This is safe: 9007199254740991. This is not safe: 9007199254740992.
New Global Methods
ES6 added 2 new global number methods:
isFinite()isNaN()
The isFinite() Method
The global isFinite() method returns false if the argument is Infinity or NaN.
Otherwise it returns true:
Example
isFinite(10/0); // returns false
isFinite(10/1); // returns true
The isNaN() Method
The global isNaN() method returns true if the argument is NaN. Otherwise it returns false:
Example
isNaN("Hello"); // returns true