Sådan bruges Array og Object Destructuring i JavaScript

Destruktureringsopgaven er en sej funktion, der fulgte med ES6. Destructuring er et JavaScript-udtryk, der gør det muligt at pakke værdier fra arrays eller egenskaber fra objekter ind i forskellige variabler. Det vil sige, vi kan udtrække data fra arrays og objekter og tildele dem til variabler.

Hvorfor er dette nødvendigt?

Forestil dig, at vi vil udtrække data fra en matrix. Tidligere, hvordan ville dette gøres?

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

Vi kan se, at når vi vil udtrække data fra en matrix, skal vi gøre det samme igen og igen.

ES6 destruktureringsopgaven gør det lettere at udtrække disse data. Hvordan er det sådan? Først vil vi diskutere destruktureringsopgaven med arrays. Så går vi videre til objektdestrukturering.

Lad os komme igang.

Grundlæggende Array Destructuring

Hvis vi ønsker at udtrække data fra arrays, er det ret simpelt ved hjælp af destruktureringsopgaven.

Lad os henvise til vores første eksempel for arrays. I stedet for at gennemgå den gentagne proces, ville vi gøre dette:

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

Vi kan også gøre dette med det samme resultat.

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

Erklæring af variabler inden tildelingen

Variabler kan erklæres, før de tildeles på denne måde:

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

Bemærk, at variablerne er indstillet fra venstre mod højre. Så den første variabel får det første element i arrayet, den anden variabel får den anden variabel i arrayet og så videre.

Springe varer over i en matrix

Hvad hvis vi vil hente det første og sidste element i vores array i stedet for det første og andet element, og vi kun vil tildele to variabler? Dette kan også gøres. Se eksemplet nedenfor:

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

Hvad skete der lige?

Se på matrixen til venstre for den variable tildeling. Bemærk, at i stedet for kun at have et komma, har vi tre. Kommaseparatoren bruges til at springe værdier over i en matrix. Så hvis du vil springe et element over i en matrix, skal du bare bruge et komma.

Lad os lave en anden. Lad os springe over det første og tredje punkt på listen. Hvordan ville vi gøre dette?

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

Så kommaseparatoren gør magien. Så hvis vi vil springe alle varer over, gør vi bare dette:

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

Tildeling af resten af ​​et array

Hvad hvis vi vil tildele noget af arrayet til variabler og resten af ​​elementerne i en array til en bestemt variabel? I så fald ville vi gøre dette:

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

Ved hjælp af dette mønster kan du pakke ud og tildele den resterende del af et array til en variabel.

Destruktionstildeling med funktioner

Vi kan også udtrække data fra et array, der returneres fra en funktion. Lad os sige, at vi har en funktion, der returnerer en matrix som eksemplet nedenfor:

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

Vi får de samme resultater.

Brug af standardværdier

Standardværdier kan tildeles variablerne, bare hvis værdien ekstraheret fra arrayet er undefined:

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

namefalder tilbage til "Sarah", fordi det ikke er defineret i arrayet.

Bytte værdier ved hjælp af Destructuring Assignment

En ting mere. Vi kan bruge destruktureringsopgaven til at bytte værdier af variabler:

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

Lad os derefter gå videre til Objektdestrukturering.

Objektdestrukturering

Lad os først se, hvorfor der er behov for objektdestrukturering.

Sig, at vi vil udtrække data fra et objekt og tildele til nye variabler. Inden ES6, hvordan ville dette gøres?

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" 

Se hvor kedeligt det er at udtrække alle data. Vi skal gentagne gange gøre det samme. ES6-destrukturering redder virkelig dagen. Lad os hoppe lige ind i det.

Grundlæggende objektdestrukturering

Lad os gentage ovenstående eksempel med ES6. I stedet for at tildele værdier en efter en, kan vi bruge objektet til venstre for at udtrække dataene:

 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" 

Du får de samme resultater. Det er også gyldigt at tildele variabler til et objekt, der ikke er deklareret:

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

Variabler, der er deklareret inden tildeling

Variabler i objekter kan deklareres, før de tildeles destruktion. Lad os prøve det:

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" 

Det er også vigtigt at bemærke, at når du bruger denne syntaks, ()skal den indledes med et semikolon. Ellers kan det bruges til at udføre en funktion fra den forrige linje.

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.

Vi kan også tildele standardværdier til parametrene:

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

Vi kan gøre en hel masse ting med Array og Object Destructuring som vi har set i eksemplerne ovenfor.

Tak fordi du læste. :)