JavaScript ES2019

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

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

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

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

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

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

String.trimStart()
String.trimEnd()
Αντικείμενο.fromEntries
Προαιρετικό δέσιμο αλιευμάτων
Array.flat()
Array.flatMap()
Αναθεωρημένο Array.Sort()
Αναθεωρημένο JSON.stringify()
Τα διαχωριστικά σύμβολα επιτρέπονται σε γράμματα συμβολοσειρών
Αναθεωρημένη Function.toString()

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

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

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

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

Το ES2019 πρόσθεσε τη μέθοδο String trimStart() στο JavaScript. <p>Η μέθοδος trimStart() λειτουργεί όπως trim(), αλλά αφαιρεί το κενό διάστημα μόνο από την αρχή του μια χορδή.

Παράδειγμα

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

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

<!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>

Το JavaScript String trimStart() υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης από τον Ιανουάριο του 2020:


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

JavaScript String trimEnd()

Το ES2019 πρόσθεσε τη μέθοδο String trimEnd() στο JavaScript. <p>Η μέθοδος trimEnd() λειτουργεί όπως trim(), αλλά αφαιρεί το κενό διάστημα μόνο από το τέλος του μια χορδή.

Παράδειγμα

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

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

<!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>

Το JavaScript String trimEnd() υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης από τον Ιανουάριο του 2020:


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

Αντικείμενο JavaScript fromEntries()

Το ES2019 πρόσθεσε τη μέθοδο Αντικειμένου fromEntries() στο JavaScript. <p>Η μέθοδος fromEntries() δημιουργεί ένα αντικείμενο από επαναληπτικά ζεύγη κλειδιών/τιμών.

Παράδειγμα

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

const myObj = Object.fromEntries(fruits);

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

<!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>

Το αντικείμενο JavaScript fromEntries() υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης από τον Ιανουάριο του 2020:


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

Προαιρετική δέσμευση αλιευμάτων

Από το ES2019 μπορείτε να παραλείψετε την παράμετρο catch εάν δεν τη χρειάζεστε:.

Παράδειγμα

Πριν το 2019:

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

Μετά το 2019:

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

Το προαιρετικό catch binding υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης από τον Ιανουάριο του 2020:


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

Πίνακας JavaScript flat()

Το ES2019 πρόσθεσε τη μέθοδο Array flat() στο JavaScript.

Η μέθοδος flat() δημιουργεί έναν νέο πίνακα ισοπεδώνοντας έναν ένθετο πίνακα.

Παράδειγμα

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

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

<!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>

Το JavaScript Array flat() υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης από τον Ιανουάριο του 2020:


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

JavaScript Array flatMap()

Το ES2019 πρόσθεσε τη μέθοδο Array flatMap() στο JavaScript.

Η μέθοδος flatMap() αντιστοιχίζει πρώτα όλα τα στοιχεία ενός πίνακα και στη συνέχεια δημιουργεί έναν νέο πίνακα ισοπεδώνοντας τον πίνακα.

Παράδειγμα

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

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

<!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>

Ταξινόμηση σταθερού πίνακα()

Το ES2019 αναθεώρησε τη μέθοδο Array sort().

Πριν από το 2019, η προδιαγραφή επέτρεπε ασταθείς αλγόριθμους ταξινόμησης όπως το QuickSort.

Μετά το ES2019, τα προγράμματα περιήγησης πρέπει να χρησιμοποιούν έναν σταθερό αλγόριθμο ταξινόμησης:

Κατά την ταξινόμηση στοιχείων σε μια τιμή, τα στοιχεία πρέπει να διατηρούν τη σχετική θέση τους με άλλα στοιχεία με την ίδια τιμή.

Παράδειγμα

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

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

<!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>

Στο παραπάνω παράδειγμα, κατά την ταξινόμηση βάσει τιμής, το αποτέλεσμα δεν επιτρέπεται να βγει με τα ονόματα σε άλλη σχετική θέση όπως σαν αυτό:

Αναθεωρημένο JSON.stringify()

Το ES2019 αναθεώρησε τη μέθοδο JSON stringify().

Πριν από το 2019, το JSON δεν μπορούσε να περιγράψει τον χαρακτήρα που κωδικοποιήθηκε με \.

Παράδειγμα

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

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

<!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>

Πριν από το ES2019, χρησιμοποιώντας JSON.stringify()JSON σε σημεία κωδικού UTF-8 (U+D800 έως U+DFFF) επέστρεψε σπασμένους χαρακτήρες Unicode όπως ��.

Μετά από αυτήν την αναθεώρηση, οι συμβολοσειρές με σημεία κώδικα UTF-8 μετατρέπονται με ασφάλεια με JSON.stringify(), και επιστρέψτε στο αρχικό χρησιμοποιώντας JSON.parse().

Σύμβολα διαχωρισμού

<p>Τα διαχωριστικά γραμμών και τα σύμβολα διαχωριστικών παραγράφων (\u2028 και \u2029) επιτρέπονται πλέον σε κυριολεκτικά συμβολοσειρές.

Πριν από το 2019, αυτά αντιμετωπίζονταν ως τερματιστές γραμμής και είχαν ως αποτέλεσμα εξαιρέσεις σφαλμάτων:

Παράδειγμα

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

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

<!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>

Σημείωση

Τώρα, το JavaScript και το JSON έχουν ίσους κανόνες.

Πριν από το ES2019:

text=JSON.parse('"\u2028"') θα αναλύσει σε ''.

text='"\u2028"' θα έδινε συντακτικό σφάλμα.

Αναθεωρημένη συνάρτηση toString()

Το ES2019 αναθεώρησε τη μέθοδο Function toString().

Η μέθοδος toString() επιστρέφει μια συμβολοσειρά που αντιπροσωπεύει τον πηγαίο κώδικα μιας συνάρτησης.

Από το 2019, η toString() πρέπει να επιστρέψει τον πηγαίο κώδικα της συνάρτησης συμπεριλαμβανομένων των σχολίων, κενά και συντακτικές λεπτομέρειες.

Πριν από το 2019, διαφορετικά προγράμματα περιήγησης επέστρεψαν διαφορετικές παραλλαγές της λειτουργίας (όπως χωρίς σχόλια και κενά). Από το 2019 η συνάρτηση θα πρέπει να επιστραφεί ακριβώς όπως είναι γραμμένη.

Παράδειγμα

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

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

<!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>