JavaScript 数组的浅拷贝和深拷贝有什么区别？ [复制]

Question

根据 MDN 文档，调用 array.slice() 将创建数组的浅表副本。

看到这个MDN link for slice()。

但是，如果我在控制台中运行一个简单的测试：

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

检查 shallow_copy，我可以看到整个二维数组似乎被复制了。

浅拷贝和深拷贝有什么区别？如果我猜的话，我会称之为深拷贝。

Answer 1

基本上，您只是获得对原始变量/数组的引用。更改引用也会更改原始数组。您需要遍历原始数组的值并形成一个副本。

考虑这个例子：

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

假设您想创建一个副本，这样即使您更改了原始值，您也可以始终返回到原始值。

我可以这样做：

var dup = orig; //Shallow copy!

如果我们改变一个值：

dup.a = 'Apple';

这个语句也将从orig 更改为a，因为我们有一个浅拷贝，或者对var orig 的引用。这意味着，您也会丢失原始数据。

但是，通过使用原始 orig 变量的属性创建一个全新的变量，您可以创建一个深层副本。

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

现在如果你更改dup.a，它只会影响dup 而不会影响orig。

Answer 2

要查看差异，请尝试：

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

您会看到test 已被修改！这是因为虽然您可能已将值复制到新数组中，但嵌套数组仍然是同一个。

深拷贝会递归地执行浅拷贝，直到一切都是原始副本的新副本。