JavaScript Object.assign vs Spread: Jämförelse av prestanda & användningsfall

JavaScript erbjuder flera sätt att manipulera objekt. Två vanliga metoder är Object.assign() och spread-operatorn (...). Båda låter dig kopiera egenskaper från ett eller flera källobjekt till ett målobjekt. De skiljer sig dock åt i syntax, prestanda och underliggande mekanismer. Denna artikel ger en omfattande jämförelse för att hjälpa dig att välja rätt verktyg för ditt specifika användningsfall.

Förstå Object.assign()

Object.assign() är en metod som kopierar alla uppräkningsbara egna egenskaper från ett eller flera källobjekt till ett målobjekt. Den modifierar målobjektet direkt och returnerar det. Grundsyntaxen är:

            Object.assign(target, ...sources)

            

              
                Copy
              
            
          

• target: Målobjektet till vilket egenskaper kommer att kopieras. Detta objekt kommer att modifieras.
• sources: Ett eller flera källobjekt från vilka egenskaper kommer att kopieras.

Exempel:

            const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target); // Output: { a: 1, b: 4, c: 5 }
console.log(returnedTarget === target); // Output: true

            

              
                Copy
              
            
          

I detta exempel kopieras egenskaperna från source till target. Notera att egenskapen b skrivs över, och returnedTarget är samma objekt som target.

Förstå Spread-operatorn

Spread-operatorn (...) låter dig expandera ett itererbart objekt (som en array eller ett objekt) till enskilda element. När den används med objekt skapar den en ytlig kopia av objektets egenskaper i ett nytt objekt. Syntaxen är enkel:

            const newObject = { ...sourceObject };

            

              
                Copy
              
            
          

Exempel:

            const source = { a: 1, b: 2 };
const newObject = { ...source };

console.log(newObject); // Output: { a: 1, b: 2 }
console.log(newObject === source); // Output: false

            

              
                Copy
              
            
          

Här innehåller newObject en kopia av egenskaperna från source. Viktigt är att newObject är ett *nytt* objekt, skilt från source.

Viktiga skillnader

Även om både Object.assign() och spread-operatorn uppnår liknande resultat (kopiering av objektegenskaper), har de avgörande skillnader:

• Immutabilitet: Spread-operatorn skapar ett nytt objekt och lämnar originalobjektet oförändrat (immutabelt). Object.assign() modifierar målobjektet direkt (mutabelt).
• Hantering av målobjekt: Object.assign() låter dig specificera ett målobjekt, medan spread-operatorn alltid skapar ett nytt.
• Egenskapers uppräkningsbarhet: Båda metoderna kopierar uppräkningsbara egenskaper. Icke-uppräkningsbara egenskaper kopieras inte.
• Ärvda egenskaper: Ingen av metoderna kopierar ärvda egenskaper från prototypkedjan.
• Setters: Object.assign() anropar setters på målobjektet. Spread-operatorn gör det inte; den tilldelar värden direkt.
• Odefinierade eller null-källor: Object.assign() hoppar över null- och undefined-källobjekt. Att sprida null eller undefined kommer att kasta ett fel.

Jämförelse av prestanda

Prestanda är en kritisk faktor, särskilt när man hanterar stora objekt eller frekventa operationer. Mikrobenchmarks visar konsekvent att spread-operatorn generellt är snabbare än Object.assign(). Skillnaden beror på deras underliggande implementationer.

Varför är Spread-operatorn snabbare?

Spread-operatorn drar ofta nytta av optimerade interna implementationer i JavaScript-motorer. Den är specifikt designad för att skapa objekt och arrayer, vilket gör att motorerna kan utföra optimeringar som inte är möjliga med den mer allmänna Object.assign(). Object.assign() måste hantera olika fall, inklusive setters och olika property descriptors, vilket gör den i sig mer komplex.

Benchmark-exempel (illustrativt):

            // Förenklat exempel (verkliga benchmarks kräver fler iterationer och robust testning)
const object1 = { a: 1, b: 2, c: 3, d: 4, e: 5 };
const object2 = { f: 6, g: 7, h: 8, i: 9, j: 10 };

// Använder Object.assign()
console.time('Object.assign');
for (let i = 0; i < 1000000; i++) {
  Object.assign({}, object1, object2);
}
console.timeEnd('Object.assign');

// Använder Spread-operatorn
console.time('Spread Operator');
for (let i = 0; i < 1000000; i++) {
  ({...object1, ...object2 });
}
console.timeEnd('Spread Operator');

            

              
                Copy
              
            
          

Observera: Detta är ett grundläggande exempel för illustrationssyften. Verkliga benchmarks bör använda dedikerade benchmark-bibliotek (som Benchmark.js) för exakta och tillförlitliga resultat. Storleken på prestandaskillnaden kan variera beroende på JavaScript-motor, objektstorlek och de specifika operationer som utförs.

Användningsfall: Object.assign()

Trots prestandafördelen med spread-operatorn är Object.assign() fortfarande värdefull i specifika scenarier:

• Modifiera ett befintligt objekt: När du behöver uppdatera ett objekt på plats (mutation) istället för att skapa ett nytt. Detta är vanligt när man arbetar med mutabla state-hanteringsbibliotek eller när prestanda är absolut kritisk, och du har profilerat din kod för att bekräfta att det är värt att undvika en ny objektallokering.
• Slå samman flera objekt till ett enda mål: Object.assign() kan effektivt slå samman egenskaper från flera källobjekt till ett enda mål.
• Arbeta med äldre JavaScript-miljöer: Spread-operatorn är en ES6-funktion. Om du behöver stödja äldre webbläsare eller miljöer som inte stöder ES6, erbjuder Object.assign() ett kompatibelt alternativ (även om du kan behöva en polyfill).
• Anropa setters: Om du behöver trigga setters som är definierade på målobjektet under tilldelning av egenskaper, är Object.assign() det korrekta valet.

Exempel: Uppdatera state på ett mutabelt sätt

            let state = { name: 'Alice', age: 30 };

function updateName(newName) {
  Object.assign(state, { name: newName }); // Muterar 'state'-objektet
}

updateName('Bob');
console.log(state); // Output: { name: 'Bob', age: 30 }

            

              
                Copy
              
            
          

Användningsfall: Spread-operatorn

Spread-operatorn föredras generellt för dess immutabilitet och prestandafördelar i de flesta moderna JavaScript-utvecklingar:

• Skapa nya objekt med befintliga egenskaper: När du vill skapa ett nytt objekt med en kopia av egenskaper från ett annat objekt, ofta med vissa modifieringar.
• Funktionell programmering: Spread-operatorn passar bra ihop med principerna för funktionell programmering, som betonar immutabilitet och undvikande av sidoeffekter.
• React state-uppdateringar: I React används spread-operatorn ofta för att skapa nya state-objekt när man uppdaterar komponentens state immutabelt.
• Redux-reducers: Redux-reducers använder ofta spread-operatorn för att returnera nya state-objekt baserat på actions.

Exempel: Uppdatera React-state immutabelt

            import React, { useState } from 'react';

function MyComponent() {
  const [state, setState] = useState({ name: 'Charlie', age: 35 });

  const updateAge = (newAge) => {
    setState({ ...state, age: newAge }); // Skapar ett nytt state-objekt
  };

  return (
    <div>
      <p>Namn: {state.name}</p>
      <p>Ålder: {state.age}</p>
      <button onClick={() => updateAge(36)}>Öka ålder</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Ytlig kopia vs. Djup kopia

Det är avgörande att förstå att både Object.assign() och spread-operatorn utför en *ytlig* kopia. Detta innebär att endast egenskaperna på den översta nivån kopieras. Om ett objekt innehåller nästlade objekt eller arrayer, kopieras endast referenserna till dessa nästlade strukturer, inte de nästlade strukturerna själva.

Exempel på ytlig kopia:

            const original = { a: 1, b: { c: 2 } };
const copy = { ...original };

copy.a = 3; // Modifierar 'copy.a', men 'original.a' förblir oförändrad
copy.b.c = 4; // Modifierar 'original.b.c' eftersom 'copy.b' och 'original.b' pekar på samma objekt

console.log(original); // Output: { a: 1, b: { c: 4 } }
console.log(copy); // Output: { a: 3, b: { c: 4 } }

            

              
                Copy
              
            
          

För att skapa en *djup* kopia (där även nästlade objekt kopieras), behöver du använda tekniker som:

• JSON.parse(JSON.stringify(object)): Detta är en enkel men potentiellt långsam metod. Den fungerar inte med funktioner, datum eller cirkulära referenser.
• Lodashs _.cloneDeep(): En hjälpfunktion som tillhandahålls av Lodash-biblioteket.
• En anpassad rekursiv funktion: Mer komplex men ger mest kontroll över den djupa kopieringsprocessen.
• Structured Clone: Använder window.structuredClone() för webbläsare eller paketet structuredClone för Node.js för att djupkopiera objekt.

Bästa praxis

• Föredra Spread-operatorn för immutabilitet: I de flesta moderna JavaScript-applikationer, föredra spread-operatorn för att skapa nya objekt immutabelt, särskilt när du arbetar med state-hantering eller funktionell programmering.
• Använd Object.assign() för att mutera befintliga objekt: Välj Object.assign() när du specifikt behöver modifiera ett befintligt objekt på plats.
• Förstå ytlig vs. djup kopia: Var medveten om att båda metoderna utför ytliga kopior. Använd lämpliga tekniker för djupkopiering vid behov.
• Gör benchmarks när prestanda är kritiskt: Om prestanda är av största vikt, utför noggranna benchmarks för att jämföra prestandan hos Object.assign() och spread-operatorn i ditt specifika användningsfall.
• Tänk på kodens läsbarhet: Välj den metod som resulterar i den mest läsbara och underhållbara koden för ditt team.

Internationella överväganden

Beteendet hos Object.assign() och spread-operatorn är generellt konsekvent över olika JavaScript-miljöer världen över. Det är dock värt att notera följande potentiella överväganden:

• Teckenkodning: Se till att din kod hanterar teckenkodning korrekt, särskilt när du hanterar strängar som innehåller tecken från olika språk. Båda metoderna kopierar strängegenskaper korrekt, men kodningsproblem kan uppstå vid bearbetning eller visning av dessa strängar.
• Datum- och tidsformat: När du kopierar objekt som innehåller datum, var medveten om tidszoner och datumformat. Om du behöver serialisera eller deserialisera datum, använd lämpliga metoder för att säkerställa konsistens över olika regioner.
• Talformatering: Olika regioner använder olika konventioner för talformatering (t.ex. decimaltecken, tusentalsavgränsare). Var medveten om dessa skillnader när du kopierar eller manipulerar objekt som innehåller numerisk data som kan visas för användare i olika locales.

Sammanfattning

Object.assign() och spread-operatorn är värdefulla verktyg för objektmanipulation i JavaScript. Spread-operatorn erbjuder generellt bättre prestanda och främjar immutabilitet, vilket gör den till ett föredraget val i många moderna JavaScript-applikationer. Dock är Object.assign() fortfarande användbar för att mutera befintliga objekt och stödja äldre miljöer. Att förstå deras skillnader och användningsfall hjälper dig att skriva mer effektiv, underhållbar och robust JavaScript-kod.