JavaScript Academy · leksjon

Mønstre for uforanderlige oppdateringer

Oppdater data ved å opprette nye kopier.

Leksjon 3 av 413 trinn

Mønstre for uforanderlige oppdateringer er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 3 av 4. 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 4 leksjoner.

Oppdater uten å mutere

Uforanderlige oppdateringer oppretter en ny kopi med endringen lagt inn, mens originalen forblir urørt. Dette er kjernen i forutsigbar tilstandshåndtering i moderne JavaScript.

Spread-operatoren ... er hovedverktøyet.

Kopiere et objekt med spread

Bruk spread på et objekt for å lage et nytt objekt, og overstyr deretter en egenskap. Originalen beholder den gamle verdien.

const user = { name: 'Ada', age: 36 };
const older = { ...user, age: 37 };

console.log(user.age);
console.log(older.age);

Det er forskjellige objekter

Kopien er et helt nytt objekt, ikke den samme referansen. Identitetssammenligning bekrefter dette.

const original = { x: 1 };
const copy = { ...original };

console.log(original === copy);
console.log(original.x === copy.x);

Legge til en egenskap uforanderlig

For å legge til et felt sprer De det gamle objektet og inkluderer den nye nøkkelen. Originalen får ingen nye egenskaper.

const point = { x: 1, y: 2 };
const point3d = { ...point, z: 3 };

console.log(point);
console.log(point3d);

Fjerne en egenskap uforanderlig

Bruk destrukturering til å hente ut den uønskede nøkkelen og ta vare på resten. Rest-objektet inneholder ikke den.

const user = { id: 1, name: 'Ada', secret: 'x' };
const { secret, ...safe } = user;

console.log(safe);
console.log(user.secret);

Kopiere arrayer med spread

Bruk spread på en array for å kopiere den. Metoder som map og filter returnerer også nye arrayer uten å mutere kilden.

const nums = [1, 2, 3];
const copy = [...nums];
const doubled = nums.map(n => n * 2);

console.log(nums);
console.log(doubled);

Legge til i en array uforanderlig

I stedet for push, som muterer, kan De bygge en ny array med spread. Originalens lengde forblir den samme.

const list = ['a', 'b'];
const added = [...list, 'c'];
const prepended = ['z', ...list];

console.log(list);
console.log(added);
console.log(prepended);

Fjerne fra en array uforanderlig

Bruk filter til å lage en ny array uten det uønskede elementet, mens originalen forblir urørt.

const nums = [1, 2, 3, 4];
const withoutThree = nums.filter(n => n !== 3);

console.log(nums);
console.log(withoutThree);

Oppdatere nestede objekter

Nestede oppdateringer krever spread på hvert nivå De endrer. Bare den berørte grenen opprettes på nytt; resten deles ved referanse.

const state = { user: { name: 'Ada', age: 36 }, theme: 'dark' };
const updated = {
  ...state,
  user: { ...state.user, age: 37 }
};

console.log(state.user.age);
console.log(updated.user.age);
console.log(state.theme === updated.theme);

Oppdatere et element i en array

Bruk map til å returnere en endret kopi for det samsvarende elementet og originalen for resten. Ingen elementer muteres.

const todos = [
  { id: 1, done: false },
  { id: 2, done: false }
];
const updated = todos.map(t =>
  t.id === 2 ? { ...t, done: true } : t
);

console.log(todos[1].done);
console.log(updated[1].done);

Hvorfor uforanderlige oppdateringer er viktige

Når De aldri muterer delt tilstand, blir endringsdeteksjon billig (sammenlign referanser), De får støtte for angre/gjør om, og De unngår feil som skyldes endringer langt unna. Mønsteret er: kopier, og endre deretter kopien. For dype kloner dekker neste leksjon structuredClone.

function setName(state, name) {
  return { ...state, name };
}
const s1 = { name: 'old', count: 0 };
const s2 = setName(s1, 'new');
console.log(s1.name, s2.name);

Hurtigsjekk

Hva produserer { ...user, age: 37 } når user allerede har en age?

Besvar den i den interaktive leksjonen

Oppsummering: mønstre for uforanderlige oppdateringer

De har lært å oppdatere uten å mutere:

Bruk spread med { ...obj, key: value } for å kopiere og overstyre.
Bruk rest med destrukturering for å fjerne en egenskap uforanderlig.
Bruk map, filter og array-spread i stedet for push/splice.
Bruk spread på hvert nivå ved nestede oppdateringer; del resten ved referanse.

Gratis å komme i gang

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

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Mønstre for uforanderlige oppdateringer» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Mønstre for uforanderlige oppdateringer», 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 4 leksjoner.

Hva lærer jeg i «Mønstre for uforanderlige oppdateringer»?

Oppdater data ved å opprette nye kopier. 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 3 av 4.

Hvor lang tid tar leksjonen «Mønstre for uforanderlige oppdateringer»?

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

← Tilbake til JavaScript Academy