Undgå mutation
Arbejd med kopier i stedet for at mutere data.
Undgå mutation er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.
Hvorfor du bør undgå ændringer
Ændring af delte data skaber fejl, der er svære at spore: En ændring ét sted kommer uventet til at påvirke kode andre steder. Funktionel stil foretrækker at oprette nye værdier frem for at ændre eksisterende (uforanderlighed).
const original = [1, 2, 3];
const copy = [...original, 4];
console.log(original); // [1, 2, 3]
console.log(copy); // [1, 2, 3, 4]Brug spread til at kopiere arrays
Spread-operatoren ... opretter en overfladisk kopi af et array, så du kan tilføje elementer uden at ændre kilden.
const nums = [1, 2, 3];
const more = [...nums, 4, 5];
console.log(more); // [1, 2, 3, 4, 5]
console.log(nums); // [1, 2, 3]Brug spread til at kopiere objekter
Spread fungerer også for objekter og opretter et nyt objekt med de samme egenskaber samt eventuelle overskrivninger.
const user = { name: "Ada", age: 36 };
const older = { ...user, age: 37 };
console.log(older); // { name: "Ada", age: 37 }
console.log(user); // unchangedArray-metoder uden ændringer
Foretræk metoder, der returnerer nye arrays: map, filter, concat og slice. Undgå metoder, der ændrer data, som push, splice og sortering på stedet.
const a = [3, 1, 2];
const sorted = [...a].sort((x, y) => x - y);
console.log(sorted); // [1, 2, 3]
console.log(a); // [3, 1, 2]Tilføj uden at ændre
I stedet for push kan du opbygge et nyt array med spread eller concat.
const list = [1, 2];
const added = [...list, 3]; // not list.push(3)
console.log(added); // [1, 2, 3]Fjern uden at ændre
Brug filter til at oprette et nyt array uden et element i stedet for splice.
const list = [1, 2, 3, 4];
const without3 = list.filter((n) => n !== 3);
console.log(without3); // [1, 2, 4]Opdatér et element uden at ændre
Hvis du vil ændre ét element, skal du anvende map på arrayet og returnere en ny værdi for det matchende element.
const todos = [{ id: 1, done: false }, { id: 2, done: false }];
const updated = todos.map((t) =>
t.id === 1 ? { ...t, done: true } : t
);
console.log(updated[0].done); // trueOverfladisk kontra dyb
Spread kopierer ét niveau ned. Indlejrede objekter er stadig delte referencer. Hvis du vil opdatere indlejrede data uden at ændre dem, skal du bruge spread på hvert niveau, du ændrer.
const state = { user: { name: "Ada", age: 36 } };
const next = {
...state,
user: { ...state.user, age: 37 }
};
console.log(state.user.age); // 36
console.log(next.user.age); // 37Frysning for sikkerheds skyld
Object.freeze forhindrer utilsigtede ændringer af et objekt under kørsel og gør uforanderlighed tydelig (ét niveau ned).
const config = Object.freeze({ env: "prod" });
config.env = "dev"; // ignored in non-strict mode
console.log(config.env); // "prod"Const er ikke uforanderlighed
En almindelig misforståelse er, at const kun forhindrer, at variablen tildeles en ny værdi, ikke at værdien ændres. Et array, der er deklareret med const, kan stadig få tilføjet elementer med push.
const arr = [1, 2];
arr.push(3); // allowed - value mutated
console.log(arr); // [1, 2, 3]
// arr = [] would throwOpsummering af fordelene
Uforanderlige opdateringer gør ændringssporing enkel (sammenlign referencer), muliggør fortryd/gentag, forhindrer uventede ændringer langt væk og passer naturligt sammen med rene funktioner.
const prev = { count: 0 };
const next = { ...prev, count: 1 };
console.log(prev === next); // false - easy to detect changeHurtigt tjek
Undgå ændringer.
Opsummering
Uforanderlighed betyder, at du opretter nye værdier i stedet for at ændre eksisterende. Brug spread til at kopiere arrays og objekter, foretræk metoder uden ændringer (map, filter, concat), og brug spread på hvert niveau ved opdateringer af indlejrede data. Husk, at const forhindrer gentildeling, men ikke ændringer; Object.freeze tilføjer beskyttelse under kørsel. Uforanderlige opdateringer gør ændringsregistrering og ren kode nemt.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 59
- Lektioner
- 200
Ofte stillede spørgsmål
Er lektionen “Undgå mutation” gratis?
Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Undgå mutation”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Undgå mutation”?
Arbejd med kopier i stedet for at mutere data. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på JavaScript Academy?
Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Undgå mutation”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?
Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.