Home-theater-designers
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.
MAKEUSE AV DAGENS VIDEO
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.
varför säger min telefon att det här tillbehöret kanske inte stöds
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 .
Hur man destrukturerar arrayer
Här är en exempelkod för att få en känsla av array-destrukturering:
const arr = [1, 2];
const [a, b] = arr;
console.log(a) // prints 1 on the console
console.log(b) // prints 2 on the console
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:
const arr = [1,2];
const a = arr[0];
const 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:
const [day, month, date, year, time, timezone] = Date().split(' ')
// Calling Date() returns the current date in the format:
// Mon Feb 20 2023 13:07:29 GMT+0000
console.log(day) // prints Mon
console.log(month) // prints Feb
console.log(date) // prints 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.
const arr = [1, 2, 3, 4];
const [a, b] = arr;
console.log(a) // prints 1
console.log(b) // prints 2
// values 3 and 4 are not assigned to any variable; they are ignored
I det här fallet, om du vill lagra de återstående objekten i en variabel, använd en viloparameter så här:
const arr = [1, 2, 3, 4];
const [a, b, ...rest] = arr;
console.log(rest) // prints [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.
const arr = [1, 2, 3, 4];
const [a, , c] = arr;
console.log(c) // prints 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.
const arr = [1];
const [a, b] = arr;
console.log(a) // prints 1
console.log(b) // prints undefined
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):
const arr = [1];
const [a = '10', b = 'not provided'] = arr;
console.log(a) // prints 1
console.log(b) // prints "not provided"
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:
const person = {name: 'Alvin', age: 10, height: 1};
const {name, age, height} = person;
console.log(name) // prints 'Alvin'
console.log(height) // prints 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:
const person = {name: 'Alvin', age: 10, height: 1};
const {name: firstName, age: years, height: currentHeight} = person;
console.log(firstName) // prints 'Alvin'
console.log(currentHeight) // prints 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 .
hur man laddar ner filmer till min ipad
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:
const person = {name: 'Alvin', age: 10, height: 1};
const {name, age, height, location='Worldwide'} = person;
console.log(name) // prints 'Alvin'
console.log(location) // prints '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:
const person = {name: 'Alvin', age: 10, height: 1};
const {age, height, name} = person;
console.log(name) // prints 'Alvin'
console.log(height) // prints 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:
const person = {name: 'Alvin', age: 10, height: 1};
const {name, ...rest} = person;
console.log(name) // prints 'Alvin'
console.log(rest) // prints { age: 10, height: 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.