Massiivi ja objektide ümberkorraldamine JavaScripti kasutamisel

Destruktureeriv ülesanne on lahe funktsioon, mis tuli koos ES6-ga. Ümberkorraldamine on JavaScripti avaldis, mis võimaldab massiividelt saadud väärtused või objektidelt atribuudid erinevateks muutujateks lahti pakkida. See tähendab, et saame massiividest ja objektidest andmeid eraldada ja määrata muutujatele.

Miks see on vajalik?

Kujutage ette, et tahame massiivist andmeid välja tõmmata. Varem, kuidas seda tehakse?

let introduction = ["Hello", "I" , "am", "Sarah"]; let greeting = introduction[0]; let name = introduction[3]; console.log(greeting);//"Hello" console.log(name);//"Sarah" 

Näeme, et kui tahame massiivist andmeid välja tõmmata, peame tegema sama asja ikka ja jälle.

ES6 ümberstruktureerimise ülesanne muudab nende andmete väljavõtmise lihtsamaks. Kuidas see nii on? Kõigepealt arutame massiividega ümberkorraldamise ülesannet. Siis liigume objektide hävitamise juurde.

Alustame.

Põhimassiivi ümberkorraldamine

Kui tahame massiividest andmeid eraldada, on see ümberstruktureerimise ülesande abil üsna lihtne.

Vaadakem oma esimest massiivi näidet. Selle korduva protsessi läbimise asemel teeksime seda:

let introduction = ["Hello", "I" , "am", "Sarah"]; let [greeting, pronoun] = introduction; console.log(greeting);//"Hello" console.log(pronoun);//"I" 

Saame seda teha ka sama tulemusega.

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(pronoun);//"I"

Muutujate deklareerimine enne määramist

Muutujaid saab enne nende määramist deklareerida:

 let greeting, pronoun; [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(pronoun);//"I" 

Pange tähele, et muutujad on seatud vasakult paremale. Nii et esimene muutuja saab massiivi esimese elemendi, teine ​​muutuja saab massiivi teise muutuja jne.

Massiivi üksuste vahelejätmine

Mis siis, kui tahame esimese ja teise üksuse asemel saada oma massiivi esimese ja viimase elemendi ning soovime omistada ainult kaks muutujat? Seda saab ka teha. Vaadake järgmist näidet:

let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(name);//"Sarah" 

Mis just juhtus?

Vaadake muutuja määrangu vasakul küljel asuvat massiivi. Pange tähele, et selle asemel, et meil oleks ainult üks koma, on meil kolm. Komaeraldajat kasutatakse massiivi väärtuste vahele jätmiseks. Nii et kui soovite massiivi üksuse vahele jätta, kasutage lihtsalt koma.

Teeme veel ühe. Jätame loendi esimese ja kolmanda elemendi vahele. Kuidas me seda teeksime?

let [,pronoun,,name] = ["Hello", "I" , "am", "Sarah"]; console.log(pronoun);//"I" console.log(name);//"Sarah" 

Nii et komaeraldaja teeb võlu. Nii et kui tahame kõik üksused vahele jätta, siis lihtsalt teeme seda:

let [,,,,] = ["Hello", "I" , "am", "Sarah"]; 

Ülejäänud massiivi määramine

Mis siis, kui tahame osa massiivist määrata muutujatele ja ülejäänud massiivi üksused konkreetsele muutujale? Sel juhul teeme seda:

let [greeting,...intro] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(intro);//["I", "am", "Sarah"] 

Selle mustri abil saate lahti pakkida ja määrata massiivi ülejäänud osa muutujale.

Ülesande ümberkorraldamine funktsioonidega

Andmeid võime eraldada ka funktsioonist tagastatud massiivist. Oletame, et meil on funktsioon, mis tagastab massiivi nagu allpool toodud näide:

function getArray() { return ["Hello", "I" , "am", "Sarah"]; } let [greeting,pronoun] = getArray(); console.log(greeting);//"Hello" console.log(pronoun);//"I" 

Saame samad tulemused.

Vaikeväärtuste kasutamine

Muutujaile saab määrata vaikeväärtused igaks juhuks, kui massiivist eraldatud väärtus on undefined:

let [greeting = "hi",name = "Sarah"] = ["hello"]; console.log(greeting);//"Hello" console.log(name);//"Sarah" 

Nii namelangeb tagasi "Sarah" juurde, kuna see pole massiivis määratletud.

Väärtuste vahetamine ümberkorraldamise ülesande abil

Üks asi veel. Muutujate väärtuste vahetamiseks saame kasutada restruktureerivat määrangut:

let a = 3; let b = 6; [a,b] = [b,a]; console.log(a);//6 console.log(b);//3 

Edasi liigume objekti ümberkorraldamise juurde.

Objekti ümberkorraldamine

Kõigepealt vaatame, miks on vaja objekte hävitada.

Oletame, et tahame objektist andmeid eraldada ja uutele muutujatele omistada. Kuidas seda enne ES6-d teha?

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let name = person.name; let country = person.country; let job = person.job; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" 

Vaadake, kui tüütu on kõigi andmete väljavõtmine. Peame korduvalt tegema sama asja. ES6 hävitamine säästab tõesti päeva. Hüppame otse sinna.

Objekti põhiline ümberkorraldamine

Kordame ülaltoodud näidet ES6-ga. Väärtuste ükshaaval määramise asemel võime andmete eraldamiseks kasutada vasakul asuvat objekti:

 let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name, country, job} = person; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" 

Saate samad tulemused. Samuti kehtib muutujate määramine objektile, mida pole deklareeritud:

let {name, country, job} = {name: "Sarah", country: "Nigeria", job: "Developer"}; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" 

Enne määramist deklareeritud muutujad

Objektides olevaid muutujaid saab enne hävitamise määramist deklareerida. Proovime seda:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let name, country, job; {name, country, job} = person; console.log(name);// Error : "Unexpected tokenSarah", country: "Nigeria", job: "Developer"}; let name, country, job; ({name, country, job} = person); console.log(name);//"Sarah" console.log(job);//"Developer" 

Samuti on oluline märkida, et selle süntaksi kasutamisel ()peaks sellele eelnema semikoolon. Vastasel juhul võidakse seda kasutada eelmise rea funktsiooni käivitamiseks.

Pange tähele, et vasakul küljel asuva objekti muutujatel peaks olema sama nimi kui objekti omadusvõtmel person. Kui nimed on erinevad, saame undefined:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name, friends, job} = person; console.log(name);//"Sarah" console.log(friends);//undefined 

Aga kui me tahame kasutada uut muutuja nime, siis saame.

Uue muutuja nime kasutamine

Kui tahame atribuudi nime asemel määrata uuele muutujale objekti väärtused, saame seda teha:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name: foo, job: bar} = person; console.log(foo);//"Sarah" console.log(bar);//"Developer" 

Nii edastatakse väljavõetud väärtused uutele muutujatele fooja bar.

Vaikeväärtuste kasutamine

Vaikeväärtusi saab kasutada ka objektide restruktureerimisel, just juhul, kui muutuja on undefinedobjektis, soovib ta andmeid hankida:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name = "myName", friend = "Annie"} = person; console.log(name);//"Sarah" console.log(friend);//"Annie" 

Nii et kui väärtus pole määratlemata, salvestab muutuja objektist eraldatud väärtuse nagu näiteks name. Vastasel juhul kasutas see vaikeväärtust nagu varem friend.

Uuele muutujale väärtuste määramisel saame määrata ka vaikeväärtused:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name:foo = "myName", friend: bar = "Annie"} = person; console.log(foo);//"Sarah" console.log(bar);//"Annie" 

Nii   nameeraldati personja määrati teisest muutujast. friend, teiselt poolt, oli undefinedsees person, nii et uuele muutujale bar  määrati vaikeväärtus.

Arvutatud atribuudi nimi

Arvutatud atribuudi nimi on veel üks objekti sõnasõnaline funktsioon, mis töötab ka ümberkorraldamiseks. Atribuudi nime saate avaldise abil määrata, kui panete selle nurksulgudesse:

let prop = "name"; let {[prop] : foo} = {name: "Sarah", country: "Nigeria", job: "Developer"}; console.log(foo);//"Sarah" 

Massiivide kombineerimine objektidega

Massiive saab objektidega kasutada ka objektide hävitamisel:

let person = {name: "Sarah", country: "Nigeria", friends: ["Annie", "Becky"]}; let {name:foo, friends: bar} = person; console.log(foo);//"Sarah" console.log(bar);//["Annie", "Becky"] 

Pesitsemine objekti ümberkorraldamisel

Objekte saab pesitseda ka ümberstruktureerimisel:

let person = { name: "Sarah", place: { country: "Nigeria", city: "Lagos" }, friends : ["Annie", "Becky"] }; let {name:foo, place: { country : bar, city : x} } = person; console.log(foo);//"Sarah" console.log(bar);//"Nigeria" 

Puhake objekti ümberkorraldamisel

The rest syntax can also be used to pick up property keys that are not already picked up by the destructuring pattern. Those keys and their values are copied into a new object:

let person = {name: "Sarah", country: "Nigeria", job: "Developer" friends: ["Annie", "Becky"]}; let {name, friends, ...others} = person; console.log(name);//"Sarah" console.log(friends);//["Annie", "Becky"] console.log(others);// {country: "Nigeria", job: "Developer"} 

Here, the remaining properties whose keys where not part of the variable names listed were assigned to the variable others. The rest syntax here is ...others. others can be renamed to whatever variable you want.

One last thing – let's see how Object Destructing can be used in functions.

Object Destructuring and Functions

Object Destructuring can be used to assign parameters to functions:

function person({name: x, job: y} = {}) { console.log(x); } person({name: "Michelle"});//"Michelle" person();//undefined person(friend);//Error : friend is not defined 

Notice the {} on the right hand side of the parameters object. It makes it possible for us to call the function without passing any arguments. That is why we got undefined. If we remove it, we'll get an error message.

Parameetritele saame määrata ka vaikeväärtused:

function person({name: x = "Sarah", job: y = "Developer"} = {}) { console.log(x); } person({name});//"Sarah" 

Massiivi ja objektide ümberstruktureerimisega saame teha palju asju, nagu nägime ülaltoodud näidetes.

Täname lugemast. :)