Як використовувати деструктуризацію в JavaScript для написання більш чистого та потужного коду

Іноді доводиться руйнувати, щоб побудувати щось нове.-Містборн: Герой століть

ES6 представив нам одну з найочікуваніших функцій JavaScript: деструктурування. Як концепція, деструктуризація не є новою або новаторською, і деякі мови вже мали деструктуризацію (??) задовго до цього. Але це була дуже потрібна і затребувана функція в JavaScript.

Деструктуризація - це процес руйнування структури. У контексті програмування структури є структурами даних, і деструктуризація цих структур даних означає розпакування окремих значень зі структури даних. У JavaScript деструктуризація може бути застосована до об'єкта або масиву.

Деструктуризація робить, ламає все ... яка нам користь від цього ??

Перш ніж відповісти на це питання, давайте формально визначимо деструктуризацію. МДН на допомогу!

Призначення деструктурірующего синтаксис є виразом JavaScript , який дозволяє розпаковувати значення з масиву або властивостей від об'єктів, в різні змінні. -MDN

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

Масиви

Зразок 1:

Коли я вперше побачив цей простий шматок коду, мене спантеличило. Я не зрозумів, що сталося. Якщо ти такий, як я, дозволь мені спробувати пояснити.

У рядку 1 визначаємо 2 змінні aта b. У наступному рядку обидві змінні знаходяться всередині масиву ліворуч, який, у свою чергу, прирівнюється до фактичного масиву з боку поїздки. У наступних рядках ми друкуємо значення a& bі отримуємо відповідно 7 і 8, які були елементами в масиві RHS. Магія, що відбувається в 2 рядку, називається деструктуризацією.

LHS деструктурує RHS, а значення, отримані від розпакування елементів, присвоюються змінним по порядку.

Але чому LHS всередині масиву ???

Призначення деструктуризації використовує подібний синтаксис для LHS порівняно з RHS, щоб визначити, які значення розпаковувати з вихідної змінної.

Зразок 2:

Тут ми ввели leftoutв код ще одну змінну . У нас є 2 різні типи використання leftoutкоду.

  • [a,b,leftout]-> Це призначає третій елемент у масиві to left, як очікувалося.
  • [a,b,…leftout]-> Це дає перші 2 значення toaa ndb відповідно, а решта масиву призначається he leftoзмінній t ut.

Рішення полягає в операторі. Цей оператор згортає всі залишилися аргументи ( rest ) в один масив. В останньому пункті перші 2 елементи масиву присвоюються a& bвідповідно, а решта аргументів згортаються в масив (можливо, реструктуризація ??) і присвоюються leftoutзмінній. Ми можемо перевірити те саме, переглянувши результати.

Об'єкти

Зразок 1:

Деструктуризація працює однаково як для об’єктів, так і для масивів. Об'єкт у LHS має властивості a&, bякі присвоюються відповідно властивостям a& bоб'єкта RHS. Ми отримуємо 1 і 2 відповідно, друкуючи їх.

Одне, на що слід звернути увагу ( якщо у вас є ), це незначна зміна синтаксису ( тепер у вас є ).

Під час деструктуризації об’єктів цілі LHS та RHS загорнуті всередину ()

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

Насправді відбувається те, що вкладання чогось у фігурні дужки {}плутає JavaScript, тому він вважає його блоком, а не Об’єктом. Через це він шукає декларацію для блоку ( оголошення функції ), тому ми вкладаємо код всередину (). Це робить його виразом, а не блоком, і ми отримуємо свої результати.

Зразок 2:

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

Для чого використовується деструктуризація?

Як видно з наведених прикладів, ми тепер знаємо важливість деструктуризації. Існує багато застосувань та різних випадків використання деструктуризації як для Об’єктів, так і для масивів. Ми спробуємо деякі з них. ( PS - приклади дійсні як для об’єктів, так і для масивів, якщо не зазначено інше. )

Призначення змінних

У вищенаведених прикладах ми вже бачили, як призначаються змінні, тож давайте подивимось на інший.

У цьому прикладі вже створений масив безпосередньо призначається для деструктуризації. Тим не менше значенням присвоюються змінні.

Те саме стосується і Об’єкта.

Значення за замовчуванням

Іноді може трапитися так, що ми визначаємо nкількість змінних для отримання значень від деструктуризації, але масив / об'єкт може мати лише n-xелементи. У цьому випадку xбудуть призначені змінні undefined.

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

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

Обмін

Обмін - це процес обміну значеннями між 2 або більше змінними. Стандартним способом здійснення обміну є використання тимчасової змінної або використання XOR. У JavaScript те саме можна зробити за допомогою деструктуризації.

Поміняти місцями за допомогою змінної temp. Код є зрозумілим.

Використовуючи деструктуризацію, ми просто міняємо місцями елементи і Voilà! Підкачка зроблена.

Ігнорування значень

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

Тут ми бачимо, що ми проігнорували середнє значення, не призначивши його жодній змінній, тим самим позбавивши нас клопоту.

Непряме призначення повернення функції

Тут ми бачимо, що функція x повертає масив. У рядку 4, де ми деструктуруємо, ми надаємо виклик функції, який повертає масив, а не масив безпосередньо. Це робить код охайним і легким для читання та розуміння.

Присвоєння новим змінним

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

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

Деструктуризація вкладених об’єктів та масивів

Як ми бачимо, ці дані - це об'єкт, що має властивість, що називається location, яке, у свою чергу, містить масив, елементи якого є об'єктами.

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

Отже, ми створили об’єкт під назвою obj, який містить ту саму структуру, що і об’єкт даних, а значення, які ми хочемо розпакувати, надаються як змінні (mylatitude, mylongitude, mycity). Вони, у свою чергу, прирівнюються до масиву даних (так само, як синтаксис деструктуризації раніше). Коли друкуються змінні, ми отримуємо відповідні значення.

Деструктуризація за допомогою циклу for-of

У наведеному вище фрагменті коду ми маємо масив об’єктів people, властивості якого, в свою чергу, містять об’єкт (people> object> family). Тепер ми хочемо розпакувати деякі значення з об'єкта за допомогою циклу for..of.

У циклі ми призначили змінну об’єкта з тією ж структурою, що і в масиві people, ігноруючи нам не потрібні значення. Ми призначили змінні n & m відповідно властивостям імені та матері, оскільки саме ці значення ми хочемо розпакувати. Усередині циклу ми друкуємо змінні і отримуємо необхідні значення.

Велика картина.

Ви повинні використовувати деструктуризацію у своєму коді або практикувати його, щоб насправді повісити його. У прикладах це здається простим, оскільки приклади лише для того, щоб ви зрозуміли основи. При складних / багаторазових операціях (зменшення ()!) Деструктуризація може швидко заплутати, чого ми не хочемо!

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

JavaScript має багато операцій як для вилучення, так і для побудови даних, але всі вони працюють над одним елементом за раз.

Для побудови

Для вилучення (все ще по одному)

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

До введення ES6 не було механізму вилучення всіх даних одночасно. Ось деструктура справді засяяла. Це дозволяє витягувати з об’єкта кілька властивостей. Ми бачили це на наведених вище прикладах.

Підводні камені

Є лише один, якого я можу придумати, і ми це обговорили:

  • Заява не повинна починатися з фігурної дужки {

Висновок

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