Kaip naudoti masyvą ir objektų pertvarkymą „JavaScript“

Pertvarkymo užduotis yra puiki savybė, kuri atsirado kartu su ES6. Pertvarkymas yra „JavaScript“ išraiška, leidžianti išpakuoti masyvų vertes arba objektų ypatybes į skirtingus kintamuosius. Tai yra, mes galime išgauti duomenis iš masyvų ir objektų ir priskirti juos kintamiesiems.

Kodėl tai būtina?

Įsivaizduokite, kad norime išgauti duomenis iš masyvo. Kaip tai būtų daroma anksčiau?

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

Matome, kad kai norime išgauti duomenis iš masyvo, turime daryti tą patį dar ir dar kartą.

ES6 pertvarkymo užduotis palengvina šių duomenų išskyrimą. Kaip yra taip? Pirmiausia aptarsime destrukcinę užduotį su masyvais. Tada pereisime prie objektų naikinimo.

Pradėkime.

Pagrindinis masyvo pertvarkymas

Jei norime išgauti duomenis iš masyvų, tai yra gana paprasta naudojant sunaikinimo užduotį.

Pažiūrėkime į mūsų pirmąjį masyvų pavyzdį. Užuot praėję tą pasikartojantį procesą, mes tai padarytume:

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

Mes taip pat galime tai padaryti tuo pačiu rezultatu.

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

Kintamųjų deklaravimas prieš priskyrimą

Kintamuosius galima deklaruoti prieš juos priskiriant taip:

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

Atkreipkite dėmesį, kad kintamieji nustatomi iš kairės į dešinę. Taigi pirmasis kintamasis gauna pirmąjį masyvo elementą, antrasis - antrąjį masyvo kintamąjį ir t.

Praleisti elementus masyve

Ką daryti, jei norime gauti pirmą ir paskutinį elementą savo masyve vietoj pirmo ir antro elemento ir norime priskirti tik du kintamuosius? Tai taip pat galima padaryti. Pažvelkite į toliau pateiktą pavyzdį:

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

Kas ką tik nutiko?

Pažvelkite į masyvą kairėje kintamojo priskyrimo pusėje. Atkreipkite dėmesį, kad užuot turėję tik vieną kablelį, turime tris. Kablelio skyriklis naudojamas norint praleisti masyvo reikšmes. Taigi, jei norite praleisti elementą iš masyvo, tiesiog naudokite kablelį.

Padarykime dar vieną. Praleiskime pirmą ir trečią sąrašo elementus. Kaip mes tai padarytume?

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

Taigi kablelių skyriklis daro magiją. Taigi, jei norime praleisti visus elementus, tiesiog tai darome:

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

Paskirti likusią masyvo dalį

Ką daryti, jei norime dalį masyvo priskirti kintamiesiems, o likusius masyvo elementus - tam tikram kintamajam? Tokiu atveju mes tai padarytume:

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

Naudodami šį modelį, galite išpakuoti ir priskirti likusią masyvo dalį kintamajam.

Pertvarkyti užduotį su funkcijomis

Taip pat galime išgauti duomenis iš masyvo, grąžinto iš funkcijos. Tarkime, kad turime funkciją, kuri pateikia tokį masyvą, kaip žemiau pateiktas pavyzdys:

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

Mes gauname tuos pačius rezultatus.

Numatytųjų verčių naudojimas

Numatytosios vertės gali būti priskirtos kintamiesiems tik tuo atveju, jei iš masyvo išgauta vertė yra undefined:

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

Taigi namegrįžtama prie „Saros“, nes ji nėra apibrėžta masyve.

Vertybių keitimas naudojant pertvarkymo užduotį

Dar vienas dalykas. Mes galime naudoti pertvarkymo užduotį, kad sukeistume kintamųjų reikšmes:

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

Toliau pereikime prie objekto pertvarkymo.

Objekto pertvarkymas

Pirmiausia pažiūrėkime, kodėl reikia sunaikinti objektą.

Tarkime, kad norime išskirti duomenis iš objekto ir priskirti naujiems kintamiesiems. Kaip tai būtų daroma prieš ES6?

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" 

Pažiūrėkite, kaip nuobodu išgauti visus duomenis. Mes turime pakartotinai daryti tą patį. ES6 sunaikinimas tikrai taupo dieną. Šokime tiesiai į jį.

Pagrindinis objekto pertvarkymas

Pakartokime aukščiau pateiktą pavyzdį su ES6. Užuot priskyrę reikšmes po vieną, galime naudoti kairėje esantį objektą duomenims išskleisti:

 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" 

Gausite tuos pačius rezultatus. Taip pat galioja kintamųjų priskyrimas objektui, kuris nebuvo deklaruotas:

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

Kintamieji, deklaruoti prieš priskiriant

Kintamuosius objektuose galima deklaruoti prieš priskiriant juos pertvarkant. Pabandykime tai:

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" 

Taip pat svarbu pažymėti, kad naudojant šią sintaksę ()prieš ją turėtų būti kabliataškis. Priešingu atveju jis gali būti naudojamas funkcijai vykdyti iš ankstesnės eilutės.

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.

Taip pat galime priskirti numatytąsias parametrų reikšmes:

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

Mes galime padaryti daug dalykų naudodami masyvą ir objektų pertvarkymą, kaip matėme aukščiau pateiktuose pavyzdžiuose.

Ačiū, kad skaitėte. :)