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:
EPSILON
MIN_SAFE_INTEGER
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
:
Метод isNaN()
Глобальный isNaN()
метод возвращается,
true
если аргумент равен NaN
.
В противном случае возвращается false
: