logo

Come clonare un array in JavaScript?

In JavaScript, clonare un array significa creare un nuovo array con gli stessi elementi dell'array originale. La clonazione di un array in JavaScript è utile quando si desidera creare un nuovo array con gli stessi elementi di un array esistente, senza modificare l'array originale.

Quando clonare l'array?

Se desideri eseguire alcune operazioni su un array, come l'ordinamento, il filtraggio o la mappatura, ma non desideri modificare l'array originale, puoi creare un clone dell'array originale ed eseguire invece le operazioni sul clone.



  • Quando si passa un array a una funzione come argomento, è possibile assicurarsi che la funzione non modifichi l'array originale. In questo caso, puoi invece passare un clone dell'array.
  • Se desideri conservare l'array originale per riferimento futuro, puoi creare un clone dell'array originale e utilizzare il clone per ulteriori elaborazioni o manipolazioni.
  • Se si dispone di un array che contiene oggetti o array come elementi e si desidera evitare di modificare gli oggetti o gli array originali, è possibile creare un clone dell'array con cui lavorare, in modo che le modifiche agli oggetti o agli array nel clone non vengano modificate. influenzare gli oggetti o gli array originali.

Così, clonare un array in JavaScript è una tecnica utile per lavorare con gli array in modo da preservare l'integrità dell'array originale e dei suoi elementi.

Ecco alcuni casi d'uso comuni per la clonazione di un array:

Tabella dei contenuti



Utilizzando il metodo Array.slice()

Noi usiamo il metodo delle fette per creare una copia superficiale di un array. Questo metodo crea un nuovo array con un sottoinsieme di elementi dell'array originale.

Esempio: Questo esempio mostra l'implementazione dell'approccio sopra spiegato.

Javascript
const originalArray = [1, 2, 3]; const clonedArray = originalArray.slice(); console.log(clonedArray);>

Produzione
[ 1, 2, 3 ]>

Utilizzando l'operatore spread

Usando il operatore di diffusione è un modo conciso e semplice per clonare un array in JavaScript. L'operatore di diffusione consente di espandere un array in singoli elementi, che possono quindi essere utilizzati per creare un nuovo array.



Esempio: Questo esempio mostra l'implementazione dell'approccio sopra spiegato.

Javascript
const originalArray = [1, 2, 3]; const clonedArray = [...originalArray]; console.log(clonedArray);>

Produzione
[ 1, 2, 3 ]>

Utilizzando il metodo Array.from()

Usando il Array.da() Il metodo è un altro modo per clonare un array in JavaScript. Questo metodo crea un nuovo array da un array esistente, utilizzando una funzione di mappatura opzionale per trasformare i valori nel nuovo array.

Esempio: Questo esempio mostra l'implementazione dell'approccio sopra spiegato.

Javascript
const originalArray = [1, 2, 3]; const clonedArray = Array.from(originalArray); console.log(clonedArray);>

Produzione
[ 1, 2, 3 ]>

Utilizzando il metodo Array.concat()

Usando il Array.concat() Il metodo è un altro modo per clonare un array in JavaScript. Questo metodo crea un nuovo array concatenando due o più array insieme.

Esempio: Questo esempio mostra l'implementazione dell'approccio sopra spiegato.

Javascript
const originalArray = [1, 2, 3]; const clonedArray = [].concat(originalArray); console.log(clonedArray);>

Produzione
[ 1, 2, 3 ]>

Utilizzando un ciclo for

Questo metodo prevede l'iterazione di ciascun elemento nell'array originale e la copia di ciascun elemento in un nuovo array.

come concatenare le stringhe in Java

Esempio: Questo esempio mostra l'implementazione dell'approccio sopra spiegato.

Javascript
const originalArray = [1, 2, 3]; const clonedArray = []; for (let i = 0; i < originalArray.length; i++) {  clonedArray.push(originalArray[i]); } console.log(clonedArray);>

Produzione
[ 1, 2, 3 ]>

Utilizzando il metodo Array.map()

Usando il Array.map() Il metodo è un altro modo per clonare un array in JavaScript. Questo metodo crea un nuovo array mappando ogni elemento dell'array originale su un nuovo valore.

Esempio: Questo esempio mostra l'implementazione dell'approccio sopra spiegato.

Javascript
const originalArray = [1, 2, 3]; const clonedArray = originalArray.map(x =>X); console.log(clonedArray);>

Produzione
[ 1, 2, 3 ]>

Utilizzando il metodo Array.from() con una funzione map

Usando il Array.da() metodo con una funzione map è un altro modo per clonare un array in JavaScript. Questo metodo crea un nuovo array mappando ogni elemento dell'array originale su un nuovo valore utilizzando una funzione fornita.

Esempio: Questo esempio mostra l'implementazione dell'approccio sopra spiegato.

Javascript
const originalArray = [1, 2, 3]; const clonedArray = Array.from(originalArray, x =>X); console.log(clonedArray);>

Produzione
[ 1, 2, 3 ]>

Utilizzando il metodo Array.of()

Questo metodo crea un nuovo array con gli stessi elementi dell'array originale.

Esempio: Questo esempio mostra l'implementazione dell'approccio sopra spiegato.

Javascript
const originalArray = [1, 2, 3]; const clonedArray = Array.of(...originalArray); console.log(clonedArray);>

Produzione
[ 1, 2, 3 ]>

Utilizzando i metodi JSON.parse() e JSON.stringify()

Usando il JSON.parse() E JSON.stringify() metodi è un altro modo per clonare un array in JavaScript. Questo metodo prevede la conversione dell'array originale in una stringa JSON e quindi l'analisi della stringa JSON per creare un nuovo array.

Esempio: Questo esempio mostra l'implementazione dell'approccio sopra spiegato.

Javascript
const originalArray = [1, 2, 3]; const clonedArray = JSON.parse(JSON.stringify(originalArray)); console.log(clonedArray);>

Produzione
[ 1, 2, 3 ]>

Utilizzando il metodo Object.assign()

Usando il Oggetto.assign() metodo è un altro modo per clonare un array in JavaScript. Questo metodo crea un nuovo array copiando le proprietà dell'array originale in un nuovo oggetto.

Esempio: Questo esempio mostra l'implementazione dell'approccio sopra spiegato.

Java fine per il ciclo
Javascript
const originalArray = [1, 2, 3]; const clonedArray = Object.assign([], originalArray); console.log(clonedArray);>

Produzione
[ 1, 2, 3 ]>

Utilizzando il metodo Array.reduce()

IL Metodo Array.reduce() esegue una funzione di riduzione su ciascun elemento dell'array, risultando in un singolo valore di output. Possiamo usarlo per costruire un nuovo array con gli stessi elementi dell'array originale.

Sintassi:

array.reduce((accumulator, currentValue, currentIndex, array) =>{ ... }, valoreiniziale);>

Esempio : In questo esempio, utilizzeremo il metodo Array.reduce() per creare un clone di un array.

JavaScript
// Input array const originalArray = [1, 2, 3, 4]; // Cloning the array using reduce const clonedArray = originalArray.reduce((acc, val) =>{ acc.push(val);  reso acc; }, []); // Visualizza gli array originali e clonati console.log('Original Array:', originalArray); // Risultato: [1, 2, 3, 4] console.log('Array clonato:', clonedArray); // Risultato: [1, 2, 3, 4]>

Produzione
Original Array: [ 1, 2, 3, 4 ] Cloned Array: [ 1, 2, 3, 4 ]>

Nota: Pertanto, quando si clona un array, è importante considerare la complessità dei dati e i requisiti prestazionali dell'applicazione.