JavaScript ECMAScript 2020

Πίνακας περιεχομένων

Εμφάνιση πίνακα περιεχομένων

Αριθμοί έκδοσης JavaScript

Οι παλιές εκδόσεις JS ονομάζονται με αριθμούς: ES5 (2009) και ES6 (2015).

Από το 2016, οι εκδόσεις ονομάζονται ανά έτος: ECMAScript 2016, 2017, 2018, 2019, ...

Νέες δυνατότητες στο ES2020

BigInt
Συμβολοσειρά matchAll()
The Nullish Coalescing Operator (??)
Ο προαιρετικός χειριστής αλυσίδων (?.)
Logical AND Assignment Operator (&&=)
Λογική ανάθεση Ή (||=)
Nullish Coalescing Assignment (??=)
Promise allSettled():
style="word-wrap: break-word;">Promise.allSettled([prom1,prom2,prom3]). στη συνέχεια {}
Δυναμική εισαγωγή

Προειδοποίηση

Αυτά τα χαρακτηριστικά είναι σχετικά νέα.

Τα παλαιότερα προγράμματα περιήγησης ενδέχεται να χρειάζονται εναλλακτικό κωδικό (Polyfill)

JavaScript BigInt

Οι μεταβλητές JavaScript BigInt χρησιμοποιούνται για την αποθήκευση μεγάλων ακέραιων τιμών που είναι πολύ μεγάλα για να αντιπροσωπεύονται από έναν κανονικό Αριθμό JavaScript.

Οι ακέραιοι JavaScript είναι ακριβείς μόνο μέχρι περίπου 15 ψηφία.

Παράδειγμα ακέραιου αριθμού

let x = 999999999999999;
let y = 9999999999999999; // too big

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Integer Precision</h2>

<p>Integers (numbers without a period or exponent notation) are accurate up to 15 digits:</p>

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

<script>
let x = 999999999999999;
let y = 9999999999999999;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>

Παράδειγμα BigInt

let x = 9999999999999999;
let y = 9999999999999999n;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Integer and BigInt</h2>

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

<script>
let x = 9999999999999999;
let y = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>

Για να δημιουργήσετε ένα BigInt, προσθέστε n στο τέλος ενός ακέραιου αριθμού ή κλήσης BigInt():

Παράδειγμα

let x = 1234567890123456789012345n;
let y = BigInt(1234567890123456789012345)

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Create a BigInt</h2>

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

<script>
let x = 123456789012345678901234567890n;
let y = BigInt("123456789012345678901234567890");
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>

Ο τύπος JavaScript a BigInt είναι "bigint":

Παράδειγμα

let x = BigInt(999999999999999);
let type = typeof x;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>BigInt typeof</h2>

<p>The typeof a BigInt is:</p>
<p id="demo"></p>

<script>
let x = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = typeof x;
</script>

</body>
</html>

Το BigInt υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης από τον Σεπτέμβριο του 2020:


Chrome 67	Edge 79	Firefox 68	Safari 14	Opera 54
May 2018	Jan 2020	Jul 2019	Sep 2020	Jun 2018

Συμβολοσειρά JavaScript matchAll()

Πριν από το ES2020 δεν υπήρχε μέθοδος συμβολοσειράς που θα μπορούσε να χρησιμοποιηθεί για την αναζήτηση όλων των εμφανίσεων μιας χορδής σε μια χορδή.

Παράδειγμα

const iterator = text.matchAll("Cats");

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

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

<p>ES2020 intoduced the string method matchAll().</p>

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

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Εάν η παράμετρος είναι κανονική έκφραση, η καθολική σημαία (g) πρέπει να οριστεί, διαφορετικά εμφανίζεται ένα TypeError.

Παράδειγμα

const iterator = text.matchAll(/Cats/g);

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

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

<p>ES2020 intoduced the string method matchAll().</p>

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

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/g);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Εάν θέλετε να κάνετε αναζήτηση χωρίς διάκριση πεζών-κεφαλαίων, πρέπει να οριστεί η σημαία (i) που δεν είναι ευαίσθητη:

Παράδειγμα

const iterator = text.matchAll(/Cats/gi);

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

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

<p>ES2020 intoduced the string method matchAll().</p>

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

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Σημείωση

Το ES2021 εισήγαγε τη μέθοδο string replaceAll().

The Nullish Coalescing Operator (??)

Ο τελεστής ?? επιστρέφει το πρώτο όρισμα εάν δεν είναι μηδενικό (null ή ακαθόριστο).

Διαφορετικά επιστρέφει το δεύτερο.

Παράδειγμα

let name = null;
let text = "missing";
let result = name ?? text;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ?? Operator</h2>
<p>The ?? operator returns the first argument if it is not nullish (null or undefined). Otherwise it returns the second.</p>

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

<script>
let name = null;
let text = "missing";
let result = name ?? text;
document.getElementById("demo").innerHTML = "The name is " + result; 
</script>

</body>
</html>

Ο τελεστής nullish υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης από τον Μάρτιο του 2020:


Chrome 80	Edge 80	Firefox 72	Safari 13.1	Opera 67
Feb 2020	Feb 2020	Jan 2020	Mar 2020	Mar 2020

Ο προαιρετικός χειριστής αλυσίδων (?.)

Ο Προαιρετικός χειριστής αλυσίδας επιστρέφει ακαθόριστο εάν ένα αντικείμενο είναι απροσδιόριστο ή null (αντί να παρουσιάζεται σφάλμα).

Παράδειγμα

const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ?. Operator</h2>
<p>The ?. operator returns undefined if an object is undefined or null (instead of throwing an error).</p>

<p>Car name is:</p>
<p id="demo"></p>

<script>
const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;
document.getElementById("demo").innerHTML = name;
</script>

</body>
</html>

Ο τελεστής ?.= υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης από τον Μάρτιο του 2020:


Chrome 80	Edge 80	Firefox 74	Safari 13.1	Opera 67
Feb 2020	Feb 2020	Mar 2020	Mar 2020	Mar 2020

Ο χειριστής &&=

Ο Logical AND Assignment Operator χρησιμοποιείται μεταξύ δύο τιμών.

Εάν η πρώτη τιμή είναι true, εκχωρείται η δεύτερη τιμή.

Παράδειγμα Λογικής ΚΑΙ Εργασίας

let x = 10;
x &&= 5;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Logical AND Assignment</h2>
<h3>The &amp;&amp;= Operator</h3>
<p>If the first value is true, the second value is assigned.</p>

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

<script>
let x = 100;
x &&= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

Ο τελεστής &&= υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης από τον Σεπτέμβριο του 2020:


Chrome 85	Edge 85	Firefox 79	Safari 14	Opera 71
Aug 2020	Aug 2020	Mar 2020	Sep 2020	Sep 2020

Ο ||= Χειριστής

Ο Logical OR Assignment Operator χρησιμοποιείται μεταξύ δύο τιμών.

Εάν η πρώτη τιμή είναι false, εκχωρείται η δεύτερη τιμή.

Παράδειγμα λογικού Ή ανάθεσης

let x = 10;
x ||= 5;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Logical OR Assignment</h2>
<h3>The ||= Operator</h3>

<p>If the first value is false, the second value is assigned:</p>
<p id="demo"></p>

<script>
let x = undefined;
x ||= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

Ο τελεστής ||= υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης από τον Σεπτέμβριο του 2020:


Chrome 85	Edge 85	Firefox 79	Safari 14	Opera 71
Aug 2020	Aug 2020	Mar 2020	Sep 2020	Sep 2020

Ο ??= Χειριστής

Ο Χειριστής εκχώρησης μηδενικής συγχώνευσης χρησιμοποιείται μεταξύ δύο τιμών.

Εάν η πρώτη τιμή είναι απροσδιόριστη ή null, εκχωρείται η δεύτερη τιμή.

Παράδειγμα Ανάθεσης Nullish Coalescing

let x;
x ??= 5;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>The ??= Operator</h2>
<p>The ??= operator is used between two values. If the first value is undefined or null, the second value is assigned.</p>

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

<script>
let x;
document.getElementById("demo").innerHTML = x ??= 5; 
</script>

</body>
</html>

Ο τελεστής ??= υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης από τον Σεπτέμβριο του 2020:


Chrome 85	Edge 85	Firefox 79	Safari 14	Opera 71
Aug 2020	Aug 2020	Mar 2020	Sep 2020	Sep 2020