JavaScript Object.assign vs Spread: Ytelsessammenligning og Bruksområder

I JavaScript er manipulering av objekter en vanlig oppgave. To populære metoder for å oppnå dette er Object.assign() og spread-syntaksen (...). Selv om begge kan brukes til å kopiere egenskaper fra ett eller flere objekter til et målobjekt, skiller de seg i ytelsesegenskaper, bruksområder og generell oppførsel. Denne artikkelen gir en omfattende sammenligning for å hjelpe deg med å velge riktig verktøy for jobben.

Forståelse av Object.assign()

Object.assign() er en metode som kopierer verdiene til alle oppregnbare egne egenskaper fra ett eller flere kildeobjekter til et målobjekt. Den returnerer det modifiserte målobjektet.

Syntaks:

            Object.assign(target, ...sources)
            

              
                Copy
              
            
          

Eksempel:

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

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

console.log(target); // { a: 1, b: 2, c: 3 }
console.log(returnedTarget === target); // true

            

              
                Copy
              
            
          

I dette eksempelet blir egenskapene b og c fra source-objektet kopiert til target-objektet. Object.assign() modifiserer det opprinnelige target-objektet og returnerer det.

Forståelse av Spread-syntaks

Spread-syntaksen (...) lar en itererbar enhet som en array eller et objekt bli utvidet på steder der null eller flere argumenter (for funksjonskall), elementer (for array-literaler) eller nøkkel-verdi-par (for objekt-literaler) forventes.

Syntaks (Objekt-literal):

            const newObject = { ...object1, ...object2 };
            

              
                Copy
              
            
          

Eksempel:

            const obj1 = { a: 1 };
const obj2 = { b: 2, c: 3 };

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 2, c: 3 }

            

              
                Copy
              
            
          

Her oppretter spread-syntaksen et nytt objekt mergedObj ved å kombinere egenskapene til obj1 og obj2.

Ytelsessammenligning

Ytelsesforskjellen mellom Object.assign() og spread-syntaksen kan variere avhengig av JavaScript-motoren og kompleksiteten til objektene som manipuleres. Generelt sett, for enkel objektkloning og sammenslåing, tenderer spread-syntaksen til å være litt raskere. Forskjellen er imidlertid ofte ubetydelig for små objekter. For større objekter, mer komplekse scenarier og gjentatte operasjoner anbefales mikro-benchmarking for å finne den raskeste tilnærmingen for ditt spesifikke bruksområde. La oss se på ulike scenarier:

Scenario 1: Enkel Objektkloning

Ved kloning av et enkelt objekt viser spread-syntaksen generelt bedre ytelse på grunn av sin mer strømlinjeformede operasjon.

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

// Spread Syntax
const cloneSpread = { ...original };

// Object.assign()
const cloneAssign = Object.assign({}, original);

            

              
                Copy
              
            
          

Scenario 2: Sammenslåing av Flere Objekter

Når man slår sammen flere objekter, er ytelsesforskjellen mellom de to metodene ofte minimal, men spread-syntaksen har ofte en liten fordel, primært fordi den er implementert nativt i moderne JavaScript-motorer.

            const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

// Spread Syntax
const mergedSpread = { ...obj1, ...obj2, ...obj3 };

// Object.assign()
const mergedAssign = Object.assign({}, obj1, obj2, obj3);

            

              
                Copy
              
            
          

Scenario 3: Store Objekter med Mange Egenskaper

Når man håndterer store objekter som inneholder hundrevis eller tusenvis av egenskaper, kan ytelsesforskjellene bli mer merkbare. I disse tilfellene beholder spread-syntaksen ofte sin fordel på grunn av mer effektiv minneallokering og kopiering av egenskaper i motoren.

Benchmarking

For å få nøyaktige ytelsesmålinger, bør du vurdere å bruke benchmarking-verktøy som Benchmark.js. Disse verktøyene lar deg kjøre gjentatte tester og samle statistikk for å bestemme hvilken metode som yter best under spesifikke forhold.

Eksempel med Benchmark.js:

            const Benchmark = require('benchmark');

const suite = new Benchmark.Suite;

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

// add tests
suite.add('Spread Syntax', function() {
  const mergedSpread = { ...obj1, ...obj2, ...obj3 };
})
.add('Object.assign()', function() {
  const mergedAssign = Object.assign({}, obj1, obj2, obj3);
})
// add listeners
.on('cycle', function(event) {
  console.log(String(event.target));
})
.on('complete', function() {
  console.log('Fastest is ' + this.filter('fastest').map('name'));
})
// run async
.run({ 'async': true });

            

              
                Copy
              
            
          

Dette kodeutdraget demonstrerer hvordan man setter opp en ytelsesbenchmark med Benchmark.js for å sammenligne ytelsen til spread-syntaksen og Object.assign() ved sammenslåing av flere objekter. Husk å installere biblioteket med npm install benchmark før du kjører skriptet.

Bruksområder

Selv om ytelse er en faktor, avhenger valget mellom Object.assign() og spread-syntaksen ofte av det spesifikke bruksområdet og preferanser for kodestil.

Bruksområder for Object.assign()

• Modifisering av Målobjektet: Object.assign() modifiserer målobjektet direkte, noe som kan være nyttig når du ønsker å oppdatere et eksisterende objekt på stedet.
• Kompatibilitet med Eldre Nettlesere: Object.assign() har bredere nettleserstøtte sammenlignet med spread-syntaksen, noe som gjør den egnet for prosjekter som retter seg mot eldre miljøer. Du kan trenge en polyfill for eldre nettlesere.
• Integrering med Eksisterende Kodebaser: Hvis du jobber med en eksisterende kodebase som i stor grad bruker Object.assign(), kan det å holde seg til den opprettholde konsistens og redusere risikoen for å introdusere feil.
• Angi Standardverdier: Det kan brukes til å anvende standardverdier på et objekt, for å sikre at visse egenskaper alltid er definert.

              const defaults = { a: 1, b: 2, c: 3 };
  const options = { a: 10, d: 4 };
  
  const config = Object.assign({}, defaults, options);
  console.log(config); // { a: 10, b: 2, c: 3, d: 4 }
  
              
  
                
                  Copy
                
              
            

Bruksområder for Spread-syntaks

• Opprette Nye Objekter: Spread-syntaksen utmerker seg ved å lage nye objekter uten å modifisere de opprinnelige objektene, noe som fremmer immutabilitet.
• Kortfattet Syntaks: Spread-syntaksen resulterer ofte i mer lesbar og kortfattet kode, spesielt ved sammenslåing av flere objekter.
• React og Redux: I React og Redux, hvor immutabilitet er avgjørende for ytelse og tilstandshåndtering, er spread-syntaksen mye brukt for å lage oppdaterte versjoner av tilstandsobjekter.
• Funksjonell Programmering: Den passer godt med prinsipper for funksjonell programmering, der man oppfordrer til å unngå sideeffekter og å jobbe med immutable data.

Grunn Kopi vs. Dyp Kopi

Det er avgjørende å forstå at både Object.assign() og spread-syntaksen utfører en grunn kopi. Dette betyr at hvis objektet inneholder nøstede objekter, kopieres kun referansene til de nøstede objektene, ikke de nøstede objektene selv. Endring av et nøstet objekt i det kopierte objektet vil også påvirke det opprinnelige objektet, og omvendt.

Eksempel:

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

const copied = { ...original };

copied.b.c = 3;

console.log(original.b.c); // 3 - Det opprinnelige objektet er modifisert!

            

              
                Copy
              
            
          

Hvis du trenger å lage en dyp kopi, der også nøstede objekter blir kopiert, kan du bruke teknikker som:

• JSON.parse(JSON.stringify(object)): Dette er en enkel, men potensielt ineffektiv tilnærming, spesielt for store eller komplekse objekter. Den håndterer heller ikke funksjoner eller sirkulære referanser korrekt.
• Bruke et bibliotek som Lodashs _.cloneDeep(): Biblioteker som Lodash tilbyr optimaliserte funksjoner for dyp kloning som håndterer ulike spesialtilfeller.
• Skrive en egendefinert rekursiv funksjon for dyp kopi: Dette lar deg kontrollere kloningsprosessen og håndtere spesifikke datatyper eller strukturer.

Immutabilitet

Immutabilitet er et programmeringskonsept som legger vekt på å lage nye datastrukturer i stedet for å modifisere eksisterende. Denne tilnærmingen kan føre til mer forutsigbar kode, enklere feilsøking og forbedret ytelse i visse scenarier. Både Object.assign() og spread-syntaksen kan brukes for å fremme immutabilitet, men spread-syntaksen foretrekkes generelt på grunn av dens evne til å lage nye objekter mer direkte.

For å oppnå immutabilitet med Object.assign() kreves det at man først lager et nytt målobjekt:

            const original = { a: 1, b: 2 };
const updated = Object.assign({}, original, { a: 10 });

console.log(original); // { a: 1, b: 2 }
console.log(updated);  // { a: 10, b: 2 }

            

              
                Copy
              
            
          

Spread-syntaksen oppnår det samme resultatet mer kortfattet:

            const original = { a: 1, b: 2 };
const updated = { ...original, a: 10 };

console.log(original); // { a: 1, b: 2 }
console.log(updated);  // { a: 10, b: 2 }

            

              
                Copy
              
            
          

Praktiske Eksempler

Eksempel 1: Oppdatere Brukerprofildata

Tenk deg at du har et brukerprofilobjekt og vil oppdatere det med ny informasjon fra et skjema. Ved hjelp av spread-syntaksen kan du enkelt lage et nytt objekt med de oppdaterte dataene:

            const userProfile = {
  id: 123,
  name: 'Alice',
  email: 'alice@example.com',
  location: 'New York'
};

const updatedData = {
  email: 'alice.new@example.com',
  location: 'London'
};

const updatedProfile = { ...userProfile, ...updatedData };

console.log(updatedProfile);
// {
//   id: 123,
//   name: 'Alice',
//   email: 'alice.new@example.com',
//   location: 'London'
// }

            

              
                Copy
              
            
          

Eksempel 2: Håndtere Varer i Handlekurven

I en e-handelsapplikasjon kan du trenge å oppdatere antallet av en vare i handlekurven. Ved hjelp av spread-syntaksen kan du lage en ny handlekurv-array med den oppdaterte varen:

            const cart = [
  { id: 1, name: 'Product A', quantity: 2 },
  { id: 2, name: 'Product B', quantity: 1 }
];

const productIdToUpdate = 1;
const newQuantity = 3;

const updatedCart = cart.map(item =>
  item.id === productIdToUpdate ? { ...item, quantity: newQuantity } : item
);

console.log(updatedCart);
// [
//   { id: 1, name: 'Product A', quantity: 3 },
//   { id: 2, name: 'Product B', quantity: 1 }
// ]

            

              
                Copy
              
            
          

Eksempel 3: Konfigurere Applikasjonsinnstillinger

Når du konfigurerer applikasjonsinnstillinger, kan det være ønskelig å slå sammen standardinnstillinger med brukerleverte innstillinger. Object.assign() kan være nyttig for dette formålet, spesielt hvis du trenger å modifisere standardinnstillingsobjektet direkte:

            const defaultSettings = {
  theme: 'light',
  fontSize: 'medium',
  language: 'en'
};

const userSettings = {
  theme: 'dark',
  fontSize: 'large'
};

Object.assign(defaultSettings, userSettings);

console.log(defaultSettings);
// {
//   theme: 'dark',
//   fontSize: 'large',
//   language: 'en'
// }

            

              
                Copy
              
            
          

I dette tilfellet blir defaultSettings modifisert på stedet, noe som kan være ønskelig eller ikke, avhengig av applikasjonens krav.

Beste Praksis

• Forstå Grunn Kopi: Vær klar over at begge metodene utfører grunne kopier. For dyp kopiering, bruk passende teknikker eller biblioteker.
• Vurder Immutabilitet: Når det er mulig, foretrekk spread-syntaksen for å lage nye objekter og fremme immutabilitet.
• Benchmark ved Behov: For ytelseskritisk kode, benchmark begge metodene for å finne det raskeste alternativet for ditt spesifikke bruksområde.
• Velg Basert på Kontekst: Velg metoden som best passer din kodestil, prosjektkrav og kompatibilitetsbehov.
• Bruk Lintere og Kodestilguider: Håndhev konsekvent bruk av Object.assign() og spread-syntaksen gjennom lintere og kodestilguider.
• Dokumenter Valgene Dine: Dokumenter tydelig begrunnelsen for å velge én metode over den andre, spesielt i komplekse kodebaser.

Konklusjon

Object.assign() og spread-syntaksen er verdifulle verktøy for objektmanipulering i JavaScript. Mens spread-syntaksen ofte tilbyr litt bedre ytelse og fremmer immutabilitet, forblir Object.assign() relevant for å modifisere eksisterende objekter og opprettholde kompatibilitet med eldre miljøer. Å forstå nyansene i hver metode lar deg ta informerte beslutninger og skrive mer effektiv og vedlikeholdbar kode.

Ved å vurdere ytelsesegenskaper, bruksområder og beste praksis som er beskrevet i denne artikkelen, kan du effektivt utnytte både Object.assign() og spread-syntaksen for å forbedre din JavaScript-utviklingsflyt og bygge robuste og skalerbare applikasjoner for et globalt publikum. Husk å alltid prioritere kodens klarhet og vedlikeholdbarhet, samtidig som du optimaliserer for ytelse ved behov. Mikro-benchmarking og profilering av koden din kan også hjelpe deg med å identifisere ytelsesflaskehalser og ta datadrevne beslutninger om hvilken metode du skal bruke i spesifikke scenarier.