ECMAScript 6, также известный как ES6 и ECMAScript 2015, был второй важной версией JavaScript.
В этой главе описаны наиболее важные функции ES6.
Новые возможности ES6
letключевое словоconstключевое слово- JavaScript Функции стрелок
- JavaScript Class
- JavaScript Promise
- JavaScript Symbol
- Значения параметров по умолчанию
- Функция Остаточного параметра
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
Ключевое слово 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 class
JavaScript class - это шаблоны для объектов JavaScript.
Используйте ключевое слово class для создания класса.
Всегда добавляйте метод с именем constructor():
Синтаксис
JavaScript ClassName {
constructor() { ... }
}
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
В приведенном выше примере создается класс с именем "Car".
Класс имеет два начальных свойства: "name" и "year".
JavaScript JavaScript не является объектом.
Это шаблон для объектов JavaScript.
Использование класса
Когда у вас есть класс, вы можете использовать его для создания объектов:
let myCar1 = new Car("Форд", 2014);
let myCar2 = new Car("Ауди", 2019);
Узнайте больше о классах в главе: JavaScript Классы.
JavaScript Объект Promise
Promise - это объект JavaScript, который связывает "Создающий код" и "Потребляющий код".
"Производящий код" может занять некоторое время, а "Создающий код" должен дождаться результата.
Синтаксис Promise
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 Promise.
JavaScript Тип Symbol
JavaScript Symbol - это примитивный тип данных, такой же, как Number, String или Boolean.
Он представляет собой уникальный "скрытый" идентификатор, к которому другой код не может случайно получить доступ.
Например, если разные кодировщики хотят добавить свойство person.id к объекту person, принадлежащему стороннему коду, они могут смешивать значения друг друга.
Использование Symbol() для создания уникальных идентификаторов решает эту проблему:
const person = {
firstName: "Щипунов",
lastName: "Андрей",
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
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("Привет"); // возвращает true
Попробуйте сами »