JavaScript ES2019


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

JavaScript-Versionsnummern

Alte JS-Versionen werden nach Nummern benannt: ES5 (2009) und ES6 (2015).

Ab 2016 sind die Versionen nach Jahr benannt: ECMAScript 2016, 2017, 2018, 2019, ...

Neue Funktionen in ES2019

  • String.trimStart()

  • String.trimEnd()

  • Object.fromEntries

  • Optionale Fangbindung

  • Array.flat()

  • Array.flatMap()

  • Überarbeitetes Array.Sort()

  • JSON.stringify() überarbeitet

  • In Zeichenfolgenliteralen zulässige Trennzeichen

  • Überarbeitete Function.toString()

Warnung

Diese Funktionen sind relativ neu.

Ältere Browser benötigen möglicherweise einen alternativen Code (Polyfill)


JavaScript-String trimStart()

ES2019 hat die String-Methode trimStart() zu JavaScript hinzugefügt. <p>Die Methode trimStart() funktioniert wie trim(), entfernt jedoch Leerzeichen nur am Anfang von ein Faden.

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trimStart() Method</h2>

<p id="demo"></p>

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

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

Der JavaScript-String trimStart() wird seit Januar 2020 in allen modernen Browsern unterstützt:

Chrome 66 Edge 79 Firefox 61 Safari 12 Opera 50
Apr 2018 Jan 2020 Jun 2018 Sep 2018 May 2018

JavaScript-String trimEnd()

ES2019 hat die String-Methode trimEnd() zu JavaScript hinzugefügt. <p>Die Methode trimEnd() funktioniert wie trim(), entfernt jedoch Leerzeichen nur am Ende von ein Faden.

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trimEnd() Method</h2>

<p id="demo"></p>

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

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

Der JavaScript-String trimEnd() wird seit Januar 2020 in allen modernen Browsern unterstützt:

Chrome 66 Edge 79 Firefox 61 Safari 12 Opera 50
Apr 2018 Jan 2020 Jun 2018 Sep 2018 May 2018

JavaScript-Objekt fromEntries()

ES2019 hat die Objektmethode fromEntries() zu JavaScript hinzugefügt. <p>Die Methode fromEntries() erstellt ein Objekt aus iterierbaren Schlüssel-/Wertpaaren.

Beispiel

const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];

const myObj = Object.fromEntries(fruits);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Objects</h1>
<h2>The fromEntries() Method</h2>

<p>The number of pears are:</p>
<p id="demo"></p>

<script>
const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];

const myObj = Object.fromEntries(fruits);
document.getElementById("demo").innerHTML = myObj.pears;
</script>

</body>
</html>

Das JavaScript-Objekt fromEntries() wird seit Januar 2020 in allen modernen Browsern unterstützt:

Chrome 73 Edge 79 Firefox 63 Safari 12.1 Opera 60
Mar 2019 Jan 2020 Oct 2018 Mar 2019 Apr 2019


Optionale Catch-Bindung

Ab ES2019 können Sie den Catch-Parameter weglassen, wenn Sie ihn nicht benötigen:.

Beispiel

Vor 2019:

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

Nach 2019:

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

Die optionale Catch-Bindung wird seit Januar 2020 in allen modernen Browsern unterstützt:

Chrome 66 Edge 79 Firefox 58 Safari 11.1 Opera 53
Apr 2018 Jan 2020 Jan 2018 Mar 2018 May 2018

JavaScript-Array flat()

ES2019 hat JavaScript die Methode Array flat() hinzugefügt.

Die Methode flat() erstellt ein neues Array, indem sie ein verschachteltes Array reduziert.

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flat() Method</h2>

<p id="demo"></p>

<script>
const myArr = [[1,2],[3,4],[5,6]];

const newArr = myArr.flat();
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

Das JavaScript-Array flat() wird seit Januar 2020 in allen modernen Browsern unterstützt:

Chrome 69 Edge 79 Firefox 62 Safari 12 Opera 56
Sep 2018 Jan 2020 Sep 2018 Sep 2018 Sep 2018

JavaScript-Array flatMap()

ES2019 hat die Array-Methode flatMap() zu JavaScript hinzugefügt.

Die Methode flatMap() bildet zunächst alle Elemente eines Arrays ab und erstellt dann ein neues Array durch Reduzieren des Arrays.

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flatMap() Method</h2>

<p id="demo"></p>

<script>
const myArr = [1, 2, 3, 4, 5,6];
const newArr = myArr.flatMap((x) => x * 2);
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

Stabiles Array sort()

ES2019 überarbeitet die Array sort()-Methode.

Vor 2019 erlaubte die Spezifikation instabile Sortieralgorithmen wie QuickSort.

Nach ES2019 müssen Browser einen stabilen Sortieralgorithmus verwenden:

Beim Sortieren von Elementen nach einem Wert müssen die Elemente ihre relative Position zu anderen Elementen mit demselben Wert beibehalten.

Beispiel

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 }
];

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Stable Sort</h1>

<p>From ES2019, browsers must use a stable sorting algorithm.</p>
<p>When sorting elements on a key, the elements must keep their relative position to other objects with the same key.</p>

<p id="demo"></p>

<script>

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 },
  {name:"X08",price:120 },
  {name:"X09",price:120 },
  {name:"X10",price:120 },
  {name:"X11",price:120 },
  {name:"X12",price:130 },
  {name:"X13",price:130 },
  {name:"X14",price:130 },
  {name:"X15",price:130 },
  {name:"X16",price:140 },
  {name:"X17",price:140 },
  {name:"X18",price:140 },
  {name:"X19",price:140 }
];

myArr.sort( (p1, p2) => {
  if (p1.price < p2.price) return -1;
  if (p1.price > p2.price) return 1;
  return 0;
});

let txt = "";
myArr.forEach(myFunction);

function myFunction(value) {
  txt += value.name + " " + value.price + "<br>"; 
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

Im obigen Beispiel darf das Ergebnis bei der Sortierung nach Preis nicht mit den Namen in einer anderen relativen Position wie z. B. ausgegeben werden so was:

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

JSON.stringify() überarbeitet

ES2019 überarbeitet die JSON-Methode stringify().

Vor 2019 konnte JSON keine mit\codierten Zeichen in Strings umwandeln.

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript JSON</h1>
<h2>Revised stringify()</h2>

<p id="demo"></p>

<script>
let text = JSON.stringify("\u26D4");
document.getElementById("demo").innerHTML = JSON.parse(text);
</script>

</body>
</html>

Vor ES2019: Verwendung von JSON.stringify()JSON für UTF-8-Codepunkte (U+D800 bis U+DFFF) zurückgegebene fehlerhafte Unicode-Zeichen wie ����.

Nach dieser Überarbeitung werden Zeichenfolgen mit UTF-8-Codepunkten sicher mit JSON.stringify() konvertiert. und zurück zum Original mit JSON.parse().


Trennzeichensymbole

<p>Zeilentrennzeichen und Absatztrennsymbole (\u2028 und \u2029) sind jetzt in Zeichenfolgenliteralen zulässig.

Vor 2019 wurden diese als Zeilenabschlusszeichen behandelt und führten zu Fehlerausnahmen:

Beispiel

// This is valid in ES2019:
let text = "\u2028";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>

<p>From ES2019, line and paragraph separator symbols (\u2028 and \u2029) are allowed in string literals:</p>

<p id="demo"></p>

<script>
let text = "\u2028";
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Notiz

Jetzt gelten für JavaScript und JSON die gleichen Regeln.

Vor ES2019:

text=JSON.parse('"\u2028"') würde nach '' analysieren.

text='"\u2028"' würde einen Syntaxfehler ergeben.


Überarbeitete Funktion toString()

ES2019 überarbeitet die Function toString()-Methode.

Die Methode toString() gibt einen String zurück, der den Quellcode einer Funktion darstellt.

Ab 2019 muss toString() den Quellcode der Funktion inklusive Kommentaren zurückgeben, Leerzeichen und Syntaxdetails.

Vor 2019 gaben verschiedene Browser unterschiedliche Varianten der Funktion zurück (z. B. ohne Kommentare und Leerzeichen). Ab 2019 sollte die Funktion genau so zurückgegeben werden, wie sie geschrieben ist.

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The toString() Method</h2>

<p>The toString() method returns the function as a string:</p>

<p id="demo"></p>

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>

</body>
</html>