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()
- Нові математичні методи
- Нові числові властивості
- Нові числові методи
- Нові глобальні методи
- Ітерації 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 об’єктів.
Використання класу
Коли у вас є клас, ви можете використовувати його для створення об’єктів:
Докладніше про класи в розділі: 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 Проміси.
Тип Symbol (символ)
JavaScript Symbol - це примітивний тип даних, такий самий, як 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) повертає цілочислову частину 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) поверне кубічний корінь x:
Приклад
Math.cbrt(8); // поверне 2
Math.cbrt(64); // поверне 4
Math.cbrt(125); // поверне 5
Спробуйте самі »
Метод Math.log2()
Метод Math.log2(x) поверне логарифм 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:
