Guinguette Marais Poitevin

In questo post, troverete 3 modi semplici per eseguire un clone superficiale (o copia) di oggetti in JavaScript.

Come bonus, mostrerò come potete anche aggiornare, aggiungere o rimuovere proprietà sul posto nel clone. Questo è utile quando si vuole eseguire un aggiornamento sull’oggetto in modo immutabile.

Nota

I 3 modi per clonare oggetti descritti in questo post eseguono una copia superficiale.

Una copia superficiale significa che solo l’oggetto effettivo viene copiato. Se l’oggetto copiato contiene oggetti annidati – questi oggetti annidati non vengono clonati.

1. Clonare usando object spread

Il modo più semplice per clonare un semplice oggetto JavaScript è invocare l’operatore object spread:

const clone = { ...object};

dove object è l’oggetto che volete copiare, e clone è la copia superficiale di object.

Per esempio, creiamo una copia superficiale dell’oggetto hero:

const hero = { name: 'Batman', city: 'Gotham'};const heroClone = { ...hero};heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false

heroClone è un oggetto clone di hero, cioè contiene tutte le proprietà di hero.

hero === heroClone evaluta in falsehero e heroClone sono, tuttavia, istanze di oggetti differenti.

1.1 Bonus di diffusione dell’oggetto: aggiungere o aggiornare gli oggetti di scena clonati

Un vantaggio immediato dell’uso della diffusione dell’oggetto è che è possibile aggiornare o aggiungere nuove proprietà all’oggetto clonato sul posto, se ne avete bisogno.

Cloniamo l’oggetto hero, ma aggiorniamo la proprietà name ad un valore diverso e aggiungiamo una nuova proprietà realName:

const hero = { name: 'Batman', city: 'Gotham'};const heroEnhancedClone = { ...hero, name: 'Batman Clone', realName: 'Bruce Wayne'};heroEnhancedClone; // { name: 'Batman Clone', city: 'Gotham', realName: 'Bruce Wayne' }

2. Clonare usando l’object rest

Un altro buon modo per clonare gli oggetti in modo superficiale è usando l’operatore object rest:

const { ...clone } = object;

Ancora una volta, usiamo l’operatore rest per fare una copia dell’oggetto hero:

const hero = { name: 'Batman', city: 'Gotham'};const { ...heroClone } = hero;heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false

Dopo aver applicato l’operatore rest const { ...heroClone } = hero, la variabile heroClone contiene una copia dell’oggetto hero.

2.1 Bonus di Object Rest: saltare gli oggetti di scena clonati

Un bel bonus quando si usa Object Rest è la possibilità di saltare certe proprietà quando si clona.

Per esempio, creiamo un clone dell’oggetto hero, ma saltiamo la proprietà city nel clone:

const hero = { name: 'Batman', city: 'Gotham'};const { city, ...heroClone } = hero;heroClone; // { name: 'Batman' }

2.2 Super bonus: combinare object spread e rest

Object spread porta il bonus di aggiornare o aggiungere nuove proprietà, mentre object rest ha il vantaggio di saltare le proprietà nel clone risultante.

Si possono combinare object spread e rest in un’unica dichiarazione per ereditare tutti questi benefici? Sì, è possibile!

Cloniamo l’oggetto hero, aggiungendo anche una nuova proprietà realName e saltando la proprietà city:

const hero = { name: 'Batman', city: 'Gotham'};const { city, ...heroClone } = { ...hero, realName: 'Bruce Wayne'};heroClone; // { name: 'Batman', realName: 'Bruce Wayne' }

Combinare la diffusione degli oggetti e il resto per clonare gli oggetti ed eseguire la manipolazione delle proprietà in un’unica dichiarazione è fantastico!

3. Clonare usando Object.assign()

Infine, Object.assign(target, ...sources) permette di eseguire la stessa clonazione di oggetti:

const clone = Object.assign({}, object);

Utilizziamo Object.assign() in pratica e creiamo un oggetto clone di hero oggetto:

const hero = { name: 'Batman', city: 'Gotham'};const heroClone = Object.assign({}, hero);heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false

Object.assign({}, hero) crea un clone di hero fondendo il secondo argomento hero nel primo argomento {}.

3.1 Bonus Object.assign(): aggiungere o aggiornare gli oggetti di scena clonati

Object.assign() permette anche di aggiornare o aggiungere nuove proprietà al clone.

Copiamo l’oggetto hero, ma allo stesso tempo aggiorniamo la proprietà name:

const hero = { name: 'Batman', city: 'Gotham'};const heroClone = Object.assign({}, hero, { name: 'Batman Clone' });heroClone; // { name: 'Batman Clone', city: 'Gotham' }

Object.assign({}, hero, { name: 'Batman Clone' }) crea l’oggetto in 2 passi.

Prima, il secondo argomento hero è fuso nel primo argomento {}. Questo equivale a { name: 'Batman', city: 'Gotham' }.

In secondo luogo, il terzo argomento { name: 'Batman Clone' } viene fuso nel risultato del passo precedente, sovrascrivendo la proprietà name. Infine, si ottiene l’oggetto { name: 'Batman Clone', city: 'Gotham' }.

4. Riassunto

JavaScript fornisce 3 buoni modi per clonare oggetti: usando l’operatore spread, l’operatore rest e la funzione Object.assign().

Oltre a clonare semplicemente gli oggetti, l’utilizzo dell’operatore spread e Object.assign() permette di aggiungere o aggiornare le proprietà durante la creazione del clone.

L’operatore Rest dà anche il vantaggio di saltare alcune proprietà durante la clonazione.

E la cosa grandiosa è che si possono combinare la diffusione dell’oggetto e il rest in una singola dichiarazione, in modo da poter clonare l’oggetto, e allo stesso tempo aggiungere, aggiornare o saltare le proprietà dall’essere clonato.

Questo è utile se volete abbracciare l’immutabilità ed essere in grado di manipolare le proprietà dell’oggetto clonato sul posto.

Quali altri buoni modi per clonare oggetti in JavaScript conoscete?