САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

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 Заявления if...else JS Заявление switch JS Цикл for JS Цикл while JS Заявление break... JS Преобразование... JS Битовые... JS Регулярные выражения JS Ошибки JS Область JS Подъемный JS Строгий JS Ключевое слово this JS Ключевое слово let JS Константы JS Функция стрелки JS Классы JS Отладчик JS Руководство стиля JS Практика JS Распространенные ошибки JS Эффективность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS Версия 2016 JS Версия 2017 JS JSON

JS Формы

JS Формы JS Формы API

JS Объекты

Определение объекта Свойства объекта Методы объекта Отображение объекта Доступ к объекту Конструкторы объекта Прототипы объекта ES5 Методы объекта

JS Функции

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

JS Прочее

Классы введение Наследование класса Статические методы... JS Обратный вызов JS Асинхронный JS Обещания JS Асинхронный синтаксис

JS HTML DOM

DOM Введение DOM Методы DOM Документы DOM Элементы DOM HTML DOM CSS DOM Анимация DOM События DOM Прослушиватель событий DOM Навигация DOM Узлы DOM Коллекция DOM Список узлов

JS Браузера BOM

JS Window JS Экран JS Расположение JS История JS Навигатор JS Предупреждение JS Синхронизация JS Cookies

JS AJAX

AJAX Введение AJAX XMLHttp AJAX Запрос на сервер AJAX Ответ с сервера AJAX XML Файл AJAX PHP Файл AJAX ASP Файл AJAX База данных AJAX Приложения AJAX Примеры

JS JSON

JSON Введение JSON Синтаксис JSON или XML JSON Типы данных JSON Парсинг JSON Строки JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS Веб API

API - Введение API - История API - Хранилище API - Работник API - Извлечь файл API - Геолокации

JS или jQuery

jQuery HTML Селекторы jQuery HTML Элементы jQuery CSS Стили jQuery HTML DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Ввода JS HTML Объекты JS HTML События JS Браузер JS Редактор JS Упражнения JS Викторина JS Сертификат

JS Справочник

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


На сайте нет рекламы

JavaScript ECMAScript 2015 - ES6


ECMAScript 6, также известный как ES6 и ECMAScript 2015, был второй важной версией JavaScript.

В этой главе описаны наиболее важные функции ES6.

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


Поддержка браузером ES6 (ECMAScript 2015)

Safari 10 и Edge 14 были первыми браузерами, полностью поддерживающими ES6:

Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
Январь 2017 Август 2016 Март 2017 Июль 2016 Август 2018

JavaScript позволяет

Ключевое слово let позволяет объявлять переменную с блоком области

Пример

var x = 10;
// Здесь x равно 10
{
  let x = 2;
  // Здесь x равно 2
}
// Здесь x равно 10
Попробуйте сами »

Подробнее читайте let в главе: JavaScript Let.


JavaScript const

Ключевое слово const позволяет объявить константу (переменная JavaScript со значением константы).

Константы аналогичны let переменным, за исключением того, что значение нельзя изменить.

Пример

var x = 10;
// Здесь x равно 10
{
  const x = 2;
  // Здесь x равно 2
}
// Здесь x равно 10
Попробуйте сами »

Подробнее читайте const в главе: JavaScript Const.



Стрелочные функции

Стрелочные функции позволяют использовать короткий синтаксис для написания функциональных выражений.

Вам не нужны function ключевое слово, return ключевое слово и фигурные скобки.

Пример

// ES5
var x = function(x, y) {
   return x * y;
}

// ES6
const x = (x, y) => x * y;
Попробуйте сами »

Стрелочные функции не имеют своих this. Они плохо подходят для определения методов объекта.

Стрелочные функции не поднимаются. Они должны быть определены перед использованием.

Использование const более безопасно, чем использование var, потому что выражение функции всегда является постоянным значением.

Вы можете опустить return ключевое слово и фигурные скобки, только если функция является одним оператором. Из-за этого может быть хорошей привычкой всегда держать их:

Пример

const x = (x, y) => { return x * y };
Попробуйте сами »

Узнайте больше о стрелочных функциях в главе: Стрелочные функции JavaScript.


Классы JavaScript

Классы JavaScript - это шаблоны для объектов JavaScript.

Используйте ключевое слово class для создания класса.

Всегда добавляйте метод с именем constructor():

Синтаксис

class ClassName {
  constructor() { ... }
}

Пример

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

В приведенном выше примере создается класс с именем "Car".

Класс имеет два начальных свойства: "name" and "year".

Класс JavaScript не является объектом.

Это шаблон для объектов JavaScript.


Использование класса

Когда у вас есть класс, вы можете использовать его для создания объектов:

Пример

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

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

Узнайте больше о классах в главе: Классы JavaScript.


Объект обещания JavaScript

Обещание - это объект JavaScript, который связывает "Создающий код" и "Потребляющий код".

"Производящий код" может занять некоторое время, а "Создающий код" должен дождаться результата.

Синтаксис обещаний

let myPromise = new Promise(function(myResolve, myReject) {
// "Создающий код" (может занять некоторое время)

  myResolve(); // в случае успеха
  myReject();  // в случае ошибки
});

// "Потребляющий код" (необходимо дождаться выполнения обещания).
myPromise.then(
  function(value) { /* код в случае успеха */ },
  function(error) { /* в случае ошибки */ }
);

Пример использования обещания

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

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

Узнайте больше о обещании в главе: Обещания JavaScript.


Тип символа JavaScript

Символ JavaScript - это примитивный тип данных, такой же, как Number, String или Boolean.

Он представляет собой уникальный "скрытый" идентификатор, к которому другой код не может случайно получить доступ.

Например, если разные кодировщики хотят добавить свойство person.id к объекту person, принадлежащему стороннему коду, они могут смешивать значения друг друга.

Использование Symbol() для создания уникальных идентификаторов решает эту проблему:

Пример

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

let id = Symbol('id');
person.id = 140353;
Попробуйте сами »

Символы всегда уникальны.

Если вы создадите два символа с одинаковым описанием, они будут иметь разные значения.

Symbol("id") == Symbol("id") // false

Значения параметров по умолчанию

ES6 позволяет параметрам функции иметь значения по умолчанию.

Пример

function myFunction(x, y = 10) {
  // y равно 10, если не передано, или undefined
  return x + y;
}
myFunction(5); // вернет 15
Попробуйте сами »

Функция остаточный параметр

Параметр rest (...) позволяет функции обрабатывать неопределенное количество аргументов как массив:

Пример

function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let x = sum(4, 9, 16, 25, 29, 100, 66, 77);
Попробуйте сами »

Array.find()

Метод find() возвращает значение первого элемента массива , который проходит тестовую функцию.

В этом примере выполняется поиск (возвращается значение) первого элемента больше 18:

Пример

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
Попробуйте сами »

Обратите внимание, что функция принимает 3 аргумента:

  • Значение позиции
  • Индекс позиции
  • Сам массив

Array.findIndex()

Метод findIndex() возвращает индекс первого элемента массива, который проходит тестовую функцию.

В этом примере выполняется поиск индекса первого элемента, который больше 18:

Пример

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
Попробуйте сами »

Обратите внимание, что функция принимает 3 аргумента:

  • Значение позиции
  • Индекс позиции
  • Сам массив

Новые свойства чисел

ES6 добавил следующие свойства к объекту Number:

  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER

Пример

var x = Number.EPSILON;
Попробуйте сами »

Пример

var x = Number.MIN_SAFE_INTEGER;
Попробуйте сами »

Пример

var x = Number.MAX_SAFE_INTEGER;
Попробуйте сами »

Новые методы чисел

ES6 добавил к объекту Number 2 новых метода:

  • Number.isInteger()
  • Number.isSafeInteger()

Метод Number.isInteger()

Метод Number.isInteger() возвращает, true если аргумент является целым числом.

Пример

Number.isInteger(10);        // возвращает true
Number.isInteger(10.5);      // возвращает false
Попробуйте сами »

Метод Number.isSafeInteger()

Безопасное целое число - это целое число, которое может быть точно представлено как число двойной точности.

Метод Number.isSafeInteger() возвращает, true если аргумент является безопасным числом.

Пример

Number.isSafeInteger(10);    // возвращает true
Number.isSafeInteger(12345678901234567890);  // возвращает false
Попробуйте сами »

Безопасные целые числа - это целые числа от -(253 - 1) to +(253 - 1).
Это безопасно: 9007199254740991. Это небезопасно: 9007199254740992.


Новые глобальные методы

ES6 добавил 2 новых метода глобального числа::

  • isFinite()
  • isNaN()

Метод isFinite()

Глобальный isFinite() метод возвращается, false если аргументом является Infinity или NaN.

В противном случае возвращается true:

Пример

isFinite(10/0);       // возвращает false
isFinite(10/1);       // возвращает true
Попробуйте сами »

Метод isNaN()

Глобальный isNaN() метод возвращается, true если аргумент равен NaN. В противном случае возвращается false:

Пример

isNaN("Hello");       // возвращает true
Попробуйте сами »