JavaScript ECMAScript 2017

Оглавление

    Показать оглавление

Номера версий JavaScript

Старые версии JS названы номерами: ES5 (2009) и ES6 (2015).

С 2016 года версии именуются по годам: ECMAScript 2016, 2017, 2018, 2019,...

Новые возможности ECMAScript 2017

В этой главе представлены новые функции ECMAScript 2017:

  • Заполнение строк JavaScript

  • Записи объектов JavaScript()

  • Значения объекта JavaScript()

  • JavaScript асинхронен и ждет

  • JavaScript Object.getOwnPropertyDescriptors

Заполнение строк JavaScript

ECMAScript 2017 добавил в JavaScript два строковых метода: padStart() и padEnd() для поддержки заполнения в начале и в конце строки.

Примеры

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

Попробуйте сами →

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

Попробуйте сами →

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

Заполнение строк JavaScript поддерживается во всех современных браузерах с апреля 2017 года:

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

Записи объектов JavaScript

ECMAScript 2017 добавил к объектам метод Object.entries().

Object.entries() возвращает массив пар ключ/значение в объекте:

Пример

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

let text = Object.entries(person);

Попробуйте сами →

<!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() упрощает использование объектов в циклах:

Пример

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

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

Попробуйте сами →

<!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() также упрощает преобразование объектов в карты:

Пример

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

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

Попробуйте сами →

<!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() поддерживается во всех современных браузерах с марта 2017 года:

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

Значения объектов JavaScript

Object.values() аналогичен Object.entries(), но возвращает одномерный массив значений объекта:

Пример

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

let text = Object.values(person);

Попробуйте сами →

<!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() поддерживается во всех современных браузерах с марта 2017 года:

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

Асинхронные функции JavaScript

Ожидание тайм-аута

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

 myDisplay();

Попробуйте сами →

<!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 и Chrome были первыми браузерами с поддержкой асинхронных функций JavaScript:

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