Qual è la differenza tra una copia superficiale e una copia profonda con array JavaScript?

Question

Secondo la documentazione MDN che chiama array.slice() creerà una copia superficiale dell'array.

Vedere questo MDN link for slice().

Tuttavia, se si esegue un semplice test come tali nella console:

var test = [[1,2,3],7,8,9]; 
var shallow_copy = test.slice(); 

e ispezionare shallow_copy, posso vedere che l'intera matrice bidimensionale 2 sembra essere copiati.

Qual è la differenza tra una copia superficiale e una copia profonda? Se dovessi indovinare, l'avrei definito una copia profonda.

Answer 1

Per vedere la differenza, provare:

shallow_copy[0][2] = 4; 
console.dir(test); 

Vedrai che test è stato modificato! Questo perché mentre è possibile che i valori siano stati copiati nel nuovo array, l'array nidificato è sempre lo stesso.

Una copia profonda esegue ricorsivamente copie poco profonde fino a quando non è una nuova copia dell'originale.

Answer 2

Fondamentalmente si sta solo ottenendo un riferimento alla variabile/matrice originale. La modifica del riferimento cambierà anche la matrice originale. È necessario eseguire il loop dei valori della matrice originale e formare una copia.

Considerate questo esempio:

var orig = { a: 'A', b: 'B', c: 'C' }; 

Diciamo che si desidera creare un duplicato di questo, in modo che anche se si modificano i valori originali, si può sempre tornare all'originale.

posso fare questo:

var dup = orig; //Shallow copy! 

Se cambiamo un valore:

dup.a = 'Apple'; 

presente informativa fornisce inoltre cambiare a da orig, dal momento che abbiamo una copia, o un riferimento a var orig. Ciò significa che stai perdendo anche i dati originali.

Tuttavia, creando una nuova variabile utilizzando le proprietà dalla variabile originale orig, è possibile creare una copia profonda.

var dup = { a: orig.a, b: orig.b, c: orig.c }; //Deep copy! 

Ora, se si cambia dup.a, interesserà solo dup e non orig.