Grunderna i destrukturering av arrayer och objekt
Destrukturera arrayer och objekt: grunderna, hoppa över element, standardvärden, namnbyte och ett enkelt knep för att byta plats på värden.
Grunderna i destrukturering av arrayer och objekt är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 av 2. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 2 lektioner.
Introduktion
Mål: Hämta värden från arrayer och objekt på ett tydligt sätt.
- Destrukturering av arrayer
- Hoppa över värden och använda standardvärden
- Destrukturering av objekt
- Byta namn och byta värden
Grunderna i arrayer
Arraymönster matchar positioner. Det första elementet tilldelas den första variabeln, och så vidare.
// Array destructuring: assign by position
const pair = [10, 20];
const [x, y] = pair;
console.log("x:", x);
console.log("y:", y);
Hoppa över värden och standardvärden
Använd kommatecken för att hoppa över positioner. Lägg till = default för odefinierade eller saknade värden.
// 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);
Byt värden med ett trick
Med swap på en enda rad slipper du en tillfällig variabel.
// Swap values with destructuring
let a = "left";
let b = "right";
[a, b] = [b, a];
console.log("a:", a);
console.log("b:", b);
Grunderna i objekt och namnbyte
Objekt matchas med en nyckel. Byt namn med key: localName och lägg till = default efter 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);
Kapslade fält (grundläggande)
Du kan läsa kapslade fält i ett enda steg. Håll mönstren små så att de blir lättlästa på mobilen.
// 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 swap-syntax
Snabb kontroll: Byt värden med destrukturering.
Sammanfattning
Sammanfattning: Arrayer destruktureras efter position och objekt efter nyckel. Du hoppade över värden, använde standardvärden, bytte namn på nycklar och bytte värden på en enda rad.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”Grunderna i destrukturering av arrayer och objekt” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Grunderna i destrukturering av arrayer och objekt”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 2 lektioner.
Vad lär jag mig i ”Grunderna i destrukturering av arrayer och objekt”?
Destrukturera arrayer och objekt: grunderna, hoppa över element, standardvärden, namnbyte och ett enkelt knep för att byta plats på värden. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 2.
Hur lång tid tar lektionen ”Grunderna i destrukturering av arrayer och objekt”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?
Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Grunderna i destrukturering av arrayer och objekt
- Rest och spread — idiomatiska arrayer och objekt