Sådan bruges destruktion i JavaScript til at skrive renere og mere kraftfuld kode

Nogle gange er du nødt til at ødelægge for at bygge noget nyt. -Mistborn: The Hero of Ages

ES6 introducerede os til en af ​​de mest ventede JavaScript-funktioner: destrukturer. Som et koncept er Destructuring ikke nyt eller banebrydende, og nogle sprog havde allerede Destructuring (??) længe før. Men det var en meget tiltrængt og ønsket funktion i JavaScript.

Destruktion er processen med at bryde en struktur. I forbindelse med programmering er strukturerne datastrukturer, og ødelæggelse af disse datastrukturer betyder udpakning af individuelle værdier fra datastrukturen. I JavaScript kan ødelæggelse anvendes på et objekt eller en matrix.

Destruktion gør, bryder hvad ... hvad har vi det til ??

Før vi besvarer dette spørgsmål, lad os have en formel definition af Destructuring. MDN til undsætning!

Den destruktureringstildelingsoperatør syntaks er en JavaScript udtryk, der gør det muligt at pakke værdier fra arrays, eller egenskaber fra objekter, i adskilte variabler. -MDN

Lad os se på nogle eksempler for at få en bedre forståelse af det grundlæggende i destruktureringen.

Arrays

Prøve 1:

Da jeg så dette enkle stykke kode første gang, blev jeg forvirret. Jeg forstod ikke, hvad der skete. Hvis du er som jeg var, så lad mig prøve og forklare.

I linje 1 definerer vi 2 variabler aog b. I den næste linje er begge variabler inde i en matrix i venstre side, som igen svarer til en faktisk matrix i ridehåndsiden. I de efterfølgende linjer udskriver vi værdierne på a&, bog vi får henholdsvis 7 og 8, som var elementerne i RHS-arrayet. Magien, der sker i linje 2, kaldes destrukturer.

LHS ødelægger RHS, og værdierne opnået ved udpakning af elementerne tildeles variablerne i rækkefølge.

Men hvorfor er LHS inde i en matrix ???

Destruktureringsopgaven bruger lignende syntaks på LHS sammenlignet med RHS for at definere, hvilke værdier der skal udpakkes fra den oprindelige variabel.

Prøve 2:

Her har vi introduceret en anden variabel leftouti koden nu. Vi har 2 forskellige typer anvendelser af leftouti koden.

  • [a,b,leftout]-> Dette tildeler det tredje element i arrayet to leftsom forventet.
  • [a,b,…leftout]-> Dette giver henholdsvis de første 2 værdier toaa ndb, og resten af ​​arrayet tildeles t he leftout-variablen.

Løsningen ligger i operatøren. Denne operatør skjuler alle resterende argumenter ( hvile ) i en matrix. I sidstnævnte punkt tildeles de første 2 matrixelementer til henholdsvis a& b, og resten af ​​argumenterne kollapses i en matrix (omstrukturering måske ??) og tildeles leftoutvariablen. Vi kan verificere det samme ved at se på output.

Objekter

Prøve 1:

Destruktion fungerer det samme for både objekt og arrays. Objektet i LHS har egenskaber aog bsom tildeles henholdsvis egenskaberne aog bRHS-objektet. Vi får henholdsvis 1 & 2 ved at udskrive dem.

En ting at bemærke ( hvis du har ) er, at der er en lille ændring i syntaksen ( nu har du gjort ).

I Objektdestrukturering er hele LHS & RHS pakket ind ( )

Vi kan se den fejl, vi får, når vi ikke pakker den ind. ().Det siger erklæring om erklæring forventet.

Hvad der faktisk sker, er at omslutning af noget i krøllede parenteser {}forvirrer JavaScript, så det betragter det som en blok og ikke et objekt. På grund af det er det på udkig efter en erklæring til blokken ( funktionserklæring ), så vi vedlægger koden indeni (). Dette gør det til et udtryk snarere end en blok, og vi får vores resultater.

Prøve 2:

Igen restoperatøren. Fungerer ligesom i arrays, bortset fra denne gang, hviles værdierne i et objekt, fordi strukturen, der skal bruges, er defineret af LHS.

Hvad bruges destruktion til?

Som det ses af eksemplerne ovenfor, ved vi nu vigtigheden af ​​at nedstrukturere. Der er mange anvendelser og forskellige tilfælde af, hvordan ødelæggelse kan bruges til både objekter og arrays. Vi vil prøve nogle af dem. ( PS - eksemplerne er gyldige for både objekter og arrays, medmindre andet er nævnt. )

Variabel opgave

Vi har allerede set, hvordan variabler er tildelt i ovenstående eksempler, så lad os se på en anden.

I dette eksempel tildeles et allerede oprettet array direkte til destruktion. Værdierne tildeles ikke desto mindre variablerne.

Det samme gælder for objektet.

Standardværdier

Nogle gange kan det ske, at vi definerer nantallet af variabler for at få værdier fra destruktion, men arrayet / objektet har muligvis kun n-xelementer. I dette tilfælde xtildeles variabler undefined.

Vi kan se, at det ber udefineret, fordi arrayet simpelthen ikke har så mange elementer til at destruere og tildele hver variabel.

Løsningen på det er at give standardværdier til variablerne, så hvis der ikke er nok elementer, tager variablerne standardværdier snarere end undefineret.

Bytte

Ombytning er processen med at udveksle værdier mellem 2 eller flere variabler. En standard måde at udføre bytte på er enten at bruge en midlertidig variabel eller bruge XOR. I JavaScript kan det samme gøres ved hjælp af destrukturer.

Byt ved hjælp af en variabel temp. Koden er selvforklarende.

Ved hjælp af destrukturering bytter vi bare elementernes position og Voilà! Byt færdig.

Ignorerer værdier

Vi kan kun fange og bruge de krævede værdier og afvise eller ignorere de unødvendige værdier.

Her kan vi se, at vi ignorerede den midterste værdi ved ikke at tildele den til nogen variabel, hvilket sparer os besværet.

Indirekte tildeling af en funktionsretur

Her kan vi se, at funktionen x returnerer en matrix. På linje 4 hvor vi destruerer, leverer vi funktionsopkaldet, som returnerer arrayet og ikke arrayet direkte. Det gør koden pæn og let at læse og forstå.

Tildeling til nye variabler

Egenskaber kan pakkes ud fra et objekt og tildeles en variabel med et andet navn end objektegenskaben.

Vi kan se, at værdierne for egenskaber også er variabler, som værdier tildeles via destruktion.

Indlejret objekt og array destruktion

Som vi kan se, er disse data et objekt, der har en egenskab kaldet placering, som igen indeholder et array, hvis elementer er objekter.

Med destruktureringen er vi nødt til at få værdierne af alle de egenskaber, der er til stede inde i objektet inde i placeringsmatrixen.

Så vi oprettede et objekt kaldet obj, der indeholder den samme struktur som dataobjektet, og de værdier, vi ønsker at pakke ud, leveres som variabler (myitude, mylongitude, mycity). Disse sidestilles med dataarrayet (samme som destruktureringssyntaxen før). Når variablerne udskrives, får vi de respektive værdier.

Destruktion med for-of-loop

I ovenstående kodestykke har vi et folkeudvalg af objekter, hvis egenskaber til gengæld indeholder et objekt (personer> objekt> familie). Nu vil vi pakke nogle af værdierne ud fra objektet ved hjælp af for..of loop.

I sløjfen har vi tildelt en objektvariabel med den samme struktur som i folkearrayet og ignorerer de værdier, vi ikke har brug for. Vi har tildelt variabler n & m til henholdsvis navn og moderegenskaber, fordi det er de værdier, vi vil pakke ud. Inde i sløjfen udskriver vi variablerne, og vi får de nødvendige værdier.

Det store billede.

Du skal bruge destrukturer i din kode eller øve det for faktisk at få fat på det. Det virker simpelt i eksemplerne, fordi eksemplerne bare er for at få dig til at forstå det grundlæggende. Med komplekse / flere operationer (reducer ()!) Kan nedstrukturering hurtigt blive forvirrende, hvilket vi ikke ønsker!

Desuden tror du måske også, at destruktion kun er sukkersyntaks til udførelse af et sæt opgaver (som vi kan give variabler værdien af ​​hvert element fra en matrix ved hjælp af en for-loop). I et omfang kan vi sige, at det er sukker, men når vi ser på det bredere billede 'Det store billede', får vi hvorfor ødelæggelse har mere værdi end bare en kodeminimering.

JavaScript har mange operationer til både udpakning og konstruktion af data, men alle arbejder på et element ad gangen.

Til konstruktion

Til udpakning (stadig en ad gangen)

Selvom der er en syntaks til konstruktion af flere egenskaber ad gangen, men den kan kun bruges på tildelingstidspunktet - den kan ikke bruges til at ændre et eksisterende objekt.

Før ES6 blev introduceret, var der ingen mekanisme til at udtrække alle data på én gang. Det er her, hvor destruktureringen virkelig er kommet til at skinne. Det giver dig mulighed for at udtrække flere egenskaber fra et objekt. Vi har set dette i ovenstående eksempler.

Faldgruber

Der er kun en, jeg kan tænke på, og vi diskuterede det:

  • En erklæring bør ikke starte med en krøllet parentes {

Konklusion

Jeg forsøgte at forenkle destruktureringen ved at demonstrere så mange tilfælde af destruktureringsbrug som muligt. Jeg håber, det gjorde dette koncept klart for dig. Nu kan du bruge destrukturer til at skrive kraftig og ren kode.