Як використовувати деструктурування масивів та об’єктів у JavaScript

Призначення деструктуризації - це крута функція, яка поставляється разом із ES6. Деструктуризація - це вираз JavaScript, який дає змогу розпакувати значення з масивів або властивості об’єктів у різні змінні. Тобто ми можемо витягувати дані з масивів та об’єктів і призначати їх змінним.

Навіщо це потрібно?

Уявіть, що ми хочемо витягти дані з масиву. Раніше, як це можна було зробити?

let introduction = ["Hello", "I" , "am", "Sarah"]; let greeting = introduction[0]; let name = introduction[3]; console.log(greeting);//"Hello" console.log(name);//"Sarah" 

Ми бачимо, що коли ми хочемо витягти дані з масиву, нам доведеться робити одне і те ж знову і знову.

Призначення ES6 для деструктуризації полегшує отримання цих даних. Як це так? Спочатку ми обговоримо призначення деструктуризації з масивами. Тоді ми перейдемо до деструктуризації об’єктів.

Давайте розпочнемо.

Основна деструктуризація масиву

Якщо ми хочемо витягти дані з масивів, це досить просто за допомогою призначення деструктуризації.

Звернемося до нашого першого прикладу для масивів. Замість того, щоб повторювати цей повторюваний процес, ми зробимо наступне:

let introduction = ["Hello", "I" , "am", "Sarah"]; let [greeting, pronoun] = introduction; console.log(greeting);//"Hello" console.log(pronoun);//"I" 

Ми також можемо зробити це з тим самим результатом.

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(pronoun);//"I"

Оголошення змінних перед призначенням

Змінні можна оголосити перед призначенням таким чином:

 let greeting, pronoun; [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(pronoun);//"I" 

Зверніть увагу, що змінні встановлюються зліва направо. Отже, перша змінна отримує перший елемент у масиві, друга змінна отримує другу змінну в масиві тощо.

Пропуск елементів у масиві

Що робити, якщо ми хочемо отримати перший і останній елемент нашого масиву замість першого та другого елемента, і ми хочемо призначити лише дві змінні? Це теж можна зробити. Подивіться на приклад нижче:

let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(name);//"Sarah" 

Що щойно сталося?

Подивіться на масив ліворуч від присвоєння змінної. Зверніть увагу, що замість однієї коми ми маємо три. Розділювач комами використовується для пропуску значень у масиві. Отже, якщо ви хочете пропустити елемент у масиві, просто використовуйте кому.

Давайте зробимо ще одну. Пропустимо перший і третій пункт у списку. Як би ми це зробили?

let [,pronoun,,name] = ["Hello", "I" , "am", "Sarah"]; console.log(pronoun);//"I" console.log(name);//"Sarah" 

Тож роздільник коми робить магію. Отже, якщо ми хочемо пропустити всі елементи, ми просто робимо це:

let [,,,,] = ["Hello", "I" , "am", "Sarah"]; 

Призначення решти масиву

Що робити, якщо ми хочемо призначити частину масиву змінним, а решту елементів масиву - певній змінній? У такому випадку ми зробили б це:

let [greeting,...intro] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(intro);//["I", "am", "Sarah"] 

Використовуючи цей шаблон, ви можете розпакувати та призначити змінну решту частини масиву.

Призначення деструктуризації з функціями

Ми також можемо витягувати дані з масиву, що повертається з функції. Скажімо, у нас є функція, яка повертає масив, як у прикладі нижче:

function getArray() { return ["Hello", "I" , "am", "Sarah"]; } let [greeting,pronoun] = getArray(); console.log(greeting);//"Hello" console.log(pronoun);//"I" 

Ми отримуємо однакові результати.

Використання значень за замовчуванням

Значення за замовчуванням можуть бути призначені змінним лише на випадок, якщо значення, витягнуте з масиву, є undefined:

let [greeting = "hi",name = "Sarah"] = ["hello"]; console.log(greeting);//"Hello" console.log(name);//"Sarah" 

Тож nameповертається до "Сари", оскільки це не визначено в масиві.

Обмін значеннями за допомогою призначення деструктуризації

І ще одна річ. Ми можемо використовувати призначення деструктуризації для обміну значеннями змінних:

let a = 3; let b = 6; [a,b] = [b,a]; console.log(a);//6 console.log(b);//3 

Далі перейдемо до деструктуризації об’єктів.

Деструктуризація об’єктів

По-перше, давайте подивимося, чому потрібна деструктуризація об’єктів.

Скажімо, ми хочемо витягти дані з об’єкта та призначити новим змінним. Як це можна було зробити до ES6?

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let name = person.name; let country = person.country; let job = person.job; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" 

Подивіться, наскільки нудно витягувати всі дані. Доводиться неодноразово робити одне і те ж. Деструктуризація ES6 дійсно економить день. Давайте стрибнемо прямо в нього.

Основна деструктуризація об’єктів

Повторимо наведений приклад із ES6. Замість того, щоб призначати значення одне за одним, ми можемо використовувати об’єкт зліва для вилучення даних:

 let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name, country, job} = person; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" 

Ви отримаєте однакові результати. Також допустимо присвоювати змінні об'єкту, який не був оголошений:

let {name, country, job} = {name: "Sarah", country: "Nigeria", job: "Developer"}; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" 

Змінні, оголошені перед призначенням

Змінні в об'єктах можуть бути оголошені перед тим, як призначати їх деструктуризацією. Спробуємо:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let name, country, job; {name, country, job} = person; console.log(name);// Error : "Unexpected tokenSarah", country: "Nigeria", job: "Developer"}; let name, country, job; ({name, country, job} = person); console.log(name);//"Sarah" console.log(job);//"Developer" 

Важливо також зазначити, що при використанні цього синтаксису перед ()символом слід ставити крапку з комою. В іншому випадку він може бути використаний для виконання функції з попереднього рядка.

Зверніть увагу, що змінні в об'єкті зліва повинні мати те саме ім'я, що і ключ властивості в об'єкті person. Якщо імена різні, ми отримаємо undefined:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name, friends, job} = person; console.log(name);//"Sarah" console.log(friends);//undefined 

Але якщо ми хочемо використовувати нове ім’я змінної, то можемо.

Використання нової назви змінної

Якщо ми хочемо призначити значення об’єкта новій змінній замість того, щоб використовувати ім’я властивості, ми можемо зробити це:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name: foo, job: bar} = person; console.log(foo);//"Sarah" console.log(bar);//"Developer" 

Отже витягнуті значення передаються новим змінним fooі bar.

Використання значень за замовчуванням

Значення за замовчуванням також можуть бути використані при деструктуризації об'єкта, на той випадок, якщо змінна знаходиться undefinedв об'єкті, з якого вона хоче витягти дані:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name = "myName", friend = "Annie"} = person; console.log(name);//"Sarah" console.log(friend);//"Annie" 

Отже, якщо значення не визначено, змінна зберігає значення, витягнуте з об’єкта, як у випадку name. В іншому випадку він використовував значення за замовчуванням, як і раніше friend.

Ми також можемо встановити значення за замовчуванням, коли присвоюємо значення новій змінній:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name:foo = "myName", friend: bar = "Annie"} = person; console.log(foo);//"Sarah" console.log(bar);//"Annie" 

Так   nameбуло вилучено з personі призначено для іншої змінної. friend, З іншого боку, був undefinedв person, так що нова змінна bar  була присвоєно значення за замовчуванням.

Назва обчислюваної власності

Обчислювана назва властивості - це ще одна об’єктна літеральна функція, яка також працює для деструктуризації. Ви можете вказати назву властивості за допомогою виразу, якщо поставити його у квадратні дужки:

let prop = "name"; let {[prop] : foo} = {name: "Sarah", country: "Nigeria", job: "Developer"}; console.log(foo);//"Sarah" 

Поєднання масивів з об’єктами

Масиви також можна використовувати з об'єктами при деструктуризації об'єктів:

let person = {name: "Sarah", country: "Nigeria", friends: ["Annie", "Becky"]}; let {name:foo, friends: bar} = person; console.log(foo);//"Sarah" console.log(bar);//["Annie", "Becky"] 

Вкладеність в деструктуризацію об’єктів

Об'єкти також можуть бути вкладеними під час деструктуризації:

let person = { name: "Sarah", place: { country: "Nigeria", city: "Lagos" }, friends : ["Annie", "Becky"] }; let {name:foo, place: { country : bar, city : x} } = person; console.log(foo);//"Sarah" console.log(bar);//"Nigeria" 

Відпочинок в деструктуризації об’єктів

The rest syntax can also be used to pick up property keys that are not already picked up by the destructuring pattern. Those keys and their values are copied into a new object:

let person = {name: "Sarah", country: "Nigeria", job: "Developer" friends: ["Annie", "Becky"]}; let {name, friends, ...others} = person; console.log(name);//"Sarah" console.log(friends);//["Annie", "Becky"] console.log(others);// {country: "Nigeria", job: "Developer"} 

Here, the remaining properties whose keys where not part of the variable names listed were assigned to the variable others. The rest syntax here is ...others. others can be renamed to whatever variable you want.

One last thing – let's see how Object Destructing can be used in functions.

Object Destructuring and Functions

Object Destructuring can be used to assign parameters to functions:

function person({name: x, job: y} = {}) { console.log(x); } person({name: "Michelle"});//"Michelle" person();//undefined person(friend);//Error : friend is not defined 

Notice the {} on the right hand side of the parameters object. It makes it possible for us to call the function without passing any arguments. That is why we got undefined. If we remove it, we'll get an error message.

We can also assign default values to the parameters:

function person({name: x = "Sarah", job: y = "Developer"} = {}) { console.log(x); } person({name});//"Sarah" 

We can do a whole lot of things with Array and Object Destructuring as we have seen in the examples above.

Thank you for reading. :)