JavaScript二维数组和对象的深拷贝与浅拷贝实例分析

概述

在JavaScript中，数组和对象是两个广泛使用的数据结构，它们在实际开发中经常需要进行拷贝操作。拷贝操作没有统一的标准，被分为深拷贝和浅拷贝两种类型。当数组或对象中的元素比较简单时，使用浅拷贝已经能满足需求。但若数组或对象中存在嵌套的元素，使用浅拷贝时会出现意想不到的结果。此时需要使用深拷贝来保证数据的正确性。

在本篇攻略中，我们将讨论JavaScript中二维数组和对象的深拷贝与浅拷贝的实现方式以及应用场景。

浅拷贝

JavaScript中浅拷贝是指拷贝对象或数组的第一层数据，而保留对象或数组中的引用。当源对象或源数组改变时，拷贝后的对象或数组也会随之改变。

我们可以使用for循环或Object.assign()来实现浅拷贝。以下是两个示例：

使用for循环实现浅拷贝

const sourceArr = [1, 2, 3, [4, 5]];
const copyArr = [];

for (let i = 0; i < sourceArr.length; i++) {
  copyArr[i] = sourceArr[i];
}

sourceArr[0] = 100;
console.log(copyArr); // [1, 2, 3, [4, 5]]

使用Object.assign()实现浅拷贝

const sourceObj = {
  name: 'Alice',
  age: 20,
  address: {
    city: 'Beijing',
    street: 'Xizhimen'
  }
};
const copyObj = Object.assign({}, sourceObj);

sourceObj.name = 'Bob';
sourceObj.address.city = 'Shanghai';
console.log(copyObj); // {name: 'Alice', age: 20, address: {city: 'Shanghai', street: 'Xizhimen'}}

深拷贝

JavaScript中深拷贝是指拷贝所有层的数据，不保留原始对象或数组的引用。深拷贝后的对象或数组与原始对象或数组是完全独立的，不会互相影响。

我们可以使用递归函数或JSON.parse(JSON.stringify())来实现深拷贝。以下也是两个示例：

使用递归函数实现深拷贝

const sourceArr = [1, 2, 3, [4, 5]];
const deepCopyArr = [];

function deepCopy(source, copy) {
  for (let i = 0; i < source.length; i++) {
    if (source[i] instanceof Array) {
      copy[i] = [];
      deepCopy(source[i], copy[i]);
    } else {
      copy[i] = source[i];
    }
  }
}

deepCopy(sourceArr, deepCopyArr);

sourceArr[0] = 100;
sourceArr[3][0] = 400;
console.log(deepCopyArr); // [1, 2, 3, [4, 5]]

使用 JSON.parse(JSON.stringify()) 实现深拷贝

这种方式需要使用JSON对象对JavaScript数据进行序列化和反序列化。因此，如果被拷贝的对象或数组包含函数、RegExp等JavaScript类型时，将会失效。

const sourceObj = {
  name: 'Alice',
  age: 20,
  address: {
    city: 'Beijing',
    street: 'Xizhimen'
  }
};
const deepCopyObj = JSON.parse(JSON.stringify(sourceObj));

sourceObj.name = 'Bob';
sourceObj.address.city = 'Shanghai';
console.log(deepCopyObj); // {name: 'Alice', age: 20, address: {city: 'Beijing', street: 'Xizhimen'}}