Javascript ES6
ECMAScript 2015 стал второй крупной версией JavaScript.
ECMAScript 2015 также известен как ES6 и ECMAScript 6.
В этой главе описаны наиболее важные функции ES6.
Новые возможности ES6
- Ключевое слово let
- Ключевое слово const
- Функции стрелок
- For/of
- Карты объектов
- Наборы объектов
- Классы
- Промисы
- Символ
- Параметры по умолчанию
- Функция Остаточный параметр
- String.includes()
- String.startsWith()
- String.endsWith()
- Array.from()
- Array.keys()
- Array.find()
- Array.findIndex()
- Новые математические методы
- Новые числовые свойства
- Новые числовые методы
- Новые глобальные методы
- Iterables Object.entries
- JavaScript Модули
Поддержка браузерами ES6 (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
Попробуйте сами »
Подробнее о ключевом слове 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 Функция стрелок.
Цикл For/Of
JavaScript инструкция for/of перебирает значения итерируемых объектов.
for/of позволяет перебирать итерируемые структуры данных, такие как массивы, строки, карты, списки узлов и т. д.
Цикл for/of имеет следующий синтаксис:
for (переменной of итерируемого) {
// блок кода, который должен быть выполнен
}
переменная - Для каждой итерации переменной присваивается значение следующего свойства. Переменная может быть объявлена с помощью const, let или var.
итерируемое - Объект с итеративными свойствами.
Цикл по массиву
Пример
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + " ";
}
Попробуйте сами »
Цикл по строке
Пример
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + " ";
}
Попробуйте сами »
Подробнее в главе: JavaScript Цикл For/In/Of.
JavaScript Объекты карты
Возможность использовать объект в качестве ключа - важная особенность карты.
Пример
// Создание объектов
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Создание новой карты
const fruits = new Map();
// Добавление новых элементов на карте
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
Попробуйте сами »
Узнайте больше об объектах карты в главе: JavaScript Map().
JavaScript Объекты Набора
Пример
// Создать Набор
const letters = new Set();
// Добавить несколько значений в Набор
letters.add("a");
letters.add("b");
letters.add("c");
Попробуйте сами »
Подробнее об объектах Набора в главе: JavaScript Set().
JavaScript Классы
JavaScript классы - это шаблоны для JavaScript объектов.
Используйте ключевое слово class для создания класса.
Всегда добавляйте метод с именем constructor():
Синтаксис
class ClassName {
constructor() { ... }
}
Пример
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
В приведенном выше примере создается класс с именем "Car".
У класса есть два начальных свойства: "name" (название) и "year" (год).
JavaScript класс не является объектом.
Он является шаблоном для JavaScript объектов.
Использование класса
Когда у вас есть класс, вы можете использовать его для создания объектов:
Пример
const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);
Подробнее о классах в главе: JavaScript Классы.
JavaScript Промисы
Промис - это JavaScript объект, который связывает "Производящий код" и "Потребляющий код".
"Производящий код" может занять некоторое время и "Потребляющий код" должен дождаться результата.
Синтаксис промиса
const myPromise = new Promise(function(myResolve, myReject) {
// "Производящий код" (может занять некотрое время)
myResolve(); // в случае успеха
myReject(); // когда ошибка
});
// "Потребляющий код" (должен дождаться выполнения промиса).
myPromise.then(
function(value) { /* код в случае успеха */ },
function(error) { /* код, если какая-то ошибка */ }
);
Пример использования промиса
const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
Подробнее о промисах в главе: 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;
// теперь Person[id] = 140353
// но person.id все еще не определено
Попробуйте сами »
Символы всегда уникальны.
Если вы создадите два символа с одинаковым описанием, они будут иметь разные значения.
Symbol("id") == Symbol("id") // false
Значения параметров по умолчанию
ES6 позволяет параметрам функции иметь значения по умолчанию.
Пример
function myFunction(x, y = 10) {
// y равно 10, если не передано или не определено
return x + y;
}
myFunction(5); // вернёт 15
Попробуйте сами »
Функция Rest Parameter
Параметр 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);
Попробуйте сами »
String.includes()
Метод includes() вернёт true если строка содержит указанное значение, иначе false:
Пример
let text = "Hello world, welcome to the universe.";
text.includes("world") // Вернёт true
Попробуйте сами »
String.startsWith()
Метод startsWith() вернёт true если строка начинается с указанного значения, иначе false:
Пример
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // Вернёт true
Попробуйте сами »
String.endsWith()
Метод endsWith() вернёт true если строка заканчивается указанным значением, иначе false:
Array.from()
Метод Array.from() возвращает объект массива с любого объекта с свойством длины или любым итерируемым (повторяющимся) объектом.
Array.Keys()
Метод Array.keys() возвращает объект Array Iterator с ключами массива.
Пример
Создать объект Array Iterator, содержащий ключи массива:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
Попробуйте сами »
Array.find()
Метод find() возвращает значение первого элемента массива, который передаёт тестовую функцию.
В этом примере находит (возвращает значение) первый элемент, размер которого больше 18:
Пример
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Попробуйте сами »
Обратите внимание, что функция принимает 3 аргумента:
- Значение элемента
- Индекс элемента
- Сам массив
Array.findIndex()
Метод findIndex() возвращает индекс первого элемента массива, который передает тестовую функцию.
В этом примере выполняется поиск индекса первого элемента больше 18:
Пример
const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Попробуйте сами »
Обратите внимание, что функция принимает 3 аргумента:
- Значение элемента
- Индекс элемента
- Сам массив
Новые математические методы
ES6 добавил следующие методы для математического объекта:
Math.trunc()Math.sign()Math.cbrt()Math.log2()Math.log10()
Метод Math.trunc()
Метод Math.trunc(x) возвращает целочисленную часть Х:
Пример
Math.trunc(4.9); // вернёт 4
Math.trunc(4.7); // вернёт 4
Math.trunc(4.4); // вернёт 4
Math.trunc(4.2); // вернёт 4
Math.trunc(-4.2); // вернёт -4
Попробуйте сами »
Метод Math.sign()
Метод Math.sign(x) возвращает, если X отрицательный, нулевой или положительный:
Пример
Math.sign(-4); // вернёт -1
Math.sign(0); // вернёт 0
Math.sign(4); // вернёт 1
Попробуйте сами »
Метод Math.cbrt()
Метод Math.cbrt(x) возвращает кубический корень Х:
Пример
Math.cbrt(8); // вернёт 2
Math.cbrt(64); // вернёт 4
Math.cbrt(125); // вернёт 5
Попробуйте сами »
Метод Math.log2()
Метод Math.log2(x) возвращает логарифм Х по основанию 2:
Метод Math.log10()
Math.log10(x) возвращает логарифм X по основанию 10:
Новые свойства числа
ES6 добавил следующие свойства к объекту Number (число):
EPSILONMIN_SAFE_INTEGERMAX_SAFE_INTEGER
Новые методы числа
ES6 добавил 2 новых метода к объекту Number (Число):
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) до +(253 - 1).
Это безопасно: 9007199254740991. Это не безопасно: 9007199254740992.
Новые глобальные методы
ES6 добавил 2 новых метода глобального числа:
isFinite()isNaN()
Метод isFinite()
Глобальный метод isFinite() возвращает false если аргумент имеет значение Infinity или NaN.
Иначе возвращается true:
Метод isNaN()
Глобальный метод isNaN() возвращает true если аргумент имеет NaN. Иначе возвращает false:
