Grunnleggende destructuring av arrayer og objekter
Destructuring av arrayer og objekter: det grunnleggende, hopp over elementer, standardverdier, gi nye navn og et enkelt byttetriks.
Grunnleggende destructuring av arrayer og objekter er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 1 av 2. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 2 leksjoner.
Introduksjon
Mål: Hent verdier ut av arrayer og objekter på en ryddig måte.
- Destrukturering av arrayer
- Utelatelser og standardverdier
- Destrukturering av objekter
- Omdøping og byttetrikset
Grunnleggende om arrayer
Array-mønstre samsvarer med posisjoner. Det første elementet tilordnes den første variabelen, og så videre.
// Array destructuring: assign by position
const pair = [10, 20];
const [x, y] = pair;
console.log("x:", x);
console.log("y:", y);
Utelatelser og standardverdier
Bruk kommaer til å hoppe over posisjoner. Legg til = default for undefined eller manglende elementer.
// Skip items with commas and provide defaults
const triple = [5, undefined, 9];
// Skip the middle, provide default for missing/undefined
const [first, , third = 0] = triple;
console.log("first:", first);
console.log("third with default:", third);
Byttetrikset
Et bytte på én linje gjør en midlertidig variabel overflødig.
// Swap values with destructuring
let a = "left";
let b = "right";
[a, b] = [b, a];
console.log("a:", a);
console.log("b:", b);
Grunnleggende om objekter og omdøping
Objekter samsvarer etter nøkkel. Gi nytt navn med key: localName, og legg til = default ved behov.
// Object destructuring: assign by property name
const user = { name: "Ayla", level: 2, active: true };
// Basic
const { name, active } = user;
// Renaming and default
const { level: userLevel = 0 } = user;
console.log("name:", name);
console.log("active:", active);
console.log("userLevel:", userLevel);
Nestede felt (enkelt)
Nestede felt kan leses i ett trinn. Hold mønstrene små for god lesbarhet på mobil.
// Nested destructuring (keep it simple)
const config = {
theme: { primary: "blue", contrast: "white" },
flags: { compact: true }
};
const { theme: { primary }, flags: { compact } } = config;
console.log("primary:", primary);
console.log("compact:", compact);
Quiz om byttesyntaks
Kort sjekk: Bytte med destrukturering.
Oppsummering
Oppsummering: Arrayer destruktureres etter posisjon, mens objekter destruktureres etter nøkkel. Her er elementer utelatt, standardverdier brukt, nøkler omdøpt og verdier byttet på én linje.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 59
- Leksjoner
- 200
Ofte stilte spørsmål
Er leksjonen «Grunnleggende destructuring av arrayer og objekter» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Grunnleggende destructuring av arrayer og objekter», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 2 leksjoner.
Hva lærer jeg i «Grunnleggende destructuring av arrayer og objekter»?
Destructuring av arrayer og objekter: det grunnleggende, hopp over elementer, standardverdier, gi nye navn og et enkelt byttetriks. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med JavaScript Academy?
Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 2.
Hvor lang tid tar leksjonen «Grunnleggende destructuring av arrayer og objekter»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?
Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Grunnleggende destructuring av arrayer og objekter
- Rest og spread — idiomatiske arrayer og objekter