Home-theater-designers
Mūsdienu JavaScript ir daudz jaunu funkciju, kas atvieglo koda rakstīšanu vienkāršā un strukturētā veidā. Viena no parocīgajām mūsdienu funkcijām, kas pieejama ES6+, ir masīvu un objektu iznīcināšana.
JavaScript ietvari, piemēram, React.js un Angular, veicina šīs metodes izmantošanu. Tāpēc ir svarīgi saprast, kas ir destrukturizācija un kā to izmantot, rakstot kodu.
DIENAS VIDEO MAKEUSEOF
Kas ir objektu un masīvu iznīcināšana JavaScript?
Destrukturēšana JavaScript attiecas uz vērtību izpakošanas procesu no masīva vai objekta. Tas nodrošina kodolīgāku veidu, kā iegūt vērtības no masīviem vai objektiem bez smagas slodzes, ja jūs interesē atsevišķi masīva vienumi vai vērtības objektā.
Tas ir noderīgi arī, apstrādājot atgriežamās vērtības no sarežģītas funkcijas vai izteiksmes. Šis jēdziens ir viens no paraugprakse, kas jums jāievēro, rakstot React kodu .
Kā iznīcināt masīvus
Šeit ir koda paraugs, lai iegūtu priekšstatu par masīva iznīcināšanu:
const arr = [1, 2];
const [a, b] = arr;
console.log(a) // prints 1 on the console
console.log(b) // prints 2 on the console
Šis kods izmanto destrukturizāciju, lai piešķirtu vērtības no arr —1 un 2 — mainīgajiem a un b , attiecīgi. Šī ir iznīcināšanas pamatkoncepcija. Jums ir masīvs vai objekts labajā pusē, un jūs izsaiņojat vienumus un piešķirat tos atsevišķiem mainīgajiem kreisajā pusē.
Zem pārsega JavaScript kopē vērtības no arr un piešķir tos mainīgajiem lielumiem kreisajā pusē šādi:
const arr = [1,2];
const a = arr[0];
const b = arr[1];
Kā redzat, destrukturēšana ir kodolīgāks veids, kā to izdarīt, atšķirībā no objekta vai iekavas apzīmējuma izmantošanas. Tomēr šī sintakse, visticamāk, būs noderīga, strādājot ar sarežģītiem masīviem vai funkcijām, kas atgriež masīvus vai virknes.
Pārbaudiet tālāk norādīto koda paraugu:
const [day, month, date, year, time, timezone] = Date().split(' ')
// Calling Date() returns the current date in the format:
// Mon Feb 20 2023 13:07:29 GMT+0000
console.log(day) // prints Mon
console.log(month) // prints Feb
console.log(date) // prints 20
Šajā koda paraugā mēs izveidojam jaunu virkni ar pašreizējo datumu, zvanot Datums() . Tālāk mēs izmantojam sadalīt () , a JavaScript virknes metode , lai atdalītu vienumus virknē, izmantojot atstarpi kā atdalītāju. sadalīt('') atgriež masīvu, un mēs izmantojam iznīcināšanu, lai piešķirtu vērtības atsevišķiem mainīgajiem.
Atcerieties: ja jūsu masīvā ir vairāk vienumu, nekā jūs izsaiņojat, JavaScript ignorēs papildu vienumus.
const arr = [1, 2, 3, 4];
const [a, b] = arr;
console.log(a) // prints 1
console.log(b) // prints 2
// values 3 and 4 are not assigned to any variable; they are ignored
Šādā gadījumā, ja vēlaties saglabāt atlikušos vienumus mainīgajā, izmantojiet atpūtas parametru, piemēram:
const arr = [1, 2, 3, 4];
const [a, b, ...rest] = arr;
console.log(rest) // prints [3,4]
Dažreiz jums var nerūpēties par konkrētu priekšmetu. JavaScript iznīcināšanas modelis ļauj arī izlaist noteiktus elementus, izmantojot tukšu komatu.
const arr = [1, 2, 3, 4];
const [a, , c] = arr;
console.log(c) // prints 3
Iepriekš minētais kods izmanto tukšo vietu, lai ignorētu vērtību 2 masīvā arr . Tā vietā, lai piešķirtu vērtību 2 uz mainīgo c , tas pāriet uz nākamo masīva vienumu. Tas arī ignorē ceturto vērtību, jo tajā nav norādīts mainīgais, kurā to saglabāt.
Turpretim, ja jums ir nepieciešams mazāk preču, nekā jūs izsaiņojat, process piešķirs nenoteikts vērtību šiem papildu mainīgajiem.
const arr = [1];
const [a, b] = arr;
console.log(a) // prints 1
console.log(b) // prints undefined
Lai novērstu to, ka mainīgie netiek definēti, varat iestatīt noklusējuma vērtības, ja neesat pārliecināts par masīva garumu, kā norādīts tālāk (noklusējuma vērtību piešķiršana nav obligāta):
ko dara viedais televizors
const arr = [1];
const [a = '10', b = 'not provided'] = arr;
console.log(a) // prints 1
console.log(b) // prints "not provided"
Šī destrukturizācija piešķir vērtību 1 uz mainīgo a , pārrakstot tā noklusējuma vērtību. Mainīgs b saglabā savu noklusējuma vērtību, jo vērtība nav norādīta.
Kā iznīcināt objektus
Objektu iznīcināšana nemaz tik ļoti neatšķiras no masīviem. Vienīgā atšķirība ir tā, ka masīvi ir atkārtojami, bet objekti nav, kā rezultātā darbības tiek veiktas nedaudz savādāk.
Strādājot ar objektiem, mainīgie, kas atrodas piešķiršanas operatora kreisajā pusē, tiek inicializēti tāpat kā objekti:
const person = {name: 'Alvin', age: 10, height: 1};
const {name, age, height} = person;
console.log(name) // prints 'Alvin'
console.log(height) // prints 1
No koda mēs izmantojam rekvizītu nosaukumus no persona objektu. Tomēr objektā nav jāizmanto precīzi rekvizītu nosaukumi. Varat destrukturēt un saglabāt vērtības dažādos mainīgo nosaukumos šādi:
const person = {name: 'Alvin', age: 10, height: 1};
const {name: firstName, age: years, height: currentHeight} = person;
console.log(firstName) // prints 'Alvin'
console.log(currentHeight) // prints 1
Vispirms norādiet rekvizīta vērtību, kuru vēlaties iznīcināt, pēc tam norādiet mainīgā nosaukumu, ko izmantosit, lai saglabātu vērtību aiz kola. Un tāpat kā masīvi, neeksistējoša īpašuma nosaukuma iznīcināšana būs nenoteikts .
Lai to paveiktu, varat līdzīgi norādīt noklusējuma vērtības, ja rekvizīta nosaukums, kuru vēlaties piešķirt mainīgajam, nav pieejams:
const person = {name: 'Alvin', age: 10, height: 1};
const {name, age, height, location='Worldwide'} = person;
console.log(name) // prints 'Alvin'
console.log(location) // prints 'Worldwide'
Kreisajā pusē esošo mainīgo secībai objektam nav nozīmes, jo objekti glabā vērtības atslēgu un vērtību pāros. Tādējādi šāds kods dos tādus pašus rezultātus:
const person = {name: 'Alvin', age: 10, height: 1};
const {age, height, name} = person;
console.log(name) // prints 'Alvin'
console.log(height) // prints 1
Visbeidzot, līdzīgi kā masīviem, varat arī izmantot pārējo parametru, lai iznīcinātu vairākas vērtības vienā mainīgajā, piemēram:
const person = {name: 'Alvin', age: 10, height: 1};
const {name, ...rest} = person;
console.log(name) // prints 'Alvin'
console.log(rest) // prints { age: 10, height: 1 }
Vienkārši ņemiet vērā, ka pārējā parametram vienmēr jābūt pēdējam. Pretējā gadījumā JavaScript radīs izņēmumu.
Uzlabojiet sava koda kvalitāti, izmantojot JavaScript iznīcināšanu
Javascript modernās funkcijas, piemēram, iznīcināšana, ļauj rakstīt viegli lasāmu kodu. Izmantojot destrukturizāciju, varat ātri izpakot vērtības no masīviem un objektiem. Destrukturēšana var izrādīties noderīga arī citās situācijās, piemēram, divu mainīgo vērtību apmaiņā. Cerams, ka tagad jūs saprotat, ko JavaScript nozīmē destrukturizācija, un varēsit to izmantot, rakstot kodu.