Въведение

И така, какво е деструктуриране в ES6? Първо, нека започнем с ES6. ES6 означава ECMAScript 6, който е стандарт на JavaScript, използван, за да гарантира, че уеб страниците могат да работят съвместно с различни уеб браузъри последователно. ES6 беше втората голяма ревизия на JavaScript през 2015 г., като първата беше ES5 през 2009 г. С ES6 дойдоха промени в JavaScript, които обикновено се виждат днес като функции със стрелки, деструктуриране, оператор за разпространение, обещания, модули, let и const и класове. Но за целите на тази статия ще се съсредоточим върху деструктурирането.

И така, какво представлява деструктурирането? Просто казано, деструктурирането е начин за разопаковане на данни от структури от данни, като елементи от масиви и свойства от обекти, и присвояването им на отделни променливи. Мислете за това като да се приберете от ваканция и да разопаковате куфара си и да приберете дрехите си обратно в гардероба, чекмеджетата и коша, или да се приберете от магазина за хранителни стоки и да разопаковате хранителните си стоки, да ги поставите в хладилника, килера и шкафовете. Това е нещо като деструктуриране, но вместо да разопаковате вашите дрехи или хранителни стоки и да ги съхранявате, вие разопаковате данните си и ги съхранявате в променливи вместо това, които са като контейнери за съхранение на данни или стойности на данни.

По същия принцип деструктурирането е наистина ефективно, когато ви позволява селективно да разопаковате вашите данни, вместо да се налага да разопаковате целия масив или обект. Така че с деструктурирането можете да присвоите на променливи само стойностите или свойствата, които искате или имате нужда. Да кажем, че сте се прибрали от ваканция и е късно, така че сте уморени и искате да си легнете. С деструктурирането ще можете да разопаковате само пижамата и четката си за зъби от куфара си, вместо да се налага да разопаковате всичко. Или да кажем, че сте се прибрали от магазина и сте били много гладни и сте искали да си направите сандвич, но не сте искали да разопаковате всичките си хранителни стоки. С деструктурирането можете да разопаковате само съставките, от които се нуждаете, за да направите своя сандвич. Имайки това предвид, нека да разгледаме някои примери за деструктуриране:

Деструктуриране на масиви

Използвайки предишния пример за приготвяне на сандвич, нека създадем масив със списък от съставки за сандвич с пуешко месо:

Не забравяйте, че деструктурирането ни позволява да разопаковаме данни от структури от данни и да ги присвоим на променливи. Така че нека разопаковаме първите три елемента в този масив и да ги присвоим на променливи и да дефинираме тези променливи, като използваме името на всяка съставка. Ще направим това, като създадем масив с тези променливи от лявата страна на знака за равенство и масива, който искаме да деструктурираме, отдясно. Не забравяйте, че когато деструктурирате масиви, редът има значение. И така, ето как ще изглежда:

Така че, ако регистрираме всяка променлива в конзолата на браузъра, ще получим следните резултати:

Но в крайна сметка можехме да дадем на тези променливи всяко име, което искахме. Също така е важно да запомните, че когато индексирате масиви, първият елемент в масива винаги има индекс 0. Така че присвояваме първия елемент в масива с индекс 0 на променливата „хляб“, вторият елемент с индекс 1, към променливата „сирене” и трети елемент, с индекс 2, към променливата „пуйка”. Преди ES6 трябваше да присвоим индивидуално тези елементи на променливи по следния начин:

Така че ES6 ни позволява да направим същото, но вместо да използваме 3 реда код (или евентуално дори повече), трябва да използваме само един, което ни спестява време и прави кода ни по-опростен и кратък. Казано по друг начин, когато става въпрос за програмиране, най-общо казано простото е по-добро от сложното, защото е по-четливо. И колкото по-четлив е вашият код, толкова по-добре.

Но какво ще стане, ако имате непоносимост към лактоза и искате да пропуснете или игнорирате сиренето заедно? В крайна сметка редът е важен, когато става въпрос за деструктуриране на масиви, но не можете просто да го пропуснете. За да направите това, можете просто да използвате запетаи като контейнер за елемента, който искате да пропуснете.

Разрушаване на обекти

Сега нека поговорим за деструктуриране на обекти. За разлика от деструктуриращите масиви, при деструктурирането на обекти редът няма значение. Това е така, защото обектите са просто колекция от наименувани стойности, известни като свойства, вместо списък с индексирани елементи като масиви.

И така, как разрушавате обекти? Първо, нека започнем със стария начин за разопаковане на свойства от обекти и присвояването им на променливи. Но този път, вместо набор от съставки за сандвич, нека създадем обект от съставки за сандвич по тип съставка:

Така че това би бил старият начин за деструктуриране на този обект:

Or,

И това е новият начин за деструктурирането му, като се използват имената на свойствата като променливи:

И ето какво ще получим, когато регистрираме променливите в конзолата на браузъра:

Отново редът няма значение. Следователно ще получите същия резултат, ако вместо това деструктурирате обекта по следния начин:

В резултат на това ще получите същия резултат, когато регистрирате променливите в конзолата.

Или, ако искате да присвоите свойства на променливи с различни имена, можете да ги присвоите отново по следния начин:

Записването на новите променливи в конзолата ще ви даде същия резултат както преди.

Но какво ще стане, ако имате обект, съдържащ друг вложен обект или масив, както обикновено се случва?

Как бихте осъществили достъп и деструктурирали тези вложени свойства? За да направите това, ще трябва да посочите свойството, както обикновено, и след това да използвате двоеточие и фигурни скоби, за да деструктурирате отново вложеното свойство:

Това е резултатът, когато променливите са влезли в конзолата: