Учебник по JS

ГЛАВНАЯ JS Введение JS Куда Вывод JS Заявления JS JS-синтаксис JS-комментарии JS-переменные JS Пусть Константа JS JS-операторы JS-арифметика Назначение JS JS-типы данных JS-функции JS-объекты JS-события JS-строки Строковые методы JS Поиск строки JS Шаблоны строк JS JS-номера Методы номеров JS JS-массивы Методы массива JS Сортировка массива JS Итерация массива JS Константа массива JS JS-даты Форматы даты JS Методы получения даты JS Методы установки даты JS JS-математика JS Случайный JS Булевы значения Сравнение JS JS-условия JS-переключатель JS цикл для Цикл JS для входа Цикл JS для Цикл JS во время Перерыв JS JS-итерации JS-наборы JS-карты JS Typeof Преобразование типов JS JS побитовый JS регулярное выражение JS-ошибки Область JS JS-подъем Строгий режим JS JS это ключевое слово Функция стрелки JS JS-классы JS JSON JS-отладка Руководство по стилю JS Лучшие практики JS JS-ошибки JS-производительность Зарезервированные слова JS

JS-версии

JS-версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/пограничный История JS

JS-объекты

Определения объектов Свойства объекта Методы объекта Отображение объекта Средства доступа к объектам Конструкторы объектов Прототипы объектов Итерации объектов Наборы объектов Карты объектов Ссылка на объект

JS-функции

Определения функций Параметры функции Вызов функции Вызов функции Функция Применить Закрытие функций

JS-классы

Введение в класс Наследование классов Статический класс

JS асинхронный

Обратные вызовы JS JS асинхронный JS-обещания JS асинхронный/ожидание

JS HTML DOM

Дом Введение DOM-методы Документ DOM DOM-элементы DOM HTML DOM-формы ДОМ CSS DOM-анимации События ДОМ Слушатель событий DOM DOM-навигация DOM-узлы Коллекции DOM Списки узлов DOM

Спецификация браузера JS

JS-окно JS-экран Местоположение JS История JS JS-навигатор Всплывающее оповещение JS JS Тайминг JS-куки

JS-веб-API

Введение в веб-API API веб-форм API истории веб-поиска API веб-хранилища API веб-работника API веб-выборки API веб-геолокации

JS АЯКС

Введение в АЯКС AJAX XMLHttp АЯКС-запрос AJAX-ответ XML-файл AJAX АЯКС PHP АЯКС АСП База данных AJAX AJAX-приложения Примеры AJAX

JS JSON

Введение в JSON Синтаксис JSON JSON против XML Типы данных JSON Анализ JSON Строковая JSON JSON-объекты JSON-массивы JSON-сервер JSON PHP JSON HTML JSON JSONP

JS против JQuery

Селекторы jQuery JQuery HTML jQuery CSS JQuery DOM

JS-графика

JS-графика JS Холст JS сюжет JS Chart.js JS Google Диаграмма JS D3.js

JS-примеры

JS-примеры JS HTML DOM JS HTML-ввод HTML-объекты JS HTML-события JS JS-браузер JS-редактор JS-упражнения JS-викторина JS-сертификат

JS-ссылки

Объекты JavaScript HTML DOM-объекты


ECMAScript 2017

Соглашение об именах JavaScript началось с ES1, ES2, ES3, ES5 и ES6.

Но ECMAScript 2016 и 2017 не назывались ES7 и ES8.

С 2016 года новые версии именуются по годам (ECMAScript 2016/2017/2018).

Новые функции в ECMAScript 2017

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


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

В ECMAScript 2017 добавлено два метода String: padStart и padEndдля поддержки заполнения в начале и в конце строки.

Пример

let str = "5";
str = str.padStart(4,0);
// result is 0005

Пример

let str = "5";
str = str.padEnd(4,0);
// result is 5000

Заполнение строк не поддерживается в Internet Explorer.

Firefox и Safari были первыми браузерами с поддержкой заполнения строк JavaScript:

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

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

Object.entriesECMAScript 2017 добавляет к объектам новый метод.

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

Пример

const person = {
  firstName : "John",
  lastName : "Doe",
  age : 50,
  eyeColor : "blue"
};
document.getElementById("demo").innerHTML = Object.entries(person);

Object.entries() упрощает использование объектов в циклах:

Пример

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

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

Object.entries() также упрощает преобразование объектов в карты:

Пример

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

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

Chrome и Firefox были первыми браузерами с поддержкой Object.entries:

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"
};
document.getElementById("demo").innerHTML = Object.values(person);

Firefox и Chrome были первыми браузерами с поддержкой Object.values:

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

Firefox и Chrome были первыми браузерами с поддержкой асинхронных функций JavaScript:

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