Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Modern JavaScript har många nya funktioner som gör det enkelt att skriva kod på ett enkelt och strukturerat sätt. En av de praktiska moderna funktionerna som finns i ES6+ är array- och objektdestrukturering.

JavaScript-ramverk som React.js och Angular uppmuntrar användningen av denna teknik. Så det är viktigt att förstå vad destrukturering handlar om och hur man använder det när man skriver kod.

Vad är objekt- och array-destrukturering i JavaScript?

Destrukturering i JavaScript hänvisar till processen att packa upp värden från en array eller ett objekt. Det ger ett mer kortfattat sätt att få värden från arrayer eller objekt utan tunga lyft när du är intresserad av enskilda arrayobjekt eller värden i ett objekt.

Det är också användbart när du bearbetar returnerande värden från en komplex funktion eller uttryck. Detta koncept är ett av de bästa praxis du bör följa när du skriver React-kod.

instagram viewer

Hur man destrukturerar arrayer

Här är en exempelkod för att få en känsla av array-destrukturering:

konst arr = [1, 2];
konst [a, b] = arr;
trösta.log (a) // skriver ut 1 på konsolen
trösta.log (b) // skriver ut 2 på konsolen

Den här koden använder destrukturering för att tilldela värdena från arr—1 och 2—till variablerna a och b, respektive. Detta är det grundläggande konceptet bakom destrukturering. Du har en array eller ett objekt på höger sida, och du packar upp föremål och tilldelar dem till individuella variabler på vänster sida.

Under huven kopierar JavaScript värden från arr och tilldelar dem till variablerna på vänster sida så här:

konst arr = [1,2];
konst a = arr[0];
konst b = arr[1];

Som du kan se är destrukturering ett mer kortfattat sätt att göra detta, till skillnad från att använda objekt- eller parentesnotationen. Men den här syntaxen kommer troligen att vara användbar när du arbetar med komplexa arrayer eller funktioner som returnerar arrayer eller strängar.

Kontrollera exempelkoden nedan:

konst [dag, månad, datum, år, tid, tidszon] = Datum().dela(' ')

// Calling Date() returnerar det aktuella datumet i formatet:
// mån 20 feb 2023 13:07:29 GMT+0000
trösta.log (dag) // trycker mån
trösta.log (månad) // trycker feb
trösta.log (datum) // skriver ut 20

I det här kodexemplet skapar vi en ny sträng med det aktuella datumet genom att anropa Datum(). Därefter använder vi dela(), a JavaScript-strängmetod, för att separera objekt i strängen med mellanslag som avgränsare. dela(' ') returnerar en array, och vi använder destrukturering för att tilldela värdena till individuella variabler.

Kom ihåg att om din array innehåller fler föremål än du packar upp, kommer JavaScript att ignorera de extra föremålen.

konst arr = [1, 2, 3, 4];
konst [a, b] = arr;
trösta.log (a) // skriver ut 1
trösta.log (b) // skriver ut 2
// värdena 3 och 4 är inte tilldelade någon variabel; de ignoreras

I det här fallet, om du vill lagra de återstående objekten i en variabel, använd en viloparameter så här:

konst arr = [1, 2, 3, 4];
konst [a, b,... vila] = arr;
trösta.log (vila) // skriver ut [3,4]

Ibland kanske du inte bryr dig om ett specifikt föremål. JavaScripts destruktureringsmönster låter dig också hoppa över vissa element genom att använda ett tomt kommatecken.

konst arr = [1, 2, 3, 4];
konst [a,, c] = arr;
trösta.log (c) // skriver ut 3

Koden ovan använder det tomma utrymmet för att ignorera värde 2 i arrayen arr. Istället för att tilldela värde 2 till variabel c, hoppar den till nästa objekt i arrayen. Det ignorerar också det fjärde värdet eftersom det inte anger en variabel att lagra det i.

Om du däremot behöver färre föremål än du packar upp kommer processen att tilldela odefinierad värde till de extra variablerna.

konst arr = [1];
konst [a, b] = arr;
trösta.log (a) // skriver ut 1
trösta.log (b) // skriver ut odefinierat

För att förhindra att variabler är odefinierade kan du ställa in standardvärden om du inte är säker på arraylängden enligt följande (att tilldela standardvärden är inte ett krav):

konst arr = [1];
konst [a = '10', b = "inte tillhandahållet"] = arr;
trösta.log (a) // skriver ut 1
trösta.log (b) // skriver ut "ej tillhandahållen"

Denna destrukturering tilldelar värdet 1 till variabel a, skriver över dess standardvärde. Variabel b behåller sin standard eftersom ett värde inte anges.

Hur man destrukturerar objekt

Att förstöra objekt skiljer sig inte så mycket från arrayer. Den enda skillnaden är att arrayer är itererbara och objekt inte, vilket resulterar i ett lite annorlunda sätt att göra saker på.

När du arbetar med objekt initieras även variablerna på vänster sida av tilldelningsoperatorn som objekt:

konst person = {namn: "Alvin", ålder: 10, höjd: 1};
konst {namn, ålder, höjd} = person;
trösta.log (namn) // skriver ut "Alvin"
trösta.log (höjd) // skriver ut 1

Från koden använder vi egenskapsnamn från person objekt. Du behöver dock inte använda de exakta egenskapsnamnen i objektet. Du kan destrukturera och lagra värdena i olika variabelnamn enligt följande:

konst person = {namn: "Alvin", ålder: 10, höjd: 1};
konst {namn: förnamn, ålder: år, höjd: currentHeight} = person;
trösta.log (förnamn) // skriver ut "Alvin"
trösta.log (currentHeight) // skriver ut 1

Du börjar med att ange egenskapsvärdet du vill destrukturera, anger sedan variabelnamnet du ska använda för att lagra värdet efter ett kolon. Och precis som arrayer kommer att destrukturera ett egenskapsnamn som inte finns odefinierad.

För att hantera detta kan du på samma sätt ange standardvärden om egenskapsnamnet du vill tilldela en variabel inte är tillgängligt:

konst person = {namn: "Alvin", ålder: 10, höjd: 1};
konst {name, age, length, location='Över hela världen'} = person;
trösta.log (namn) // skriver ut "Alvin"
trösta.log (plats) // skriver ut 'Worldwide'

Variablernas ordning på vänster sida spelar ingen roll med ett objekt eftersom objekten lagrar värden i nyckel-värdepar. Som sådan kommer följande kod att ge samma resultat:

konst person = {namn: "Alvin", ålder: 10, höjd: 1};
konst {ålder, längd, namn} = person;
trösta.log (namn) // skriver ut "Alvin"
trösta.log (höjd) // skriver ut 1

Slutligen, i likhet med matriser, kan du också använda parametern rest för att destrukturera flera värden i en variabel så här:

konst person = {namn: "Alvin", ålder: 10, höjd: 1};
konst {namn, ...rest} = person;
trösta.log (namn) // skriver ut "Alvin"
trösta.log (vila) // skriver ut { ålder: 10, höjd: 1 }

Observera bara att viloparametern alltid måste komma sist. Annars kommer JavaScript att skapa ett undantag.

Förbättra din kodkvalitet med JavaScripts destrukturering

Javascripts moderna funktioner, som destrukturering, gör att du kan skriva mycket läsbar kod. Med hjälp av destrukturering kan du snabbt packa upp värden från arrayer och objekt. Destrukturering kan också visa sig vara praktiskt i andra situationer, som att byta värden på två variabler. Förhoppningsvis förstår du nu vad destrukturering betyder i JavaScript, och du kan använda det medan du skriver kod.