JavaScript ES2019

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

JavaScript verziószámok

A régi JS-verziók elnevezése számok szerint történik: ES5 (2009) és ES6 (2015).

2016-tól a verziók évenként vannak elnevezve: ECMAScript 2016, 2017, 2018, 2019, ...

Új funkciók az ES2019-ben

  • String.trimStart()

  • String.trimEnd()

  • Object.fromEntries

  • Választható fogáskötés

  • Array.flat()

  • Array.flatMap()

  • Átdolgozott Array.Sort()

  • Átdolgozott JSON.stringify()

  • Az elválasztó szimbólumok megengedettek a karakterláncokban

  • Átdolgozott Function.toString()

Figyelem

Ezek a funkciók viszonylag újak.

A régebbi böngészőknek alternatív kódra lehet szükségük (Polyfill)

JavaScript karakterlánc trimStart()

Az ES2019 hozzáadta a trimStart() karakterlánc metódust a JavaScripthez. <p>A trimStart() metódus úgy működik, mint a trim(), de csak az elejétől távolítja el a szóközt. húr.

Példa

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

Próbálja ki Ön is →

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

A trimStart() JavaScript-karakterláncot 2020 januárja óta minden modern böngésző támogatja:

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

JavaScript karakterlánc trimEnd()

Az ES2019 hozzáadta a trimEnd() karakterlánc metódust a JavaScripthez. <p>A trimEnd() metódus úgy működik, mint a trim(), de csak a szóközt távolítja el a végéről. húr.

Példa

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

Próbálja ki Ön is →

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

A trimEnd() JavaScript-karakterláncot 2020 januárja óta minden modern böngésző támogatja:

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

JavaScript objektum fromEntries()

Az ES2019 hozzáadta a ofEntries() objektum metódust a JavaScripthez. <p>A fromEntries() metódus iterálható kulcs/érték párokból objektumot hoz létre.

Példa

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

const myObj = Object.fromEntries(fruits);

Próbálja ki Ön is →

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

A JavaScript objektum fromEntries() 2020 januárja óta minden modern böngészőben támogatott:

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

Opcionális fogás Kötés

Az ES2019-ből elhagyhatja a catch paramétert, ha nincs rá szüksége:.

Példa

2019 előtt:

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

2019 után:

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

Az opcionális fogáskötés 2020 januárja óta minden modern böngészőben támogatott:

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

JavaScript tömb lapos()

Az ES2019 hozzáadta az Array flat() metódust a JavaScripthez.

A flat() metódus egy beágyazott tömb egyesítésével új tömböt hoz létre.

Példa

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

Próbálja ki Ön is →

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

A JavaScript-tömb flat() 2020 januárja óta minden modern böngészőben támogatott:

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

JavaScript tömb flatMap()

Az ES2019 hozzáadta az Array flatMap() metódust a JavaScripthez.

A flatMap() metódus először leképezi egy tömb összes elemét majd a tömb simításával új tömböt hoz létre.

Példa

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

Próbálja ki Ön is →

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

Stabil tömb rendezés()

Az ES2019 felülvizsgálta az Array sort() metódust.

2019 előtt a specifikáció lehetővé tette az olyan instabil rendezési algoritmusokat, mint a QuickSort.

Az ES2019 után a böngészőknek stabil rendezési algoritmust kell használniuk:

Amikor egy érték alapján rendezi az elemeket, az elemeknek meg kell tartaniuk relatív pozíciójukat a többi azonos értékű elemhez képest.

Példa

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

Próbálja ki Ön is →

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

A fenti példában az ár szerinti rendezésnél az eredmény nem jelenhet meg más relatív pozícióban lévő nevekkel, mint pl. mint ez:

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

Átdolgozott JSON.stringify()

Az ES2019 felülvizsgálta a JSON stringify() metódust.

2019 előtt a JSON nem tudta lekarcolni a\kóddal kódolt karaktereket.

Példa

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

Próbálja ki Ön is →

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

Az ES2019 előtt a JSON.stringify()JSON használatával UTF-8 kódpontokon (U+D800-tól U+DFFF-ig) törött Unicode karaktereket adott vissza, például ���.

A felülvizsgálat után az UTF-8 kódpontokkal rendelkező karakterláncok biztonságosan konvertálódnak a JSON.stringify() segítségével, és vissza az eredetihez a JSON.parse() használatával.

Elválasztó szimbólumok

<p>A sorelválasztók és a bekezdéselválasztó szimbólumok (\u2028 és \u2029) mostantól engedélyezettek a karakterlánc-literálokban.

2019 előtt ezeket vonallezáróként kezelték, és hibakivételeket eredményeztek:

Példa

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

Próbálja ki Ön is →

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

jegyzet

Most a JavaScript és a JSON azonos szabályokkal rendelkezik.

ES2019 előtt:

text=A JSON.parse('"\u2028"') a következőre elemezné: ".

text='"\u2028"' szintaktikai hibát adna.

Átdolgozott függvény toString()

Az ES2019 felülvizsgálta a függvény toString() metódusát.

A toString() metódus egy függvény forráskódját reprezentáló karakterláncot ad vissza.

2019-től a toString()-nek vissza kell adnia a függvény forráskódját, beleértve a megjegyzéseket, szóközök és szintaktikai részletek.

2019 előtt a különböző böngészők a funkció különböző változatait adták vissza (például megjegyzések és szóközök nélkül). 2019-től a függvényt pontosan úgy kell visszaadni, ahogyan meg van írva.

Példa

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

Próbálja ki Ön is →

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