JavaScript ECMAScript 2015 - ES6
ECMAScript 6, также известный как ES6 и ECMAScript 2015, был второй важной версией JavaScript.
В этой главе описаны наиболее важные функции ES6.
Новые возможности ES6
letключевое словоconstключевое слово- Стрелочные функции JavaScript
- Классы JavaScript
- Обещание JavaScript
- Символ JavaScript
- Значения параметров по умолчанию
- Функция Остаточный параметр
Array.find()Array.findIndex()- Новые свойства чисел
- Новые методы чисел
- Новые глобальные методы
Поддержка браузером 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 ключевое слово и фигурные скобки,
только если функция является одним оператором. Из-за этого может быть хорошей привычкой всегда держать их:
Узнайте больше о стрелочных функциях в главе: Стрелочные функции 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.
Использование класса
Когда у вас есть класс, вы можете использовать его для создания объектов:
Узнайте больше о классах в главе: Классы 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:
EPSILONMIN_SAFE_INTEGERMAX_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:
Метод isNaN()
Глобальный isNaN() метод возвращается,
true если аргумент равен NaN.
В противном случае возвращается false:
