随笔录--深拷贝和浅拷贝的区别

官方解析

深拷贝和浅拷贝是复制数据结构的两种不同方式。

浅拷贝是创建一个新的对象，新对象的一些属性引用原始对象中相同的属性。这意味着在原始对象或新对象上的更改会相互影响。

深拷贝是创建一个新的对象，并复制原始对象的所有属性，包括嵌套的对象和数组。这意味着在原始对象或新对象上的更改不会相互影响。

在 JavaScript 中，可以通过以下方式实现深拷贝：

JSON.parse() 和 JSON.stringify() 方法

这是实现深拷贝的一种简单方式，但它有一些限制，例如不能复制函数和特殊对象（如 Date）。同时，它不能处理包含循环引用的对象。

以下是使用 JSON.parse() 和 JSON.stringify() 方法实现深拷贝的示例代码：

const obj = { name: 'John', age: 30, address: { city: 'New York', state: 'NY' } };

const obj2 = JSON.parse(JSON.stringify(obj));

obj2.address.city = 'Chicago';

console.log(obj.address.city); // Output: New York
console.log(obj2.address.city); // Output: Chicago

递归拷贝对象

这种方法涉及递归遍历对象，并创建一个新的对象，复制原始对象的属性，并在需要时递归复制嵌套的对象和数组。这种方法可以处理循环引用，并复制函数和特殊对象。

以下是使用递归拷贝对象实现深拷贝的示例代码：

function deepClone(obj) {
  if (typeof obj === 'object' && obj !== null) {
    let result = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        result[key] = deepClone(obj[key]);
      }
    }
    return result;
  }
  return obj;
}

const obj = { name: 'John', age: 30, address: { city: 'New York', state: 'NY' } };

const obj2 = deepClone(obj);

obj2.address.city = 'Chicago';

console.log(obj.address.city); // Output: New York
console.log(obj2.address.city); // Output: Chicago

深拷贝的缺点是它可能会更加耗时，因为需要递归遍历整个对象图，复制所有属性和嵌套的对象和数组。而浅拷贝是一种更快的复制方式，因为它只复制了对象的引用。在某些情况下，浅拷贝可能会更有效。

 

浅拷贝与深拷贝的主要区别在与对引用类型的复制，深拷贝会复制对象中的数据，改变深拷贝对象中的属性原对象中的属性不会被影响。浅拷贝则是引用该对象，改变其中的属性会影响原来对象中的属性。也要理解浅拷贝与赋值的区别，赋值对于对象中的基本类型采用引用其地址的方式，但浅拷贝会复制基本类型的数据。

浅拷贝可以使用Object.assgin这个方法来拷贝。

深拷贝可以使用JSON.parse(JSON.stringfy())来实现，但是这个方式的缺陷是不能对函数进行拷贝。为了改善这个方法可以使用递归来拷贝。

以下是通过递归来实现深拷贝的代码

function clone(target, map = new Map()) {

if (typeof target === 'object') {

let cloneTarget = Array.isArray(target) ? [] : {};

if (map.get(target)) {

return map.get(target);

}

map.set(target, cloneTarget);

for (const key in target) {

cloneTarget[key] = clone(target[key], map);

}

return cloneTarget;

} else {

return target;

}

};