У цьому посібнику ви дізнаєтесь про JavaScript ES6 за допомогою прикладів.
JavaScript ES6 (також відомий як ECMAScript 2015 або ECMAScript 6 ) - це нова версія JavaScript, яка була введена в 2015 році.
ECMAScript - це стандарт, який використовує мова програмування JavaScript. ECMAScript надає специфікацію того, як повинна працювати мова програмування JavaScript.
Цей підручник містить короткий підсумок часто використовуваних функцій ES6, щоб ви могли швидко розпочати роботу з ES6.
JavaScript дозволений
JavaScript letвикористовується для оголошення змінних. Раніше змінні оголошувались за допомогою varключового слова.
Щоб дізнатись більше про різницю між letта var, відвідайте JavaScript let vs var.
Змінні, оголошені за допомогою, letмають блок-сферу дії . Це означає, що вони доступні лише в межах певного блоку. Наприклад,
// variable declared using let let name = 'Sara'; ( // can be accessed only inside let name = 'Peter'; console.log(name); // Peter ) console.log(name); // Sara
Конст. JavaScript
Оператор constвикористовується для оголошення констант у JavaScript. Наприклад,
// name declared with const cannot be changed const name = 'Sara';
Після оголошення неможливо змінити значення constзмінної.
Функція стрілки JavaScript
У версії ES6 ви можете використовувати функції стрілок для створення виразів функцій. Наприклад,
Ця функція
// function expression let x = function(x, y) ( return x * y; )
можна записати як
// function expression using arrow function let x = (x, y) => x * y;
Щоб дізнатись більше про функції стрілок, відвідайте JavaScript Arrow Function.
Класи JavaScript
Клас JavaScript використовується для створення об’єкта. Клас подібний до функції конструктора. Наприклад,
class Person ( constructor(name) ( this.name = name; ) )
Ключове слово classвикористовується для створення класу. Властивості присвоюються у функції конструктора.
Тепер ви можете створити об’єкт. Наприклад,
class Person ( constructor(name) ( this.name = name; ) ) const person1 = new Person('John'); console.log(person1.name); // John
Щоб дізнатись більше про класи, відвідайте курси JavaScript.
Значення параметра за замовчуванням
У версії ES6 ви можете передавати значення за замовчуванням у параметри функції. Наприклад,
function sum(x, y = 5) ( // take sum // the value of y is 5 if not passed console.log(x + y); ) sum(5); // 10 sum(5, 15); // 20
У наведеному вище прикладі, якщо ви не передасте параметр для y, за замовчуванням знадобиться 5 .
Щоб дізнатись більше про параметри за замовчуванням, відвідайте Параметри функції JavaScript за замовчуванням.
Літерали шаблонів JavaScript
Буквальний шаблон спростив включення змінних всередину рядка. Наприклад, до того, як вам довелося зробити:
const first_name = "Jack"; const last_name = "Sparrow"; console.log('Hello ' + first_name + ' ' + last_name);
Цього можна досягти за допомогою літералу шаблону за допомогою:
const first_name = "Jack"; const last_name = "Sparrow"; console.log(`Hello $(first_name) $(last_name)`);
Щоб дізнатись більше про літеральні шаблони, відвідайте JavaScript Template Literal.
Деструктуризація JavaScript
Синтаксис деструктуризації полегшує присвоєння значень новій змінній. Наприклад,
// before you would do something like this const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Використовуючи синтаксис деструктуризації ES6 , наведений вище код можна записати як:
const person = ( name: 'Sara', age: 25, gender: 'female' ) let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Щоб дізнатися більше про деструктуризацію, відвідайте JavaScript Destructuring.
Імпорт та експорт JavaScript
Ви можете експортувати функцію або програму та використовувати їх в іншій програмі, імпортуючи. Це допомагає виготовляти багаторазові компоненти. Наприклад, якщо у вас є два файли JavaScript з іменами contact.js та home.js.
У contact.js файл можна експортувати в contact()функцію:
// export export default function contact(name, age) ( console.log(`The name is $(name). And age is $(age).`); )
Потім, коли ви хочете використовувати contact()функцію в іншому файлі, ви можете просто імпортувати функцію. Наприклад, у файлі home.js:
import contact from './contact.js'; contact('Sara', 25); // The name is Sara. And age is 25
Обіцянки JavaScript
Обіцянки використовуються для обробки асинхронних завдань. Наприклад,
// returns a promise let countValue = new Promise(function (resolve, reject) ( reject('Promise rejected'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); // Promise resolved ), )
Щоб дізнатись більше про обіцянки, відвідайте JavaScript Promises.
Параметр відпочинку та розповсюдження JavaScript
Параметр rest можна використовувати для представлення невизначеної кількості аргументів як масиву. Наприклад,
function show(a, b,… args) ( console.log(a); // one console.log(b); // two console.log(args); // ("three", "four", "five", "six") ) show('one', 'two', 'three', 'four', 'five', 'six')
Решта аргументів ви передаєте, використовуючи … синтаксис. Отже, параметр імені rest .
Ви використовуєте синтаксис поширення, … щоб скопіювати елементи в один масив. Наприклад,
let arr1 = ('one', 'two'); let arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // ("one", "two", "three", "four", "five")
І параметр rest, і оператор поширення використовують однаковий синтаксис. Однак оператор поширення використовується з масивами (ітерабельні значення).
Щоб дізнатись більше про оператор поширення, відвідайте JavaScript Spread Operator.
