ECMAScript 2019

JavaScript versienummer

Oude JS-versies worden genummerd: ES5 (2009) en ES6 (2015).

Sinds 2016 worden versies per jaar genoemd: ECMAScript 2016, 2017, 2018, 2019, ...

Nieuwe kenmerken in ES2019:

Waarschuwing

Deze kenmerken zijn relatief nieuw.

Oudere browsers kunnen mogelijk alternatieve code (Polyfill) nodig hebben

JavaScript-stringsmethode trimStart()

ES2019 heeft nieuwe methoden toegevoegd aan JavaScript String trimStart().

trimStart() Het werkingssysteem van de trim() Vergelijkbaar, maar verwijder alleen spaties aan het begin van de string.

Voorbeeld

let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

Probeer het zelf

Sinds januari 2020 ondersteunen alle moderne browsers JavaScript String trimStart():

Chrome Edge Firefox Safari Opera
Chrome 66 Edge 79 Firefox 61 Safari 12 Opera 50
April 2018 Januari 2020 Juni 2018 September 2018 Mei 2018

JavaScript-stringsmethode trimEnd()

ES2019 voegde toe aan JavaScript trimEnd() stringmethode.

trimEnd() Het werkingssysteem van de trim() Vergelijkbaar, maar verwijder alleen spaties aan het einde van de string.

Voorbeeld

let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

Probeer het zelf

Sinds januari 2020 ondersteunen alle moderne browsers JavaScript String trimEnd():

Chrome Edge Firefox Safari Opera
Chrome 66 Edge 79 Firefox 61 Safari 12 Opera 50
April 2018 Januari 2020 Juni 2018 September 2018 Mei 2018

JavaScript-objectmethode fromEntries()

ES2019 voegde toe aan JavaScript fromEntries() Objectmethode.

fromEntries() De methode maakt een object van iterabele key/value paren.

Voorbeeld

const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];
const myObj = Object.fromEntries(fruits);

Probeer het zelf

Sinds januari 2020 ondersteunen alle moderne browsers JavaScript Object fromEntries():

Chrome Edge Firefox Safari Opera
Chrome 73 Edge 79 Firefox 63 Safari 12.1 Opera 60
Maart 2019 Januari 2020 Oktober 2018 Maart 2019 April 2019

Optionele catch-binding

Vanaf ES2019 af aan kan de catch parameter worden weggelaten als deze niet nodig is:

Voorbeeld

Voor 2019:

try {
// code
} catch (err) {
// code
}

Na 2019:

try {
// code
} catch {
// code
}

Sinds januari 2020 ondersteunen alle moderne browsers optionele catch-binding:

Chrome Edge Firefox Safari Opera
Chrome 66 Edge 79 Firefox 58 Safari 11.1 Opera 53
April 2018 Januari 2020 Januari 2018 Maart 2018 Mei 2018

JavaScript-arraymethode flat()

ES2019 voegde toe aan JavaScript flat() Arraymethode.

flat() De methode maakt een nieuw array door de geneste array uit te platten.

Voorbeeld

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();

Probeer het zelf

Sinds januari 2020 ondersteunen alle moderne browsers JavaScript Array flat():

Chrome Edge Firefox Safari Opera
Chrome 69 Edge 79 Firefox 62 Safari 12 Opera 56
September 2018 Januari 2020 September 2018 September 2018 September 2018

JavaScript-arraymethode flatMap()

ES2019 voegde toe aan JavaScript flatMap() Arraymethode.

flatMap() De methode kaart eerst alle elementen van het array toe, en maakt vervolgens een nieuw array door het array te uit te platten.

Voorbeeld

const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);

Probeer het zelf

Stabiele arraymethode sort()

ES2019 Herzienvan de Array sort() methode.

Voor 2019 stond de specificatie een onstabiele sorteer-algoritme toe, zoals QuickSort.

Na ES2019 moeten browsers een stabiele sorteer-algoritme gebruiken:

Wanneer elementen worden gesorteerd op basis van een waarde, moeten deze elementen hun relatieve positie behouden ten opzichte van andere elementen met dezelfde waarde.

Voorbeeld

const myArr = [
  {name:"X00",price:100 },
  {name:"X01",price:100 },
  {name:"X02",price:100 },
  {name:"X03",price:100 },
  {name:"X04",price:110 },
  {name:"X05",price:110 },
  {name:"X06",price:110 },
  {name:"X07",price:110 }
];

Probeer het zelf

In het bovenstaande voorbeeld mogen de resultaten niet in andere relatieve posities verschijnen wanneer ze volgens prijs worden gesorteerd, zoals hieronder:

X01 100
X03 100
X00 100
X03 100
X05 110
X04 110
X06 110
X07 110

Herziende JSON.stringify()

ES2019 Herzienvan de JSON stringify() methode.

Voor 2019 kon JSON geen karakters met \-encoding stringificeren.

Voorbeeld

let text = JSON.stringify("\u26D4");

Probeer het zelf

Voor ES2019 zou JSON.stringify() op codepunten (U+D800 tot U+DFFF) in UTF-8 retourneren als beschadigde Unicode-caractères, bijvoorbeeld ���.

Na deze revisie kunnen strings met UTF-8 codepunten (U+D800 tot U+DFFF) veilig worden geconverteerd met JSON.stringify() en worden hersteld naar de oorspronkelijke string met JSON.parse().

Scheidingstekens

Stringteksten mogen nu regel- en paragraafscheidingstekens gebruiken (\u2028 en \u2029)

Voor 2019 werden deze gezien als regelafsluiters en veroorzaakten fouten.

Voorbeeld

// Dit is in ES2019 geldig:
let text = "\u2028";

Probeer het zelf

Let op

Nu hebben JavaScript en JSON dezelfde regels.

Voor ES2019:

text = JSON.parse('"\u2028"') parseert naar ''.

text = '"\u2028"' geeftGrammaticale fout.

Herziende Function toString()

ES2019 Herziende Function toString() methode.

De toString()-methode retourneert een string die de broncode van de functie vertegenwoordigt.

Vanaf 2019 moet toString() de broncode van de functie retourneren, inclusief commentaar, spaties en grammaticale details.

Voor 2019 retourneerden verschillende browsers verschillende functievarianten (bijvoorbeeld zonder commentaar en spaties). Vanaf 2019 zou de functie volledig moeten worden geretourneerd zoals geschreven.

Voorbeeld

function myFunction(p1, p2) {
  return p1 * p2;
}

Probeer het zelf