js 数组克隆方法 小结

以下是关于“js 数组克隆方法 小结”的完整攻略：

标准的数组克隆方式

在JavaScript中，有两种标准的数组克隆方式：

1. 利用ES6的扩展运算符(...)

const arr1 = [1, 2, 3];
const arr2 = [...arr1];

console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]

// 修改原数组
arr1.push(4);
console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3]

该方法使用扩展运算符(...)，可以非常简单地将一个数组克隆到另一个数组中。由于扩展运算符是浅拷贝，只能复制数组的一层，如果数组中还有对象嵌套的情况就需要其他方式来克隆。

1. 利用Array.from方法

const arr1 = [1, 2, 3];
const arr2 = Array.from(arr1);

console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]

// 修改原数组
arr1.push(4);
console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3]

该方法利用Array.from方法，将一个类数组对象或可迭代对象转换成一个真正的数组。由于该方法也只能复制数组的一层，所以复杂的数据结构不适用于该方法。

深克隆

如果一个数组嵌套了其他对象或数组，那么上述方法是无法实现深克隆的。在这种情况下，可以使用一些其他方法：

1. 递归

最常见的做法是采用递归，遍历原数组的每一个元素，如果是数组或对象则递归调用克隆方法来处理子元素：

function cloneArrayDeeply(arr) {
  let clone = [];
  for(let i = 0; i < arr.length; i++) {
    clone[i] = typeof arr[i] === 'object' ? cloneArrayDeeply(arr[i]) : arr[i];
  }
  return clone;
}

const arr1 = [[1, 2], [3, 4], {name: '张三'}];
const arr2 = cloneArrayDeeply(arr1);

// 修改原数组嵌套的对象
arr1[2].name = '李四';
console.log(arr1); // [[1, 2], [3, 4], {name: '李四'}]
console.log(arr2); // [[1, 2], [3, 4], {name: '张三'}]

1. JSON序列化反序列化

将原数组转换为JSON字符串，再将字符串解析为新数组，这也可以达到深克隆的目的：

function cloneArrayDeeply(arr) {
  return JSON.parse(JSON.stringify(arr));
}

const arr1 = [[1, 2], [3, 4], {name: '张三'}];
const arr2 = cloneArrayDeeply(arr1);

// 修改原数组嵌套的对象
arr1[2].name = '李四';
console.log(arr1); // [[1, 2], [3, 4], {name: '李四'}]
console.log(arr2); // [[1, 2], [3, 4], {name: '张三'}]

需要注意的是，该方法虽然可以克隆深层嵌套的数组和对象，但也有一些缺陷，如无法序列化undefined、函数、Symbol等类型，以及无法处理循环引用的情况。

示例说明

以下是两个示例说明：

1. 针对第一种克隆方式的示例

const arr1 = [1, [2, 3], {name: '张三'}];
const arr2 = [...arr1];

console.log(arr1); // [1, [2, 3], {name: '张三'}]
console.log(arr2); // [1, [2, 3], {name: '张三'}]

// 修改原数组嵌套的对象
arr1[2].name = '李四';
console.log(arr1); // [1, [2, 3], {name: '李四'}]
console.log(arr2); // [1, [2, 3], {name: '李四'}]

在这个示例中，我们使用扩展运算符(...)将数组arr1克隆到数组arr2中，并且修改原数组中嵌套的对象。可以看到，两个数组都发生了变化。

1. 针对深层嵌套数组的示例

const arr1 = [1, [2, 3], {name: '张三'}];
const arr2 = cloneArrayDeeply(arr1);

console.log(arr1); // [1, [2, 3], {name: '张三'}]
console.log(arr2); // [1, [2, 3], {name: '张三'}]

// 修改原数组嵌套的对象
arr1[2].name = '李四';
console.log(arr1); // [1, [2, 3], {name: '李四'}]
console.log(arr2); // [1, [2, 3], {name: '张三'}]

在该示例中，我们使用递归的方式实现了数组的深克隆，并且修改了原数组中嵌套的对象。可以看到，只有原数组发生了变化，新数组依旧保持不变。