ECMAScript 6 - 10 Дивовижні нові можливості
Чи знаєте ви, що JavaScript (разом з JScript і ActionScript) - це реалізація специфікації мови загального призначення на стороні клієнта, яка називається ECMAScript? Щоб зробити це неприємне визначення трохи більш привабливим, можна сказати, що ECMAScript (або офіційно ECMA-262) стандарт, який визначає, як ми використовуємо JavaScript, і що ми можемо досягти з цим.
Останнє, 6-е видання мови ECMAScript 2015 (або ES6) є, мабуть, найважливішим оновленням з першої версії в 1997 році. Основною метою останнього випуску є надання кращої підтримки для створення більших додатків і бібліотек. Це означає більш зрілий синтаксис, нові ярлики для спрощення кодування, а також нові методи, ключові слова, типи даних та багато інших удосконалень..
Документація ES6 велика, якщо ви хочете багато читати, ви можете завантажити всі специфікації з сайту ECMA International. У цьому пості ми розглянемо 10 відібраних функцій, хоча ES6 має багато іншого. Якщо ви хочете експериментувати з ним, скрипка ES6 є прекрасним місцем для цього, і ви також можете знайти там деякі фрагменти коду..
Підтримка ECMAScript 6
Постачальники веб-переглядачів поступово додають підтримку функцій ECMAScript 6. Тут можна знайти чудову таблицю сумісності про підтримку браузера та компілятора для нових функцій.
Якщо ви зацікавлені в підтримці ES6 в Node.js, ознайомтеся з документами тут.
Хоча не всі функції в даний час підтримуються, ми можемо використовувати трансліпери, такі як Babel, для передачі коду ES6 до ES5. Існує чудовий плагін Grunt для Babel, багато чудових плагінів ES6 для Grunt і дивовижний плагін Gulp-Babel, тому, на щастя, у нас є багато варіантів.
Таким чином, ми можемо почати використовувати розширений синтаксис і можливості, в той час як нам не доведеться турбуватися про проблеми сумісності. Тепер давайте побачимо функції.
1. Новий дозволяє Ключове слово
ES6 представляє новий дозволяє ключове слово, що дозволяє нам оголошувати локальні змінні в області блоку, наприклад, оператор, вираз або (n внутрішню) функцію. Наприклад, ми можемо оголосити a для циклу наступним чином, а потім повторно використовувати те ж ім'я змінної (оскільки його область обмежена на для петлі) всередині наступного якщо заява:
для (i = 0; i < myArray.length; i++) // Do something inside the block if (x > 0 && x! = Y) // Ми повторно використовуємо "i", нехай i = x * y
Використання дозволяє Ключове слово призводить до більш чистого та корисного коду. Різниця між ними дозволяє і var знаходиться в області застосування, наприклад локальна змінна, визначена параметром var ключове слово може бути використано у всій укладеній функції, тоді як змінні визначаються дозволяє працювати лише у своєму (суб) блоці. Дозволяє також можна використовувати глобально, в цьому випадку він веде себе так само, як var. Звичайно, в ES6 ми все ще можемо використовувати var якщо хочемо.
2. Новий const Ключове слово
Новий const ключове слово дозволяє оголошувати константи, також відомі як незмінні змінні, до яких не можна перепризначити новий вміст пізніше.
const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Тиха помилка, оскільки ми не можемо перепризначити нове значення константі
Незмінні змінні не завжди є повністю незмінними в ECMAScript 6, хоча, якщо константа утримує об'єкт, ми можемо пізніше змінити значення його властивостей і методів. Те ж саме справедливо і для елементів масиву.
const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22
Ми ще не можемо безпосередньо перепризначити нове значення об'єкту MY_CONSTANT у наведеному вище фрагменті коду, що означає, що ми не можемо змінити назви властивостей і методів, а також не можемо додати нове або видалити існуюче, тому ми не можемо наступна річ:
MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // Помилка
3. Функції стрілки
ECMAScript 6 полегшує, як ми пишемо анонімні функції, як ми можемо повністю пропустити функції ключове слово. Нам потрібно лише використовувати новий синтаксис для функції стрілки, названий по імені знака "стрілка" (жирна стрілка), що дає нам великий ярлик.
// 1. Один параметр в ES6 дозволяє sum = (a, b) => a + b; // у ES5 var sum = функція (a, b) return a + b; ; // 2. Без параметрів в ES6 нехай randomNum = () => Math.random (); // у ES5 var randomNum = function () return Math.random (); ; // 3. Без повернення в ES6 дайте повідомлення = (ім'я) => alert ("Hi" + name + "!"); // у ES5 var message = function (yourName) alert ("Привіт" + yourName + "!"); ; Існує важлива відмінність між регулярними і стрілковими функціями, тобто функції стрілки не отримують це значення автоматично, як функції, визначені за допомогою функції ключове слово робити. Функції стрілки лексично пов'язати це значення до поточної області. Це означає, що ми можемо легко повторно використовувати це ключове слово у внутрішній функції. У ES5 це можливо лише з наступним рухом:
// ES5 Hack використовувати "це" ключове слово у внутрішній функції … addAll: function addAll (pieces) var self = this; _.each (шматки, функція (шматок) self.add (шматок);); ,… // ES6 те ж внутрішня функція тепер може використовувати свою власну "цю" (… addAll: function addAll (pieces) _.each (шматки, шматок => this.add (шматок)); ,…
Код вище з Mozilla Hacks
4. Нове поширення Оператор
Новий поширення Оператор позначений 3 крапками (…), і ми можемо використовувати його для підписання місця декількох очікуваних елементів. Одним з найбільш поширених випадків використання оператора розповсюдження є вставлення елементів масиву в інший масив:
Let myArray = [1, 2, 3]; letArray = [… myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6
Ми також можемо використовувати важелі поширення оператор у викликах функцій, в якому ми хочемо передати аргументи з масиву:
Let myArray = [1, 2, 3]; функція sum (a, b, c) return a + b + c; console.log (сума (… myArray)); // 6
The поширення Оператор є досить гнучким, оскільки його можна використовувати кілька разів в тому ж масиві або виклику функції.
5. Значення за замовчуванням для параметрів і нових параметрів відпочинку
Хороша новина, що в ECMAScript 6 ми можемо додати значення за замовчуванням до параметрів функції. Це означає, що якщо ми не передаємо аргументи пізніше у виклику функції, використовуються параметри за замовчуванням. У ES5 значення за замовчуванням параметрів завжди встановлюються на undefined, тому нова можливість встановити їх на все, що ми хочемо, безумовно, є великим зміцненням мови.
функція sum (a = 2, b = 4) return a + b; console.log (sum ()); // 6 console.log (сума (3, 6)); // 9
ES6 також вводить новий вид параметра параметри відпочинку. Вони виглядають і працюють так само, як і розповсюджують оператори. Вони стануть зручними, якщо ми не знаємо, скільки аргументів буде передано пізніше у виклику функції. Ми можемо використовувати властивості та методи об'єкта Array на параметрах відпочинку:
function putInAlphabet (… args) let sorted = args.sort (); повернення сортується; console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t 6. Нове за… Заява
За допомогою нового за… циклу ми легко перебираємо масиви або інші iterable об'єкти. Поряд з новим за… оператор ECMAScript 6 вводить також два нових об'єкти, що підлягають повторенню, Map для карти ключів / значень і Set для колекцій унікальних значень, які також можуть бути примітивними значеннями та посиланнями на об'єкти. Коли ми використовуємо за… оператор, код всередині блоку виконується для кожного елемента повторяемого об'єкта.
нехай myArray = [1, 2, 3, 4, 5]; нехай сума = 0; для (let i myArray) sum + = i; console.log (сума); // 15 (= 1 + 2 + 3 + 4 + 5)
7. Шаблонні літерали
ECMAScript 6 надає нам нову альтернативу для конкатенації рядків. Шаблонні літерали дозволяйте нам легко створювати шаблони, в яких ми можемо вставляти різні значення в будь-яке місце, яке ми хочемо. Для цього нам необхідно скористатися $ … синтаксис, де ми хочемо вставити дані, які ми можемо передати з змінних, масивів або об'єктів таким чином:
let customer = title: 'Ms', firstname: 'Jane', прізвище: 'Doe', вік: '34'; let template = 'Шановний $ customer.title $ customer.firstname $ customer.surname! Днем народження $ customer.age! '; console.log (шаблон); // Шановні пані Джейн Доу! Щасливий 34-й день народження!
8. Класи
ES6 представляє класи JavaScript, які побудовані на існуючому успадкуванні на основі прототипу. Новий синтаксис робить його більш простим у створенні об'єктів, взяття важелів успадкування та повторному використанні коду. Це також полегшить початківцям, які прибувають з інших мов програмування, щоб зрозуміти, як працює JavaScript.
У ES6 класи оголошуються з новими клас ключове слово, і потрібно мати конструктор () метод, який викликається при створенні нового об'єкта за допомогою new myClass () синтаксис. Також можна розширити нові класи за допомогою Клас дитини розширює батьків Синтаксис, який може бути знайомий з інших об'єктно-орієнтованих мов, таких як PHP. Важливо також знати, що, на відміну від декларацій функцій і змінних, декларації класів НЕ підняті в ECMAScript 6.
клас Polygon конструктор (height, width) // конструктор класу this.name = 'Polygon'; this.height = висота; this.width = width; sayName () // метод класу console.log ('Привіт, я є', this.name + '.'); нехай myPolygon = новий полігон (5, 6); console.log (myPolygon.sayName ()); // Привіт, я багатокутник. Код вище з ES6 Приклади скрипки, .
9. Модулі
Ви коли-небудь замислювалися, наскільки цікаво було б, якщо б JavaScript був модульним? Звичайно, існували обхідні шляхи, такі як CommonJS (використовується в Node.js) або AMD (Визначення Асинхронного Модуля) (використовується в RequireJS) для цього, але ES6 вводить модулі як рідну функцію.
Потрібно визначити кожен модуль у його власному файлі, а потім використати експорт ключове слово для експорту змінних і функцій до інші файли та імпортувати імпортувати їх від інші файли відповідно до наступного синтаксису:
// functions.js функція куба (a) повернення a * a * a; функція cubeRoot (a) return Math.cbrt (a); export cube, cubeRoot // або: export cube, cb, cubeRoot як cr // app.js import cube, cubeRoot з 'functions'; console.log (куб (4)); // 64 console.log (cubeRoot (125)); // 5
Це рішення є яскравим, оскільки код, що зберігається в модулі, невидимий ззовні, і ми повинні експортувати тільки ту частину, до якої ми хочемо отримати доступ іншими файлами. Ми можемо зробити набагато більше дивовижних речей за допомогою модулів ES6, тут ви можете знайти велике та детальне пояснення про них.
10. Завантаження нових методів
ECMAScript 6 вводить багато нових методів для існуючого прототипу String, об'єкта масиву, прототипу масиву та математичного об'єкта. Нові методи можуть значно поліпшити спосіб, як ми можемо маніпулювати цими сутностями. Mozilla Dev має великі приклади коду нових додатків, варто взяти час і ретельно вивчити їх.
Для того, щоб показати, наскільки вони справді цікаві, тут мій улюблений: метод пошуку прототипу Array, що дозволяє нам тестувати певні критерії на елементах масиву, виконуючи функцію зворотного виклику на кожному елементі, а потім повертаючи перший елемент повертається вірно.
функція isPrime (елемент, індекс, масив) var start = 2; while (початок <= Math.sqrt(element)) if (element % start++ < 1) return false; return element > 1; console.log ([4, 6, 8, 12] .find (isPrime)); // undefined, не знайдено console.log ([4, 5, 8, 12] .find (isPrime)); // 5
Код вище від: Mozilla Dev
