Frontend Academy · Lektion

Destrukturering och spread för objekt

Extrahera objektegenskaper med destrukturering, klona och slå ihop objekt med spread-operatorn och använd rest-parametrar i funktionssignaturer.

Lektion 2 av 413 steg

Destrukturering och spread för objekt är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad är destrukturering?

Destrukturering hämtar värden från objekt och arrayer till namngivna variabler. Det är en kortform för flera uttryck som läser egenskaper och gör koden mer kompakt samtidigt som det tydligt framgår vilka egenskaper som används.

Grunderna i objektdestrukturering

Använd klammerparenteser på vänster sida av en tilldelning för att hämta namngivna egenskaper.

const user = { name: 'Alice', age: 30, role: 'admin' };

// Without destructuring:
const name = user.name;
const age = user.age;

// With destructuring:
const { name, age, role } = user;
console.log(name); // 'Alice'
console.log(age);  // 30

Byta namn på destrukturerade variabler

Använd syntaxen property: newName för att byta namn på en egenskap under destruktureringen. Det är användbart när egenskapsnamnet krockar med en befintlig variabel eller inte är tillräckligt beskrivande.

const { name: userName, age: userAge } = user;
console.log(userName); // 'Alice'

Standardvärden vid destrukturering

Om en egenskap är undefined används ett standardvärde. Kombinera detta med namnbyte.

const { name, role = 'viewer', theme = 'light' } = user;
// role is 'admin' (from object)
// theme is 'light' (default — not in object)

Nästad objektdestrukturering

Destrukturera nästlade objekt genom att ange nästlade mönster.

const order = {
  id: 42,
  customer: { name: 'Bob', email: 'bob@example.com' },
  total: 99.99
};
const { id, customer: { name, email }, total } = order;
console.log(name); // 'Bob'

Arraydestrukturering

Använd hakparenteser för att destrukturera arrayer efter position. Hoppa över element med kommatecken.

const [first, second, , fourth] = [10, 20, 30, 40];
console.log(first);  // 10
console.log(second); // 20
console.log(fourth); // 40

// Swap variables:
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1

Destrukturering av funktionsparametrar

Destrukturera direkt i funktionsparametrarna för renare API:er och självbeskrivande kod. Det är mycket vanligt i React-komponentfunktioner.

function greet({ name, greeting = 'Hello' }) {
  return `${greeting}, ${name}!`;
}
greet({ name: 'Alice' });          // 'Hello, Alice!'
greet({ name: 'Bob', greeting: 'Hi' }); // 'Hi, Bob!'

Spreadoperatorn för objekt

Spreadoperatorn { ...obj } skapar en ytlig kopia av ett objekt och kan slå samman objekt. Senare nycklar skriver över tidigare nycklar om de krockar.

const defaults = { theme: 'light', lang: 'en', debug: false };
const userPrefs = { theme: 'dark', lang: 'fr' };
const settings = { ...defaults, ...userPrefs };
// { theme: 'dark', lang: 'fr', debug: false }

Spreadoperatorn för arrayer

[...arr] skapar en ytlig kopia av en array. Använd spread för att slå samman arrayer och lägga till element i början eller slutet utan att mutera arrayen.

const base = [1, 2, 3];
const extended = [...base, 4, 5]; // [1, 2, 3, 4, 5]
const prepended = [0, ...base];   // [0, 1, 2, 3]
const combined = [...base, ...extended]; // [1, 2, 3, 1, 2, 3, 4, 5]

Rest-syntax vid destrukturering

Rest-syntax samlar återstående egenskaper eller element i ett nytt objekt eller en ny array. Rest måste vara det sista mönstret.

const { name, ...rest } = { name: 'Alice', age: 30, role: 'admin' };
console.log(name); // 'Alice'
console.log(rest); // { age: 30, role: 'admin' }

const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]

Ytlig kontra djup kopia

Både spread och destrukturering skapar ytliga kopior. Nästlade objekt och arrayer är fortfarande delade referenser. Djupklona med structuredClone(obj) (modernt) eller JSON.parse(JSON.stringify(obj)) (äldre).

const a = { x: 1, nested: { y: 2 } };
const b = { ...a };
b.x = 99;           // a.x is still 1 (shallow copy OK)
b.nested.y = 99;    // a.nested.y is now 99! (reference shared)

Snabbkontroll

Vad gör const { a, ...rest } = obj?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Destrukturering och spread

Objektdestrukturering hämtar namngivna egenskaper. Arraydestrukturering hämtar värden efter position. Byt namn med kolon och ange standardvärden med =. Använd nästlade mönster för djupa objekt. Spread skapar ytliga kopior och slår samman objekt och arrayer. Rest samlar återstående egenskaper och element.

Gratis att börja

Lär dig HTML 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: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Destrukturering och spread för objekt” gratis?

Ja – hela texten till ”Destrukturering och spread för objekt” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Destrukturering och spread för objekt”?

Extrahera objektegenskaper med destrukturering, klona och slå ihop objekt med spread-operatorn och använd rest-parametrar i funktionssignaturer. Ni övar på Frontend 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 Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend 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 2 av 4.

Hur lång tid tar lektionen ”Destrukturering och spread för 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 Frontend Academy-lektionen?

Ja. Varje Frontend 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

← Tillbaka till Frontend Academy