JavaScript ES2019

Obsah

    Zobrazit obsah

Čísla verzí JavaScriptu

Staré verze JS jsou pojmenovány podle čísel: ES5 (2009) a ES6 (2015).

Od roku 2016 jsou verze pojmenovány podle roku: ECMAScript 2016, 2017, 2018, 2019, ...

Nové funkce v ES2019

  • String.trimStart()

  • String.trimEnd()

  • Object.fromEntries

  • Volitelné záchytné vázání

  • Array.flat()

  • Array.flatMap()

  • Revidované Array.Sort()

  • Upravený JSON.stringify()

  • Oddělovací symboly jsou povoleny v řetězcových písmenech

  • Revidovaná funkce.toString()

Varování

Tyto funkce jsou relativně nové.

Starší prohlížeče mohou potřebovat alternativní kód (Polyfill)

JavaScript String trimStart()

ES2019 přidal do JavaScriptu metodu String trimStart(). <p>Metoda trimStart() funguje jako trim(), ale odstraňuje mezery pouze na začátku řetězec.

Příklad

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

Zkuste to sami →

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

Řetězec JavaScript trimStart() je podporován ve všech moderních prohlížečích od ledna 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 přidal do JavaScriptu metodu String trimEnd(). <p>Metoda trimEnd() funguje jako trim(), ale odstraňuje mezery pouze na konci řetězec.

Příklad

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

Zkuste to sami →

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

Řetězec JavaScript trimEnd() je podporován ve všech moderních prohlížečích od ledna 2020:

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

Objekt JavaScript fromEntries()

ES2019 přidal do JavaScriptu metodu Object fromEntries(). <p>Metoda fromEntries() vytvoří objekt z iterovatelných párů klíč/hodnota.

Příklad

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

const myObj = Object.fromEntries(fruits);

Zkuste to sami →

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

Objekt JavaScript fromEntries() je podporován ve všech moderních prohlížečích od ledna 2020:

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

Volitelný záchyt Vázání

Z ES2019 můžete vynechat parametr catch, pokud jej nepotřebujete:.

Příklad

Před rokem 2019:

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

Po roce 2019:

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

Volitelná vazba catch je podporována ve všech moderních prohlížečích od ledna 2020:

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 přidal do JavaScriptu metodu Array flat().

Metoda flat() vytvoří nové pole sloučením vnořeného pole.

Příklad

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

Zkuste to sami →

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

Pole JavaScript flat() je podporováno ve všech moderních prohlížečích od ledna 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 přidal do JavaScriptu metodu Array flatMap().

Metoda flatMap() nejprve mapuje všechny prvky pole a poté vytvoří nové pole sloučením pole.

Příklad

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

Zkuste to sami →

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

Stable Array sort()

ES2019 revidoval metodu Array sort().

Před rokem 2019 specifikace umožňovala nestabilní třídicí algoritmy, jako je QuickSort.

Po ES2019 musí prohlížeče používat stabilní algoritmus řazení:

Při řazení prvků podle hodnoty musí prvky zachovat svou relativní polohu vůči ostatním prvkům se stejnou hodnotou.

Příklad

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

Zkuste to sami →

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

Ve výše uvedeném příkladu při řazení podle ceny není dovoleno, aby výsledek vyšel se jmény v jiné relativní pozici, jako je takhle:

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

Upravený JSON.stringify()

ES2019 revidoval metodu stringify() JSON.

Před rokem 2019 JSON nemohl stringify znak zakódovaný pomocí \.

Příklad

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

Zkuste to sami →

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

Před ES2019 pomocí JSON.stringify()JSON v bodech kódu UTF-8 (U+D800 až U+DFFF) vrátil poškozené znaky Unicode jako ���.

Po této revizi se řetězce s kódovými body UTF-8 bezpečně převedou pomocí JSON.stringify(), a zpět k originálu pomocí JSON.parse().

Symboly oddělovačů

<p>V řetězcových literálech jsou nyní povoleny oddělovače řádků a symboly oddělovače odstavců (\u2028 a \u2029).

Před rokem 2019 se s nimi zacházelo jako s ukončovacími linkami a výsledkem byly výjimky z chyb:

Příklad

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

Zkuste to sami →

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

Poznámka

Nyní mají JavaScript a JSON stejná pravidla.

Před ES2019:

text=JSON.parse('"\u2028"') by analyzoval na ''.

text='"\u2028"' by způsobil chybu syntaxe.

Revidovaná funkce toString()

ES2019 revidoval metodu Function toString().

Metoda toString() vrací řetězec představující zdrojový kód funkce.

Od roku 2019 musí toString() vracet zdrojový kód funkce včetně komentářů, mezery a podrobnosti o syntaxi.

Před rokem 2019 různé prohlížeče vracely různé varianty funkce (například bez komentářů a mezer). Od roku 2019 by se funkce měla vrátit přesně tak, jak je napsána.

Příklad

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

Zkuste to sami →

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