ECMAScript 2017
De naamgevingsconventie van JavaScript begon met ES1, ES2, ES3, ES5 en ES6.
Maar ECMAScript 2016 en 2017 heette niet ES7 en ES8.
Sinds 2016 worden nieuwe versies op jaartal genoemd (ECMAScript 2016 / 2017 / 2018).
Nieuwe functies in ECMAScript 2017
Dit hoofdstuk introduceert de nieuwe functies in ECMAScript 2017:
- JavaScript String-padding
- JavaScript Object.entries
- JavaScript Object.values
- JavaScript asynchrone functies
- JavaScript gedeeld geheugen
JavaScript String Padding
ECMAScript 2017 heeft twee String-methoden toegevoegd: padStart
en padEnd
om opvulling aan het begin en aan het einde van een string te ondersteunen.
Voorbeeld
let str = "5";
str = str.padStart(4,0);
// result is 0005
Voorbeeld
let str = "5";
str = str.padEnd(4,0);
// result is 5000
String Padding wordt niet ondersteund in Internet Explorer.
Firefox en Safari waren de eerste browsers met ondersteuning voor JavaScript-stringpadding:
Chrome 57 | Edge 15 | Firefox 48 | Safari 10 | Opera 44 |
Mar 2017 | Apr 2017 | Aug 2016 | Sep 2016 | Mar 2017 |
JavaScript-objectinvoeren
ECMAScript 2017 voegt een nieuwe Object.entries
methode toe aan objecten.
De methode Object.entries() retourneert een array van de sleutel/waarde-paren in een object:
Voorbeeld
const person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
Object.entries(person);
Object.entries() maakt het eenvoudig om objecten in lussen te gebruiken:
Voorbeeld
const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
text += fruit + ": " + value + "
";
}
Object.entries() maakt het ook eenvoudig om objecten naar kaarten te converteren:
Voorbeeld
const fruits = {Bananas:300, Oranges:200, Apples:500};
const myMap = new Map(Object.entries(fruits));
Chrome en Firefox waren de eerste browsers met ondersteuning voor
Object.entries
:
Chrome 47 | Edge 14 | Firefox 47 | Safari 10.1 | Opera 41 |
Jun 2016 | Aug 2016 | Jun 2016 | Mar 2017 | Oct 2016 |
JavaScript-objectwaarden
Object.values
zijn vergelijkbaar met Object.entries
, maar retourneert een matrix met één dimensie van de objectwaarden:
Voorbeeld
const person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
Object.values(person);
Firefox en Chrome waren de eerste browsers met ondersteuning voor
Object.values
:
Chrome 54 | Edge 14 | Firefox 47 | Safari 10.1 | Opera 41 |
Oct 2016 | Aug 2016 | Jun 2016 | Mar 2017 | Oct 2016 |
JavaScript-asynchrone functies
Wachten op een time-out
async function myDisplay() {
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Firefox en Chrome waren de eerste browsers met ondersteuning voor asynchrone JavaScript-functies:
Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
Dec 2016 | Apr 2017 | Mar 2017 | Sep 2017 | Dec 2016 |