JS 复制二维数组 - Javascript

在Javascript中，复制一个二维数组是一个很常见的操作。在这篇文章中，我们将介绍如何复制一个二维数组，以及如何避免常见的陷阱。

复制二维数组

要复制一个二维数组，我们可以使用Array.prototype.map()和Array.prototype.slice()方法。这两个方法分别用于遍历数组和创建副本。以下是一个简单的例子：

let arr1 = [[1,2], [3,4], [5,6]];
let arr2 = arr1.map(function(row) {
  return row.slice();
});

在这个例子中，我们首先定义了一个原始数组arr1。然后我们使用Array.prototype.map()方法遍历arr1，并在每个子数组上使用Array.prototype.slice()方法来创建子数组的副本。最后，我们将结果存储在新数组arr2中。

需要注意的是，如果子数组包含对象或其他可变值，则这种方法并不安全。在这种情况下，我们需要使用深度副本来确保我们复制的是值而不是引用。以下是一个使用JSON.parse()和JSON.stringify()方法来复制数组的示例：

let arr1 = [[1,2], [3,4], [5,6]];
let arr2 = JSON.parse(JSON.stringify(arr1));

在这个例子中，我们首先使用JSON.stringify()方法将原始数组arr1转换为JSON格式。然后我们使用JSON.parse()方法将JSON字符串转换回数组。由于JSON.parse()方法创建一个新对象的深度副本，因此我们可以确保我们复制的是值而不是引用。

避免常见的陷阱

在复制二维数组时，我们需要注意一些常见的陷阱。以下是这些陷阱以及如何避免它们：

陷阱1：复制引用而不是副本

如果我们使用以下代码复制二维数组，则会复制引用而不是副本：

let arr1 = [[1,2], [3,4], [5,6]];
let arr2 = arr1;

在这个例子中，我们使用=运算符将arr1赋值给arr2。这意味着arr1和arr2引用相同的对象，因此对任何一个数组的更改都会影响另一个数组。

我们应该使用Array.prototype.map()和Array.prototype.slice()方法而不是赋值=运算符来复制数组。

陷阱2：复制了数组的第一层，但没有复制子数组

如果我们使用以下代码只复制数组的第一层，则子数组将被复制而不是子数组的副本：

let arr1 = [[1,2], [3,4], [5,6]];
let arr2 = arr1.slice();

在这个例子中，我们使用Array.prototype.slice()方法复制arr1。由于slice()方法只复制数组的第一层，因此子数组将被复制，而不是子数组的副本。这意味着对任何子数组的更改都会影响原始数组和新数组。

我们应该使用Array.prototype.map()和Array.prototype.slice()方法来遍历和复制子数组的副本。

陷阱3：复制可变值的引用而不是副本

如果我们复制的子数组包含可变值（如对象或数组），则复制的是引用而不是副本：

let arr1 = [[{a:1}, {b:2}], [{c:3}, {d:4}], [{e:5}, {f:6}]];
let arr2 = arr1.slice();

在这个例子中，我们复制了一个包含对象的数组。由于slice()方法只复制数组的第一层，因此子数组将被复制，而不是子数组的副本。这意味着子数组中的任何对象都是原始数组和新数组中的同一个引用。

我们应该使用深度副本来确保我们复制的是值而不是引用。

结论

在Javascript中，复制二维数组是一个常见的操作。我们可以使用Array.prototype.map()和Array.prototype.slice()方法来复制数组。然而，在复制子数组中包含对象或其他可变值时，我们需要使用深度副本来确保我们复制的是值而不是引用。