ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

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 Switch JS Цикл For JS Цикл While JS Прерывание JS Преобразование типов JS Побитовые JS Регулярные выражения JS Ошибки JS Область действия JS Подъём JS Строгий режим JS Ключевое слово this JS Ключевое слово Let JS Ключевое слово Const JS Функции стрелок JS Классы JS Отладка JS Гид по стилю JS Лучшие практики JS Ошибки JS Производительность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS JSON

JS Формы

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

JS Объекты

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

JS Функции

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

JS HTML DOM

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

JS Объектная модель браузера BOM

JS Окно JS Скрин JS Локация JS История JS Навигатор JS Всплывающее оповещение JS Тайминг JS Куки

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 Stringify JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS и jQuery

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

JS Примеры

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

JS Справочники

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

JavaScript. Уроки для начинающих

ECMAScript 6 - ECMAScript 2015


Что такое ECMAScript 6?

ECMAScript 6 также известен как ES6 и ECMAScript 2015.

Некоторые люди называют его JavaScript 6.

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

  • JavaScript let
  • JavaScript const
  • JavaScript Функции стрелок
  • JavaScript Классы
  • Значения параметров по умолчанию
  • Array.find()
  • Array.findIndex()
  • Возведение в степень (**) (EcmaScript 2016)

Браузерная поддержка ES6 (ECMAScript 2015)

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

Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
Jan 2017 Aug 2016 Mar 2017 Jul 2016 Aug 2018

JavaScript let

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

Пример

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

JavaScript const

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

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

Пример

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

Прочитайте больше про let и const в разделе JavaScript Let / 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 Функции стрелок на нашем сайте.


Классы

ES6 ввел классы.

Класс является типом функции, но вместо того, чтобы использовать ключевое слово function для его инициирования, мы используем ключевое слово class, а свойства назначаются внутри метода constructor().

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

Метод конструктора вызывается каждый раз, когда объект класса инициализируется.

Пример

Простое определение класса для класса с именем "Car":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}

Теперь вы можете создавать объекты, используя класс Car:

Пример

Создайте объект "mycar" на основе класса Car:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
mycar = new Car("Ford");

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

Узнать больше про классы вы можете в разделе JavaScript Классы на нашем сайте.


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

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

Пример

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

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 аргумента:

  • Значение (value)
  • Индекс (index)
  • Сам массив (array)

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 аргумента:

  • Значение (value)
  • Индекс (index)
  • Сам массив (array)

Свойства нового числа (New Number)

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;
Попробуйте сами »

Методы нового числа (New Number)

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

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

Метод Number.isInteger()

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

Пример

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

Метод Number.isSafeInteger()

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

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

Пример

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

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


Новые глобальные методы (New Global)

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
Попробуйте сами »

Оператор возведения в степень

Оператор возведения в степень (**) возводит в степень первый операнд в значение второго операнда.

Пример

var x = 5;
var z = x ** 2;          // результат 25
Попробуйте сами »

x ** y дает тот же результат, что и Math.pow(x,y):

Пример

var x = 5;
var z = Math.pow(x,2);   // результат 25
Попробуйте сами »