В чем разница между мелкой копией и глубокой копией с массивами JavaScript?

В соответствии с документацией MDN вызов array.slice() создаст мелкую копию массива.

Однако, если я запускаю простой тест как таковой в консоли:

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

и проверите мелкую_копию, я вижу, что весь 2-мерный массив, кажется, скопирован.

В чем разница между мелкой копией и глубокой копией? Если бы я догадался, я бы назвал это глубокой копией.

Ответ 1

Чтобы увидеть разницу, попробуйте:

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

Вы увидите, что test было изменено! Это связано с тем, что, хотя вы, возможно, скопировали значения в новый массив, вложенный массив все тот же.

Глубокая копия будет рекурсивно выполнять мелкие копии, пока все не станет новой копией оригинала.

Ответ 2

В основном вы просто получаете ссылку на исходную переменную/массив. Изменение ссылки также изменит исходный массив. Вам нужно перебрать значения исходного массива и сформировать копию.

Рассмотрим следующий пример:

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

Предположим, вы хотите создать дубликат этого, так что даже если вы измените исходные значения, вы всегда можете вернуться к оригиналу.

Я могу это сделать:

var dup = orig; //Shallow copy!

Если мы изменим значение:

dup.a = 'Apple';

Этот оператор также изменит a на orig, так как у нас есть мелкая копия или ссылка на var orig. Это означает, что вы также теряете исходные данные.

Но, создав новую переменную, используя свойства исходной переменной orig, вы можете создать глубокую копию.

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

Теперь, если вы измените dup.a, это затронет только dup, а не orig.