Kloning och sammanslagning — spread och Object.assign
Klona och slå samman objekt och arrayer med spread och Object.assign; förstå ytlig kopiering och ordningen för överskrivning.
Kloning och sammanslagning — spread och Object.assign är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 2 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: Klona och sammanfoga objekt och arrayer på ett säkert sätt.
- Spread för kloning och sammanfogning
- Object.assign
- Ordning vid överskrivning
- Begränsningen hos ytliga kopior
Spread: klona objekt
Använd {...obj} för en ytlig klon. När du redigerar klonen ändras inte toppnivåfälten i originalet.
// 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: klona
Object.assign({}, obj) skapar också en ytlig klon. Undvik att ändra källan genom att tilldela till ett 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);
Sammanfoga: ordningen spelar roll
Sammanfogning är ordningskänslig: senare källor skriver över tidigare nycklar (b blir 9 här).
// 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);
Array-spread: klona och sammanfoga
[...arr] klonar en array. Kombinera arrayer med [...a, ...b] utan att ändra 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);
Ytlig kontra djup kopia
Ytlig kopia: kapslade objekt och arrayer delas. För djupa strukturer kopierar du de inre nivåerna uttryckligen.
// 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
Snabb kontroll: Skapa en ytlig klon utan att ändra originalet.
Sammanfattning
Sammanfattning: Klona med spread eller Object.assign till ett tomt objekt, sammanfoga genom att placera senare källor sist och kom ihåg att detta är ytliga kopior.
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 ”Kloning och sammanslagning — spread och Object.assign” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Kloning och sammanslagning — spread och Object.assign”, 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 ”Kloning och sammanslagning — spread och Object.assign”?
Klona och slå samman objekt och arrayer med spread och Object.assign; förstå ytlig kopiering och ordningen för överskrivning. 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 2 av 2.
Hur lång tid tar lektionen ”Kloning och sammanslagning — spread och Object.assign”?
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
- Array-CRUD och iteration; grunderna i objekt och åtkomst
- Kloning och sammanslagning — spread och Object.assign