JavaScript如何正确克隆二维数组？现有方法失效求示例

你遇到的问题本质是浅拷贝和深拷贝的区别：直接赋值array2 = array1是完全引用，Object.create()也只是基于原数组创建了新的外层数组，但内层的子数组仍然是原引用，所以修改子元素会同步影响原数组。下面是几种可靠的克隆方案：

1. 基础二维数组克隆（元素为基本类型） #

如果你的二维数组里只有数字、字符串这类基本类型，用map配合展开运算符或slice()就能实现完全隔离的克隆：

方法一：map + 展开运算符 #

const originalArr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const clonedArr = originalArr.map(subArr => [...subArr]);

// 测试：修改克隆数组的元素
clonedArr[0][0] = 99;
console.log(originalArr[0][0]); // 输出1，原数组不受影响

方法二：map + slice() #

slice()不带参数时会返回子数组的浅拷贝，效果和展开运算符一致：

const originalArr = [[1, 2, 3], [4, 5, 6]];
const clonedArr = originalArr.map(subArr => subArr.slice());

2. 嵌套引用类型的深克隆 #

如果二维数组的子元素包含对象、数组这类引用类型，需要递归遍历实现深拷贝，确保所有层级的引用都被复制：

function deepClone2DArray(arr) {
  return arr.map(item => {
    // 如果当前元素是数组，递归克隆；否则直接返回值
    return Array.isArray(item) ? deepClone2DArray(item) : item;
  });
}

// 测试：包含对象的二维数组
const originalArr = [[1, { name: "Alice" }], [2, { name: "Bob" }]];
const clonedArr = deepClone2DArray(originalArr);

clonedArr[0][1].name = "Charlie";
console.log(originalArr[0][1].name); // 输出Alice，原对象不受影响

3. 快速方案（有局限性） #

用JSON.parse(JSON.stringify())是一种快速实现深拷贝的方法，但它无法处理函数、undefined、Symbol、循环引用，适合元素都是JSON兼容类型的场景：

const originalArr = [[1, 2], [3, 4]];
const clonedArr = JSON.parse(JSON.stringify(originalArr));

内容的提问来源于stack exchange，提问作者th168