JavaScript ES2019


Sisällysluettelo

    Näytä sisällysluettelo

JavaScript-versionumerot

Vanhat JS-versiot on nimetty numeroilla: ES5 (2009) ja ES6 (2015).

Vuodesta 2016 alkaen versiot on nimetty vuosien mukaan: ECMAScript 2016, 2017, 2018, 2019, ...

Uusia ominaisuuksia ES2019:ssä

  • String.trimStart()

  • String.trimEnd()

  • Object.fromEntries

  • Valinnainen kiinnityssidonta

  • Array.flat()

  • Array.flatMap()

  • Tarkistettu Array.Sort()

  • Päivitetty JSON.stringify()

  • Erotinsymbolit sallittu merkkijonokirjaimessa

  • Tarkistettu Function.toString()

Varoitus

Nämä ominaisuudet ovat suhteellisen uusia.

Vanhemmat selaimet saattavat tarvita vaihtoehtoisen koodin (Polyfill)


JavaScript-merkkijono trimStart()

ES2019 lisäsi JavaScriptiin merkkijonomenetelmän trimStart(). <p>trimStart()-menetelmä toimii kuten trim(), mutta poistaa välilyönnit vain nauha.

Esimerkki

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

Kokeile itse →

<!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-merkkijonoa trimStart() on tuettu kaikissa nykyaikaisissa selaimissa tammikuusta 2020 lähtien:

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

JavaScript-merkkijono trimEnd()

ES2019 lisäsi JavaScriptiin merkkijonomenetelmän trimEnd(). <p>trimEnd()-menetelmä toimii kuten trim(), mutta poistaa välilyönnit vain nauha.

Esimerkki

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

Kokeile itse →

<!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-merkkijonoa trimEnd() on tuettu kaikissa nykyaikaisissa selaimissa tammikuusta 2020 lähtien:

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

JavaScript-objekti fromEntries()

ES2019 lisäsi Object-menetelmän fromEntries() JavaScriptiin. <p>fromEntries()-menetelmä luo objektin iteroitavista avain/arvo-pareista.

Esimerkki

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

const myObj = Object.fromEntries(fruits);

Kokeile itse →

<!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-objektia fromEntries() on tuettu kaikissa nykyaikaisissa selaimissa tammikuusta 2020 lähtien:

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


Valinnainen kiinnitys Sidonta

ES2019:stä voit jättää catch-parametrin pois, jos et tarvitse sitä:.

Esimerkki

Ennen vuotta 2019:

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

Vuoden 2019 jälkeen:

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

Valinnainen catch-sidonta on tuettu kaikissa nykyaikaisissa selaimissa tammikuusta 2020 lähtien:

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

JavaScript-taulukko tasainen()

ES2019 lisäsi taulukon flat()-menetelmän JavaScriptiin.

flat()-menetelmä luo uuden taulukon tasoittamalla sisäkkäisen taulukon.

Esimerkki

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

Kokeile itse →

<!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() on tuettu kaikissa nykyaikaisissa selaimissa tammikuusta 2020 lähtien:

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

JavaScript Array flatMap()

ES2019 lisäsi Array flatMap()-menetelmän JavaScriptiin.

flatMap()-menetelmä kartoittaa ensin kaikki taulukon elementit ja luo sitten uuden taulukon tasoittamalla taulukon.

Esimerkki

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

Kokeile itse →

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

Vakaa array sort()

ES2019 tarkisti Array sort()-menetelmän.

Ennen vuotta 2019 spesifikaatio salli epävakaat lajittelualgoritmit, kuten QuickSort.

ES2019:n jälkeen selaimien on käytettävä vakaata lajittelualgoritmia:

Kun lajitellaan elementtejä arvon perusteella, elementtien on säilytettävä suhteellinen asemansa muihin saman arvon omaaviin elementteihin nähden.

Esimerkki

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

Kokeile itse →

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

Yllä olevassa esimerkissä hinnan mukaan lajittelussa tulos ei saa tulla ulos nimien kanssa toisessa suhteellisessa asemassa, kuten kuten tämä:

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

Päivitetty JSON.stringify()

ES2019 tarkisti JSON-menetelmän stringify().

Ennen vuotta 2019 JSON ei voinut joustaa \-koodattuja merkkejä.

Esimerkki

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

Kokeile itse →

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

Ennen ES2019:tä JSON.stringify()JSON-käytöllä UTF-8-koodipisteissä (U+D800 - U+DFFF) palautti rikkinäisiä Unicode-merkkejä, kuten ���.

Tämän version jälkeen merkkijonot, joissa on UTF-8-koodipisteitä, muunnetaan turvallisesti JSON.stringify()-komennolla, ja takaisin alkuperäiseen komennolla JSON.parse().


Erotinsymbolit

<p>Rivi- ja kappaleerotinsymbolit (\u2028 ja \u2029) ovat nyt sallittuja merkkijonoliteraaaleissa.

Ennen vuotta 2019 näitä käsiteltiin linjapäätteinä ja ne johtivat virhepoikkeuksiin:

Esimerkki

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

Kokeile itse →

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

Huomautus

Nyt JavaScriptillä ja JSONilla on samat säännöt.

Ennen ES2019:

text=JSON.parse('"\u2028"') jäsentäisi muotoon ''.

text='"\u2028"' antaisi syntaksivirheen.


Tarkistettu funktio toString()

ES2019 tarkisti funktion toString()-menetelmän.

Metodi toString() palauttaa merkkijonon, joka edustaa funktion lähdekoodia.

Vuodesta 2019 alkaen toString():n on palautettava funktion lähdekoodi, mukaan lukien kommentit, välilyönnit ja syntaksitiedot.

Ennen 2019 eri selaimet palauttivat toiminnon eri muunnelmia (kuten ilman kommentteja ja välilyöntejä). Vuodesta 2019 alkaen funktio tulee palauttaa täsmälleen sellaisena kuin se on kirjoitettu.

Esimerkki

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

Kokeile itse →

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