JavaScript ECMAScript 2017

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 ECMAScript 2017

Tato kapitola představuje nové funkce v ECMAScript 2017:

JavaScript String padding
Záznamy objektů JavaScript()
JavaScript Object values()
JavaScript je asynchronní a čeká
JavaScript Object.getOwnPropertyDescriptors

JavaScript String Padding

ECMAScript 2017 přidal do JavaScriptu dvě metody řetězců: padStart() a padEnd() pro podporu odsazení na začátku a na konci řetězce.

Příklady

let text = "5";
text = text.padStart(4,0);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

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

<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

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

<script>
let text = "5";
text = text.padStart(4,"0");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

let text = "5";
text = text.padEnd(4,0);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

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

<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

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

<script>
let text = "5";
text = text.padEnd(4,"0");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Od dubna 2017 je ve všech moderních prohlížečích podporováno odkládání řetězců JavaScriptu:


Chrome 57	Edge 15	Firefox 48	Safari 10	Opera 44
Mar 2017	Apr 2017	Aug 2016	Sep 2016	Mar 2017

Položky objektů JavaScript

ECMAScript 2017 přidal do objektů metodu Object.entries().

Object.entries() vrací pole párů klíč/hodnota v objektu:

Příklad

const person = {
  firstName : "John",
  lastName : "Doe",
  age : 50,
  eyeColor : "blue"
};

let text = Object.entries(person);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Methods</h2>

<p>The Object.entries() method returns an array of the key/value pairs in an object:</p>

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

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

let text = Object.entries(person);
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Object.entries() usnadňuje používání objektů v cyklech:

Příklad

const fruits = {Bananas:300, Oranges:200, Apples:500};

let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
  text += fruit + ": " + value + "<br>";
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Methods</h2>

<p>Object.entries() makes it simple to use objects in loops:</p>

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

<script>
const fruits = {Bananas:300, Oranges:200, Apples:500}; 

let text = "";
for (let [fruit, amount] of Object.entries(fruits)) {
  text += fruit + ": " + amount + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Object.entries() také usnadňuje převod objektů na mapy:

Příklad

const fruits = {Bananas:300, Oranges:200, Apples:500};

const myMap = new Map(Object.entries(fruits));

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Methods</h2>

<p>Object.entries() makes it simple to convert Object to Map:</p>

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

<script>
const fruits = {Bananas:300, Oranges:200, Apples:500}; 

const myMap = new Map(Object.entries(fruits));

document.getElementById("demo").innerHTML = myMap;
</script>

</body>
</html>

Object.entries() je podporována ve všech moderních prohlížečích od března 2017:


Chrome 47	Edge 14	Firefox 47	Safari 10.1	Opera 41
Jun 2016	Aug 2016	Jun 2016	Mar 2017	Oct 2016

Hodnoty objektů JavaScript

Object.values() jsou podobné Object.entries(), ale vrátí pole jedné dimenze hodnot objektu:

Příklad

const person = {
  firstName : "John",
  lastName : "Doe",
  age : 50,
  eyeColor : "blue"
};

let text = Object.values(person);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Methods</h2>

<p>The Object.values() method returns an array of values from an object:</p>

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

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

let text = Object.values(person)
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Object.values() je podporována ve všech moderních prohlížečích od března 2017:


Chrome 54	Edge 14	Firefox 47	Safari 10.1	Opera 41
Oct 2016	Aug 2016	Jun 2016	Mar 2017	Oct 2016

Asynchronní funkce JavaScriptu

Čekání na časový limit

async function myDisplay() {
  let myPromise = new Promise(function(myResolve,  myReject) {
    setTimeout(function() { myResolve("I love You !!"); }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

 myDisplay();

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
async function myDisplay() {
  let myPromise = new Promise(function(resolve) {
    setTimeout(function() {resolve("I love You !!");}, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();
</script>

</body>
</html>

Firefox a Chrome byly první prohlížeče s podporou asynchronních funkcí JavaScriptu:


Chrome 55	Edge 15	Firefox 52	Safari 11	Opera 42
Dec 2016	Apr 2017	Mar 2017	Sep 2017	Dec 2016