Савремени ЈаваСцрипт има много нових функција које олакшавају писање кода на једноставан и структуриран начин. Једна од практичних модерних функција доступних у ЕС6+ је деструктурирање низова и објеката.
ЈаваСцрипт оквири попут Реацт.јс и Ангулар подстичу употребу ове технике. Зато је неопходно разумети шта је деструктурирање и како га користити док пишете код.
Шта је деструктурирање објеката и низа у ЈаваСцрипт-у?
Деструктурирање у ЈаваСцрипт-у се односи на процес распакивања вредности из низа или објекта. Пружа сажетији начин добијања вредности из низова или објеката без тешког подизања када сте заинтересовани за појединачне ставке низа или вредности у објекту.
Такође је корисно када обрађујете повратне вредности из сложене функције или израза. Овај концепт је један од најбоље праксе које треба да пратите док пишете Реацт код.
Како деструктурирати низове
Ево примера кода да бисте стекли осећај деструктурирања низа:
конст арр = [1, 2];
конст [а, б] = арр;
конзола.лог (а) // штампа 1 на конзоли
конзола.лог (б) // штампа 2 на конзоли
Овај код користи деструктурирање за додељивање вредности из арр—1 и 2—на променљиве а и б, редом. Ово је основни концепт иза деструктурирања. Имате низ или објекат на десној страни, а ви распакујете ставке и додељујете их појединачним променљивим на левој страни.
Испод хаубе, ЈаваСцрипт копира вредности из арр и додељује их променљивама са леве стране на следећи начин:
конст арр = [1,2];
конст а = арр[0];
конст б = арр[1];
Као што видите, деструктурирање је сажетији начин да се ово уради, за разлику од употребе нотације објекта или заграде. Међутим, ова синтакса ће вероватно бити корисна када радите са сложеним низовима или функцијама које враћају низове или стрингове.
Проверите пример кода у наставку:
конст [дан, месец, датум, година, време, временска зона] = Датум().разделити(' ')
// Позивање Дате() враћа тренутни датум у формату:
// Пон, 20. фебруар 2023. 13:07:29 ГМТ+0000
конзола.лог (дан) // штампа пон
конзола.лог (месец) // штампа феб
конзола.лог (датум) // штампа 20
У овом примеру кода, креирамо нови стринг са тренутним датумом позивањем Датум(). Следеће, користимо разделити(), а ЈаваСцрипт стринг метода, да бисте одвојили ставке у низу користећи размак као сепаратор. разделити(' ') враћа низ, а ми користимо деструктурирање да доделимо вредности појединачним променљивим.
Запамтите да ако ваш низ садржи више ставки него што их распакујете, ЈаваСцрипт ће занемарити додатне ставке.
конст арр = [1, 2, 3, 4];
конст [а, б] = арр;
конзола.лог (а) // штампа 1
конзола.лог (б) // штампа 2
// вредности 3 и 4 нису додељене ниједној променљивој; игноришу се
У овом случају, ако желите да сачувате преостале ставке у променљивој, користите параметар рест овако:
конст арр = [1, 2, 3, 4];
конст [а, б,... одмор] = арр;
конзола.лог (одмор) // штампа [3,4]
Понекад вам можда није стало до одређене ставке. ЈаваСцрипт-ов образац деструктурирања вам такође омогућава да прескочите одређене елементе коришћењем празног зареза.
конст арр = [1, 2, 3, 4];
конст [а,, ц] = арр;
конзола.лог (ц) // штампа 3
Код изнад користи празан простор да игнорише вредност 2 у низу арр. Уместо да додељује вредност 2 на променљиву ц, прескаче на следећу ставку у низу. Такође занемарује четврту вредност јер не наводи променљиву у коју ће је чувати.
Насупрот томе, ако вам треба мање ставки него што их распакујете, процес ће доделити недефинисан вредност за те додатне променљиве.
конст арр = [1];
конст [а, б] = арр;
конзола.лог (а) // штампа 1
конзола.лог (б) // исписује недефинисано
Да бисте спречили да променљиве буду недефинисане, можете да подесите подразумеване вредности ако нисте сигурни у дужину низа на следећи начин (додељивање подразумеваних вредности није услов):
конст арр = [1];
конст [а = '10', б = 'није обезбеђено'] = арр;
конзола.лог (а) // штампа 1
конзола.лог (б) // штампа "није обезбеђено"
Ово деструктурирање додељује вредност 1 на променљиву а, замењујући његову подразумевану вредност. Променљива б задржава своју подразумевану вредност јер вредност није дата.
Како деструктурирати објекте
Деструктурирање објеката се не разликује толико од низова. Једина разлика је у томе што се низови могу понављати, а објекти нису, што резултира мало другачијим начином рада.
Када радите са објектима, променљиве на левој страни оператора додељивања се такође иницијализују као објекти:
конст особа = {име: 'Алвин', старости: 10, висина: 1};
конст {име, старост, висина} = особа;
конзола.лог (име) // штампа 'Алвин'
конзола.лог (висина) // штампа 1
Из кода користимо имена својстава из особа објекат. Међутим, не морате да користите тачна имена својстава у објекту. Можете деструктурирати и ускладиштити вредности у различитим именима променљивих на следећи начин:
конст особа = {име: 'Алвин', старости: 10, висина: 1};
конст {име: име, старости: године, висина: цуррентХеигхт} = особа;
конзола.лог (име) // штампа 'Алвин'
конзола.лог (цуррентХеигхт) // штампа 1
Почињете тако што ћете навести вредност својства коју желите да деструктурирате, а затим одредите име променљиве које ћете користити за чување вредности после двотачке. И као низови, деструктурирање имена својства које не постоји биће недефинисан.
Да бисте ово решили, можете на сличан начин одредити подразумеване вредности у случају да име својства које желите да доделите променљивој није доступно:
конст особа = {име: 'Алвин', старости: 10, висина: 1};
конст {име, старост, висина, локација='Светски'} = особа;
конзола.лог (име) // штампа 'Алвин'
конзола.лог (локација) // штампа 'Ворлдвиде'
Редослед променљивих на левој страни није битан за објекат пошто објекти чувају вредности у паровима кључ-вредност. Као такав, следећи код ће дати исте резултате:
конст особа = {име: 'Алвин', старости: 10, висина: 1};
конст {старост, висина, име} = особа;
конзола.лог (име) // штампа 'Алвин'
конзола.лог (висина) // штампа 1
На крају, слично низовима, можете користити и параметар рест да деструктурирате неколико вредности у једној променљивој на следећи начин:
конст особа = {име: 'Алвин', старости: 10, висина: 1};
конст {име, ...одмор} = особа;
конзола.лог (име) // штампа 'Алвин'
конзола.лог (одмор) // штампа { старост: 10, висина: 1 }
Само имајте на уму да параметар рест увек мора бити последњи. У супротном, ЈаваСцрипт ће избацити изузетак.
Побољшајте квалитет кода помоћу ЈаваСцрипт деструктурирања
Модерне функције Јавасцрипт-а, попут деструктурирања, омогућавају вам да пишете врло читљив код. Користећи деструктурирање, можете брзо распаковати вредности из низова и објеката. Деструктурирање се такође може показати корисним у другим ситуацијама, као што је замена вредности две променљиве. Надамо се да сада разумете шта значи деструктурирање у ЈаваСцрипт-у и да можете да га користите док пишете код.
