Taulukon ja objektien uudelleenjärjestelyn käyttäminen JavaScriptissä

Tuhoava tehtävä on hieno ominaisuus, joka tuli ES6: n mukana. Destrukturointi on JavaScript-lauseke, jonka avulla taulukoiden arvot tai objektien ominaisuudet voidaan purkaa erillisiin muuttujiin. Eli voimme poimia tietoja matriiseista ja objekteista ja osoittaa ne muuttujiin.

Miksi tämä on välttämätöntä?

Kuvittele, että haluamme poimia tietoja taulukosta. Kuinka tämä tehdään aikaisemmin?

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

Voimme nähdä, että kun haluamme poimia tietoja taulukosta, meidän on tehtävä sama asia uudestaan ​​ja uudestaan.

ES6: n uudelleenjärjestelymääritys helpottaa näiden tietojen poimimista. Kuinka näin on? Ensin keskustellaan tuhoavasta tehtävästä taulukoiden kanssa. Sitten siirrymme esineiden tuhoamiseen.

Aloitetaan.

Perusryhmän uudelleenjärjestely

Jos haluamme poimia tietoja taulukoista, se on melko yksinkertaista käyttämällä uudelleenjärjestelymääritystä.

Tarkastellaan ensimmäistä taulukkoesimerkkiämme. Sen sijaan, että käisimme läpi toistuvan prosessin, tekisimme tämän:

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

Voimme myös tehdä tämän samalla tuloksella.

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

Muuttujien ilmoittaminen ennen määritystä

Muuttujat voidaan ilmoittaa ennen niiden määrittämistä seuraavasti:

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

Huomaa, että muuttujat asetetaan vasemmalta oikealle. Joten ensimmäinen muuttuja saa matriisin ensimmäisen kohteen, toinen muuttuja saa ryhmän toisen muuttujan ja niin edelleen.

Kohteiden ohittaminen taulukossa

Entä jos haluamme saada matriisimme ensimmäisen ja viimeisen kohteen ensimmäisen ja toisen kohteen sijaan ja haluamme määrittää vain kaksi muuttujaa? Tämä voidaan tehdä myös. Katso alla olevaa esimerkkiä:

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

Mitä juuri tapahtui?

Katso muuttujan vasemmalla puolella olevaa taulukkoa. Huomaa, että vain yhden pilkun sijasta meillä on kolme. Pilkkuerotinta käytetään matriisin arvojen ohittamiseen. Joten jos haluat ohittaa jonon matriisissa, käytä vain pilkkua.

Tehdään toinen. Ohitetaan luettelon ensimmäinen ja kolmas kohta. Kuinka tekisimme tämän?

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

Joten pilkkuerotin tekee taikuuden. Joten jos haluamme ohittaa kaikki kohteet, teemme vain tämän:

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

Määritä loput matriisista

Entä jos haluamme osoittaa osan matriisista muuttujille ja loput matriisin kohteista tietylle muuttujalle? Siinä tapauksessa teemme tämän:

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

Tämän mallin avulla voit purkaa pakkauksen ja määrittää taulukon jäljellä olevan osan muuttujalle.

Tehtävän uudelleenjärjestely toiminnoilla

Voimme myös poimia tietoja funktiosta palautetusta taulukosta. Oletetaan, että meillä on funktio, joka palauttaa taulukon kuten alla olevassa esimerkissä:

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

Saamme samat tulokset.

Oletusarvojen käyttäminen

Muuttujille voidaan määrittää oletusarvot vain siinä tapauksessa, että taulukosta poimittu arvo on undefined:

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

Joten namekuuluu takaisin "Sarah", koska sitä ei ole määritelty taulukossa.

Arvojen vaihtaminen uudelleenjärjestelytehtävän avulla

Yksi asia vielä. Voimme käyttää tuhoavaa tehtävää vaihtamaan muuttujien arvot:

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

Seuraavaksi siirrytään objektin uudelleenjärjestelyyn.

Kohteen uudelleenjärjestely

Ensinnäkin, katsotaanpa miksi on tarpeen tuhota esineitä.

Oletetaan, että haluamme poimia tietoja objektista ja liittää uusiin muuttujiin. Miten tämä tehdään ennen ES6: ta?

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" 

Katso kuinka tylsiä on poimia kaikki tiedot. Meidän on tehtävä toistuvasti sama asia. ES6: n tuhoaminen todella säästää päivää. Hypätään suoraan siihen.

Perusobjektin uudelleenjärjestely

Toistetaan yllä oleva esimerkki ES6: lla. Sen sijaan, että annat arvoja yksitellen, voimme käyttää vasemmanpuoleista objektia tietojen purkamiseen:

 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" 

Saat samat tulokset. On myös kelvollista määrittää muuttujia objektille, jota ei ole ilmoitettu:

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

Muuttujat, jotka on ilmoitettu ennen määräämistä

Objektien muuttujat voidaan ilmoittaa, ennen kuin ne määritetään uudelleenjärjestelyllä. Yritetään sitä:

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" 

On myös tärkeää huomata, että tätä syntaksia käytettäessä sitä ()tulisi edeltää puolipiste. Muuten sitä voidaan käyttää toiminnon suorittamiseen edelliseltä riviltä.

Note that the variables in the object on the left hand side should have the same name as a property key in the object person. If the names are different, we'll get undefined:

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

But if we want to use a new variable name, well, we can.

Using a new Variable Name

If we want to assign values of an object to a new variable instead of using the name of the property, we can do this:

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

So the values extracted are passed to the new variables foo and bar.

Using Default Values

Default values can also be used in object destructuring, just in case a variable is undefined in an object it wants to extract data from:

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

So if the value is not undefined, the variable stores the value extracted from the object as in the case of name. Otherwise, it used the default value as it did for friend.

We can also set default values when we assign values to a new variable:

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

So  name was extracted from person and assigned to a different variable. friend, on the other hand, was undefined in person, so the new variable bar  was assigned the default value.

Computed Property Name

Computed property name is another object literal feature that also works for destructuring. You can specify the name of a property via an expression if you put it in square brackets:

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

Combining Arrays with Objects

Arrays can also be used with objects in object destructuring:

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

Nesting in Object Destructuring

Objects can also be nested when destructuring:

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" 

Rest in Object Destructuring

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.

Voimme myös määrittää parametreille oletusarvot:

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

Voimme tehdä paljon asioita Array- ja Object Destructure -järjestelyillä, kuten olemme nähneet yllä olevista esimerkeistä.

Kiitos, että luit. :)