在这里插入图片描述

文章目录

浅拷贝（Shallow Copy）
- 1. 使用 `Object.assign()` 方法
- 2. 使用展开运算符（Spread Operator）
- 3. 使用数组的 `slice()` 或 `concat()` 方法
深拷贝（Deep Copy）
- 1. 使用 JSON 对象的方法
- 2. 使用递归方法自行实现深拷贝
循环引用（Circular Reference）
- 1. 手动打破循环引用
- 2. 使用第三方库或函数

在 JavaScript 中，深拷贝和浅拷贝是用于 复制对象的两种不同方式。
循环引用则是指一个对象内部存在对自身的引用。

浅拷贝（Shallow Copy）

浅拷贝是指创建一个新对象，并将原始对象的属性值复制到新对象中。具体而言，如果原始对象的属性是基本类型（如数字、字符串、布尔值等），则拷贝的是属性的值。但如果原始对象的属性是引用类型（如数组、对象等），则拷贝的是属性的引用，即新旧对象共享同一个引用。因此，在修改其中一个对象的属性时，另一个对象的属性也会受到影响。

下面我将详细讲解浅拷贝的实现方式和示例代码。

1. 使用 `Object.assign()` 方法

Object.assign() 是 JavaScript 中用于将一个或多个源对象的属性复制到目标对象的方法。它可以用于实现浅拷贝，例如将一个对象的属性复制到另一个对象。

示例代码：

let obj1 = {
  name: 'Alice',
  age: 25,
  hobbies: ['reading', 'music']
};

let obj2 = Object.assign({}, obj1);

在上述示例中，Object.assign(target, ...sources) 接收一个目标对象和一个或多个源对象作为参数。它会将源对象的属性复制到目标对象，并返回目标对象。通过将一个空对象作为目标对象，可以实现浅拷贝，将原始对象的属性复制到新对象中。

需要注意的是，Object.assign() 只会拷贝可枚举的自有属性，不会拷贝原型链上的属性。

2. 使用展开运算符（Spread Operator）

展开运算符 ... 可以用于展开可迭代对象（如数组、字符串等），也可以用于实现浅拷贝。

示例代码：

let obj1 = {
  name: 'Alice',
  age: 25,
  hobbies: ['reading', 'music']
};

let obj2 = { ...obj1 };

在上述示例中，{ ...obj1 } 使用展开运算符，将原始对象的属性复制到一个新对象中，实现了浅拷贝。

类似于 Object.assign()，展开运算符也只会拷贝可枚举的自有属性，不会拷贝原型链上的属性。

3. 使用数组的 `slice()` 或 `concat()` 方法

如果原始对象是一个数组，可以使用数组的 slice() 或 concat() 方法来实现浅拷贝。

示例代码：

let arr1 = [1, 2, 3, 4, 5];
let arr2 = arr1.slice(); // 或者使用 arr1.concat();

// 修改 arr2 的值，不影响 arr1
arr2.push(6);

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

在上述示例中，slice() 和 concat() 方法都可以用于创建一个新的数组，其中包含了原始数组的所有元素。通过将原始数组调用这些方法后的返回值赋值给新数组，可以实现浅拷贝。

需要注意的是，浅拷贝只会复制原始对象的一层属性，对于原始对象中的嵌套对象或数组，仍然是引用关系，因此对嵌套对象的修改会影响到拷贝后的对象。

综上所述，浅拷贝是一种简单而快速的复制方式，适用于对简单对象或数组进行复制。但需要注意避免对拷贝后的对象进行深层次的修改，以免影响原始对象和其他拷贝对象。如果需要实现完全独立的拷贝，可以考虑使用深拷贝。

深拷贝（Deep Copy）

深拷贝是指创建一个新对象，将原始对象的所有属性值递归地复制到新对象中。与浅拷贝不同的是，深拷贝会创建原始对象及其嵌套对象的完全独立副本，即使对拷贝后的对象进行修改，也不会影响到原始对象或其他拷贝对象。

下面我将详细讲解深拷贝的实现方式和示例代码。

1. 使用 JSON 对象的方法

JSON 对象提供了两个方法 JSON.stringify() 和 JSON.parse()，可以实现深拷贝。

示例代码：

let obj1 = {
  name: 'Alice',
  age: 25,
  hobbies: ['reading', 'music']
};

let obj2 = JSON.parse(JSON.stringify(obj1));

在上述示例中，JSON.stringify(obj1) 将原始对象转换为 JSON 字符串，JSON.parse() 方法将 JSON 字符串解析为新对象。此过程会递归复制原始对象及其嵌套对象的所有属性值。

不过需要注意的是，使用 JSON 方法进行深拷贝时，有一些特殊的数据类型无法被正确地处理，如 RegExp、Date 等。对于这些特殊类型的属性，拷贝后的结果可能不会与原始对象相同。

2. 使用递归方法自行实现深拷贝

通过递归方法，可以自行实现深拷贝。

示例代码：

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  let clone = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }

  return clone;
}

let obj1 = {
  name: 'Alice',
  age: 25,
  hobbies: ['reading', 'music']
};

let obj2 = deepClone(obj1);

在上述示例中，deepClone() 方法通过递归调用自身，将原始对象及其嵌套对象的所有属性值复制到新对象中。对于数组和普通对象，分别创建新的空数组或空对象，然后递归复制属性值。

这种方式可以处理包括特殊类型在内的所有属性，但需要注意避免出现循环引用的情况，否则可能导致无限递归。

需要注意的是，深拷贝的性能开销较大，尤其是对于复杂嵌套的对象和大数组来说。因此，在进行深拷贝时，需要合理评估数据量和性能要求。

综上所述，深拷贝是一种创建完全独立副本的复制方式，适用于对复杂对象或嵌套对象进行复制。但需要注意避免出现循环引用的情况，并且要考虑到深拷贝的性能开销。

循环引用（Circular Reference）

循环引用是指对象的一个属性指向该对象本身，或指向对象的祖先对象链中的其他对象。在进行深拷贝时，如果遇到循环引用，会导致无限递归的情况，可能导致程序崩溃或陷入死循环。

为了避免循环引用，在实现深拷贝时需要识别并跳过已经拷贝过的对象。一种常见的方法是使用一个缓存对象来存储已经拷贝过的对象，然后在拷贝过程中检查是否已存在缓存中，如果存在则直接返回缓存中的对象引用。

循环引用是指在对象之间存在相互引用的情况，形成一个循环链，导致无法正常进行垃圾回收和内存释放。当对包含循环引用的对象进行深拷贝或遍历时，会陷入无限循环，可能导致程序崩溃或出现意料之外的结果。

下面我将详细讲解循环引用的概念、示例和解决方法。

示例：

let obj1 = {
  name: 'Alice'
};

let obj2 = {
  value: 42,
  ref: obj1
};

obj1.ref = obj2;

在上述示例中，obj1 和 obj2 之间形成了相互引用的关系。obj2 的 ref 属性指向 obj1，而 obj1 的 ref 属性又指向 obj2。这样就形成了一个循环链，即循环引用。

循环引用问题的解决方法：

1. 手动打破循环引用

可以通过将其中一个对象的循环引用属性设置为 null 或者删除该属性，来手动打破循环引用关系。

示例代码：

obj1.ref = null;

或者使用 delete 操作符删除属性：

delete obj1.ref;

这样可以避免循环引用导致的问题，但可能会破坏原本对象间的关联性。

2. 使用第三方库或函数

可以使用第三方库（如 Lodash、jQuery 等）或自定义函数来处理循环引用，实现深拷贝而不受循环引用影响。

示例代码（使用 Lodash 库的 cloneDeep() 方法）：

const _ = require('lodash');

let obj1 = {
  name: 'Alice'
};

let obj2 = {
  value: 42,
  ref: obj1
};

obj1.ref = obj2;

let clonedObj = _.cloneDeep(obj1);