Модерният JavaScript има много нови функции, които улесняват писането на код по прост и структуриран начин. Една от удобните съвременни функции, налични в ES6+, е деструктурирането на масиви и обекти.
JavaScript рамки като React.js и Angular насърчават използването на тази техника. Така че е от съществено значение да разберете какво представлява деструктурирането и как да го използвате, докато пишете код.
Какво представлява деструктурирането на обекти и масиви в JavaScript?
Деструктурирането в JavaScript се отнася до процеса на разопаковане на стойности от масив или обект. Той осигурява по-сбит начин за получаване на стойности от масиви или обекти без тежко повдигане, когато се интересувате от отделни елементи от масив или стойности в обект.
Също така е полезно при обработка на връщащи се стойности от сложна функция или израз. Тази концепция е една от най-добрите практики, които трябва да следвате, докато пишете код на React.
Как да деструктурираме масиви
Ето примерен код, за да добиете представа за деструктурирането на масива:
конст arr = [1, 2];
конст [a, b] = arr;
конзола.log (a) // отпечатва 1 на конзолата
конзола.log (б) // отпечатва 2 на конзолата
Този код използва деструктуриране, за да присвои стойностите от обр—1 и 2—към променливите а и b, съответно. Това е основната концепция зад деструктурирането. Имате масив или обект от дясната страна и разопаковате елементи и ги присвоявате на отделни променливи от лявата страна.
Под капака JavaScript копира стойности от обр и ги присвоява на променливите от лявата страна така:
конст arr = [1,2];
конст a = arr[0];
конст b = arr[1];
Както можете да видите, деструктурирането е по-сбит начин за извършване на това, за разлика от използването на нотация обект или скоби. Този синтаксис обаче вероятно ще бъде полезен при работа със сложни масиви или функции, които връщат масиви или низове.
Проверете примерния код по-долу:
конст [ден, месец, дата, година, час, часова зона] = Дата().split(' ')
// Извикването на Date() връща текущата дата във формат:
// понеделник, 20 февруари 2023 г. 13:07:29 GMT+0000
конзола.log (ден) // отпечатва Mon
конзола.log (месец) // отпечатва февр
конзола.log (дата) // отпечатва 20
В този примерен код създаваме нов низ с текущата дата чрез извикване Дата(). След това използваме разделяне (), а JavaScript метод с низове, за да разделите елементи в низа, като използвате интервал като разделител. разделяне (' ') връща масив и ние използваме деструктуриране, за да присвоим стойностите на отделни променливи.
Не забравяйте, че ако вашият масив съдържа повече елементи, отколкото разопаковате, JavaScript ще игнорира допълнителните елементи.
конст arr = [1, 2, 3, 4];
конст [a, b] = arr;
конзола.log (a) // отпечатва 1
конзола.log (б) // отпечатва 2
// стойности 3 и 4 не се присвояват на нито една променлива; те се игнорират
В този случай, ако искате да съхраните останалите елементи в променлива, използвайте остатъчен параметър по следния начин:
конст arr = [1, 2, 3, 4];
конст [a, b, ...почивка] = arr;
конзола.log (почивка) // отпечатва [3,4]
Понякога може да не ви е грижа за конкретен артикул. Моделът за деструктуриране на JavaScript също ви позволява да пропускате определени елементи, като използвате празна запетая.
конст arr = [1, 2, 3, 4];
конст [a,, c] = arr;
конзола.log (c) // отпечатва 3
Кодът по-горе използва празното пространство, за да игнорира стойността 2 в масива обр. Вместо да приписва стойност 2 към променлива ° С, той прескача до следващия елемент в масива. Той също така игнорира четвъртата стойност, защото не указва променлива, в която да я съхранява.
За разлика от това, ако имате нужда от по-малко елементи, отколкото разопаковате, процесът ще присвои недефиниран стойност на тези допълнителни променливи.
конст arr = [1];
конст [a, b] = arr;
конзола.log (a) // отпечатва 1
конзола.log (б) // отпечатва undefined
За да предотвратите недефинираните променливи, можете да зададете стойности по подразбиране, ако не сте сигурни за дължината на масива, както следва (задаването на стойности по подразбиране не е изискване):
конст arr = [1];
конст [a = '10', b = "не е предоставено"] = arr;
конзола.log (a) // отпечатва 1
конзола.log (б) // отпечатва "не е предоставено"
Това деструктуриране определя стойността 1 към променлива а, като презаписва стойността си по подразбиране. Променлива b запазва стойността си по подразбиране, защото не е предоставена стойност.
Как да разрушаваме обекти
Деструктурирането на обекти не е толкова различно от масивите. Единствената разлика е, че масивите могат да се повтарят, а обектите не, което води до малко по-различен начин на правене на нещата.
Когато работите с обекти, променливите от лявата страна на оператора за присвояване също се инициализират като обекти:
конст човек = {име: "Алвин", възраст: 10, височина: 1};
конст {име, възраст, височина} = лице;
конзола.log (име) // отпечатва 'Alvin'
конзола.log (височина) // отпечатва 1
От кода използваме имена на свойства от човек обект. Не е нужно обаче да използвате точните имена на свойства в обекта. Можете да деструктурирате и съхранявате стойностите в различни имена на променливи, както следва:
конст човек = {име: "Алвин", възраст: 10, височина: 1};
конст {име: първо име, възраст: години, височина: currentHeight} = лице;
конзола.log (първо име) // отпечатва 'Alvin'
конзола.log (currentHeight) // отпечатва 1
Започвате с посочване на стойността на свойството, която искате да деструктурирате, след което посочвате името на променливата, която ще използвате за съхраняване на стойността след двоеточие. И подобно на масивите, деструктурирането на име на свойство, което не съществува, ще бъде недефиниран.
За да се справите с това, можете по подобен начин да посочите стойности по подразбиране, в случай че името на свойството, което искате да присвоите на променлива, не е налично:
конст човек = {име: "Алвин", възраст: 10, височина: 1};
конст {име, възраст, височина, местоположение='В световен мащаб'} = лице;
конзола.log (име) // отпечатва 'Alvin'
конзола.log (местоположение) // отпечатва 'Worldwide'
Редът на променливите от лявата страна няма значение за даден обект, тъй като обектите съхраняват стойности в двойки ключ-стойност. Като такъв, следният код ще даде същите резултати:
конст човек = {име: "Алвин", възраст: 10, височина: 1};
конст {възраст, височина, име} = лице;
конзола.log (име) // отпечатва 'Alvin'
конзола.log (височина) // отпечатва 1
И накрая, подобно на масивите, можете също да използвате параметъра rest, за да деструктурирате няколко стойности в една променлива по следния начин:
конст човек = {име: "Алвин", възраст: 10, височина: 1};
конст {име, ...почивка} = човек;
конзола.log (име) // отпечатва 'Alvin'
конзола.log (почивка) // отпечатва { възраст: 10, височина: 1 }
Само имайте предвид, че параметърът rest трябва винаги да е последен. В противен случай JavaScript ще хвърли изключение.
Подобрете качеството на вашия код с деструктурирането на JavaScript
Съвременните функции на Javascript, като деструктуриране, ви позволяват да пишете код с висока четливост. Използвайки деструктуриране, можете бързо да разопаковате стойности от масиви и обекти. Деструктурирането може да се окаже полезно и в други ситуации, като размяна на стойности на две променливи. Надяваме се, че вече разбирате какво означава деструктурирането в JavaScript и можете да го използвате, докато пишете код.