Како користити деструктурирање у ЈаваСцрипт-у за писање чишћег и моћнијег кода

Понекад морате уништити да бисте изградили нешто ново.-Мистборн: Јунак векова

ЕС6 нас је упознао са једном од најочекиванијих ЈаваСцрипт функција: деструктурирање. Као концепт, деструктурирање није ново или револуционарно, а неки језици су већ имали деструктурирање (??) много раније. Али то је била преко потребна и тражена функција у ЈаваСцрипт-у.

Деструктурирање је процес разбијања структуре. У контексту програмирања, структуре су структуре података, а деструктурирање тих структура података значи распакивање појединачних вредности из структуре података. У ЈаваСцрипт-у, деструктурирање се може применити на објекат или низ.

Деструктурирање чини, разбија све ... каква нам је корист од тога ??

Пре него што одговоримо на то питање, имајмо формалну дефиницију Деструктурирања. МДН у помоћ!

Уништењу Задатак Синтакса је израз ЈаваСцрипт да омогућава распакујете вредностима низова, или производима из предмета, у различите променљиве. -МДН

Погледајмо неке примере да бисмо боље разумели основе деструктурирања.

Низови

Пример 1:

Када сам први пут видео овај једноставан део кода, био сам збуњен. Нисам схватио шта се догодило. Ако си такав какав сам био, пусти ме да покушам да објасним.

У 1. реду дефинишемо 2 променљиве aи b. У следећем реду обе променљиве су унутар низа на левој страни који је заузврат изједначен са стварним низом на страни вожње. У следећим редовима исписујемо вредности a& bи добивамо 7 односно 8 који су били елементи у РХС пољу. Магија која се дешава у 2. реду назива се деструктурирање.

ЛХС деструктуира РХС и вредности добијене распакивањем елемената додељују се променљивим редом.

Али зашто је ЛХС унутар низа ???

Задатак за деструктурирање користи сличну синтаксу на ЛХС у поређењу са РХС да би дефинисао које вредности треба распаковати из променљиве извора.

Пример 2:

Овде смо сада увели још једну променљиву leftoutу код. У leftoutкоду имамо 2 различите врсте употребе .

  • [a,b,leftout]-&гт; Ово додељује трећи елемент у низу to leftкако се очекивало.
  • [a,b,…leftout]-&гт; Ово даје прве 2 вредности tоаа nдб, а остатак низа се додељује he leftoпроменљивој т ут.

Решење лежи у оператеру. Овај оператор сажима све преостале аргументе ( остатак ) у један низ. У последњој тачки, прва 2 елемента низа су додељена a& bреспективно, а остатак аргумената је сажет у низ (можда реструктурирање ??) и додељен leftoutпроменљивој. То можемо потврдити гледајући излаз.

Предмети

Пример 1:

Деструктурирање једнако функционише и за објекте и за низове. Објекат у ЛХС има својства a& bкоја се додељују својствима a& bРХС објекта. Добијамо 1 и 2 њиховим штампањем.

Једна ствар коју треба приметити ( ако имате ) је да је дошло до благе промене синтаксе ( сада јесте ).

У објектном деструктурирању, цео ЛХС и РХС су умотани унутра ( )

Можемо видети грешку коју добијемо када је не умотамо унутра ().Каже да се очекује изјава изјаве.

Оно што се заправо догађа је да затварање нечега у витичасте заграде {}збуњује ЈаваСцрипт тако да га сматра блоком, а не објектом. Због тога тражи декларацију за блок ( декларација функције ), па код прилажемо унутра (). То га чини изразом, а не блоком, и ми добијамо своје резултате.

Пример 2:

Опет restоператер. Ради исто као и у низовима, осим што су овог пута остале вредности скупљене унутар објекта јер структуру која ће се користити дефинише ЛХС.

За шта се користи деструктура?

Као што се види из горњих примера, сада знамо важност деструктурирања. Постоји пуно употреба и различитих случајева како се деструктурирање може користити и за објекте и за низове. Пробаћемо неке од њих. ( ПС - примери важе и за објекте и за низове, осим ако није другачије назначено. )

Додељивање променљивих

Већ смо видели како су променљиве додељене у горњим примерима, па погледајмо још једну.

У овом примеру је већ створени низ директно додељен за деструктурирање. Вредности су ипак додељене променљивим.

Исто важи и за Објекат.

Дефаулт вредности

Понекад се може догодити да дефинишемо nброј променљивих да бисмо добили вредности из деструктурирања, али низ / објекат може имати само n-xелементе. У овом случају xбиће додељене променљиве undefined.

Можемо видети да bје то недефинисано, јер низ једноставно нема толико елемената за деструктурирање и додељивање сваке променљиве.

Рјешење за то је давање задатих вриједности варијаблама, па ако нема довољно елемената, варијабле узимају задате вриједности умјесто да иду недефинисане.

Замјена

Замјена је поступак размјене вриједности између 2 или више варијабли. Стандардни начин обављања замене је или коришћење привремене променљиве или коришћење КСОР-а. У ЈаваСцрипт-у исто се може урадити помоћу деструктурирања.

Замените помоћу променљиве темп. Код је саморазумљив.

Користећи деструктурирање, само замењујемо положај елемената и Воила! Замјена готова.

Занемаривање вредности

Можемо ухватити и користити само вредности које су потребне и одбити или занемарити непотребне вредности.

Овде можемо видети да смо занемарили средњу вредност не додељујући је било којој променљивој чиме смо уштедели гњаваже.

Индиректна додела повратка функције

Овде можемо видети да функција к враћа низ. На линији 4 где деструктујемо, пружамо позив функције који враћа низ, а не низ директно. То чини код уредним и лаким за читање и разумевање.

Додељивање новим променљивим

Својства се могу распаковати из објекта и доделити променљивој која се разликује од имена својства објекта.

Можемо видети да су вредности својстава такође променљиве којима се вредности додељују деструктурирањем.

Деструктурирање угнежђених објеката и низова

Као што видимо, тај податак је објекат који има својство које се назива локација које заузврат садржи низ чији су елементи објекти.

Деструктурирањем морамо добити вредности свих својстава присутних унутар објекта унутар низа локација.

Тако смо креирали објекат под називом обј који садржи исту структуру као и објекат података, а вредности које желимо да распакујемо су дате као променљиве (милатитуда, моја дужина, мој град). Они су пак изједначени са низом података (исто као синтакса деструктурирања раније). Када се променљиве штампају, добијамо одговарајуће вредности.

Деструктурирање са фор-оф лооп

У горњем исечку кода имамо низ објеката људи чија својства заузврат садрже објекат (људи> објекат> породица). Сада желимо да распакујемо неке вредности из објекта помоћу петље фор..оф.

У петљи смо доделили променљиву објекта, са истом структуром као у низу људи, занемарујући вредности које нам нису потребне. Имена и матична својства доделили смо променљивим н & м, јер су то вредности које желимо да распакујемо. Унутар петље исписујемо променљиве и добијамо потребне вредности.

Целина.

Морате да користите деструктурирање у свом коду или да га вежбате да бисте га заиста ухватили у коштац. У примерима се чини једноставно, јер су примери само да бисте разумели основе. Са сложеним / вишеструким операцијама (смањите ()!), Уклањање структуре може брзо да збуни, што ми не желимо!

Штавише, можда такође мислите да је деструктурирање само шећерна синтакса за обављање скупа задатака (као што променљивим можемо дати вредност сваког елемента из низа помоћу фор петље). До неке мере можемо рећи да је то шећер, али када погледамо ширу слику „Велика слика“, схватићемо зашто деструктурирање има већу вредност од пуког минимизатора кода.

ЈаваСцрипт има много операција како за издвајање, тако и за конструкцију података, али све оне истовремено раде на једном елементу.

За конструисање

За вађење (и даље једно по једно)

Иако постоји синтакса за конструкцију више својстава одједном, али се може користити само у време додељивања - не може се користити за промену постојећег објекта.

Пре увођења ЕС6 није постојао механизам за издвајање свих података одједном. Ту је заиста дошло до изражаја деструктурирање. Омогућава вам извлачење више својстава из објекта. То смо видели у горњим примерима.

Замке

Јединог се могу сетити и о њему смо разговарали:

  • Изјава не би требало да започиње коврџавом заградом {

Закључак

Покушао сам да поједноставим деструктурирање демонстрирајући што више случајева употребе деструктурирања. Надам се да вам је појаснио овај концепт. Сада можете користити деструктурирање за писање моћног и чистог кода.