JavaScript ECMAScript 2015 - ES6
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 и фигурные скобки только в том случае, если функция представляет собой одну инструкцию (оператор). Поэтому это может быть хорошей привычкой всегда иметь их:
Узнайте больше о стрелочных функциях в главе: 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.
Использование класса
Когда у вас есть класс, вы можете использовать его для создания объектов:
Узнайте больше о классах в главе: 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
Новые методы чисел
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:
