Kloning og sammenfletning — spread og Object.assign
Klon og sammenflet objekter og arrays med spread og Object.assign; forstå shallow copy og rækkefølgen for overskrivning.
Kloning og sammenfletning — spread og Object.assign er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 2 af 2. 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 2 lektioner i alt.
Introduktion
Mål: Klon og flet objekter og arrays sikkert.
- Spread til kloning og fletning
- Object.assign
- Rækkefølge ved overskrivning
- Begrænsninger ved overfladisk kopiering
Spread: kloning af objekter
Brug {...obj} til en overfladisk klon. Når du redigerer klonen, ændrer det ikke felterne på øverste niveau i originalen.
// Shallow clone with object spread
const user = { name: "Ayla", level: 1 };
const clone = { ...user };
clone.level = 2;
console.log("Original:", user);
console.log("Clone:", clone);
Object.assign: kloning
Object.assign({}, obj) laver også en overfladisk klon. Undgå at ændre kilden ved at tildele til et tomt objekt.
// Shallow clone with Object.assign
const settings = { theme: "dark", compact: false };
const copy = Object.assign({}, settings);
copy.compact = true;
console.log("Settings:", settings);
console.log("Copy:", copy);
Fletning: rækkefølgen betyder noget
Fletning afhænger af rækkefølgen: senere kilder overskriver tidligere nøgler (b bliver 9 her).
// Merge: later keys overwrite earlier ones
const base = { a: 1, b: 2 };
const extra = { b: 9, c: 3 };
const mergedSpread = { ...base, ...extra };
const mergedAssign = Object.assign({}, base, extra);
console.log("Spread merged:", mergedSpread);
console.log("Assign merged:", mergedAssign);
Spread for arrays: klon og flet
[...arr] kloner et array. Kombinér arrays med [...a, ...b] uden at ændre dem.
// Arrays: clone and merge with spread
const nums = [1, 2, 3];
const cloneNums = [...nums];
const more = [4, 5];
const mergedNums = [...nums, ...more];
console.log("nums:", nums);
console.log("clone:", cloneNums);
console.log("merged:", mergedNums);
Overfladisk kontra dyb kopiering
Overfladisk kopi: Indlejrede objekter og arrays deles. Ved dybe strukturer skal du kopiere de indre niveauer eksplicit.
// Shallow copy caveat: nested objects are shared
const original = { user: { name: "Mina" }, active: true };
const shallow = { ...original };
// Mutate nested object
shallow.user.name = "Lena";
console.log("Original:", original);
console.log("Shallow:", shallow);
Quiz om kloningsmetoder
Hurtigt tjek: Overfladisk kloning uden ændringer.
Opsummering
Opsummering: Klon med spread eller Object.assign til et tomt objekt, flet ved at placere senere kilder sidst, og husk: Det er overfladiske kopier.
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 “Kloning og sammenfletning — spread og Object.assign” gratis?
Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Kloning og sammenfletning — spread og Object.assign”, 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 2 lektioner i alt.
Hvad lærer jeg i “Kloning og sammenfletning — spread og Object.assign”?
Klon og sammenflet objekter og arrays med spread og Object.assign; forstå shallow copy og rækkefølgen for overskrivning. 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 2 af 2.
Hvor lang tid tager lektionen “Kloning og sammenfletning — spread og Object.assign”?
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.
Alle lektioner i dette kursus
- Array-CRUD og iteration; grundlæggende objekter og adgang
- Kloning og sammenfletning — spread og Object.assign