JS 深拷贝和深拷贝如何解决循环引用问题

1、先说深拷贝，相信这点大家还是很熟悉的，举个例子

let obj = {
	a: 1,
	b: {
		b_1: 2
	},
	c: [1, 2, 3]
}

方法1：

function deepCopy(obj) {
        let result = Array.isArray(obj) ? [] : {};
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                if (typeof obj[key] === 'object') {
                    result[key] = deepCopy(obj[key]);   //递归复制
                } else {
                    result[key] = obj[key];
                }
            }
        }
        return result;
    }

方法2

function deepClone(data) {
        // instanceof 实例 data 在不在Object构造函数中
        if (!data || !(data instanceof Object) || (typeof data === "function")) {
            return data || undefined;
        }
        let constructor = data.constructor;
        let result = new constructor();
        for (let key in data) {
            if (data.hasOwnProperty(key)) {
                result[key] = deepClone(data[key]);
            }
        }
      return result;
    }

这里的 data.constructor，constructor 属性返回对象的构造函数
JavaScript 数组 constructor 属性返回 function Array() { [native code] }
JavaScript 数字 constructor 属性返回 function Number() { [native code] }
JavaScript 字符串 constructor 属性返回 function String() { [native code] }
JavaScript 对象 constructor 属性返回 function Object() { [native code] }

2、可如果我们遇到这种情况呢

let obj = {
    a: 1,
    b: 2,
    c: [1, 2, 3],
    d: {aa: 1, bb: 2},
  };
  obj.e = obj;

很明显上面的方法肯定是不行的

这就引出了map、set、weekmap、weakset，我们先走偏些看下这几个方法

1）Map ：Map是一种键值对的集合，其中的键和值可以是任意类型的。与对象类似，它们可以通过键来访问值。不同之处在于，Map可以使用任意类型作为键，而对象只能使用字符串或Symbol类型作为键。Map还提供了许多有用的方法，例如size属性来获取键值对的数量，以及forEach()方法来遍历集合。
2）Set ：Set是一种值的集合，其中每个值都是唯一的。与数组不同，它们没有重复的元素，并且没有特定的顺序。Set提供了许多有用的方法，例如add()方法来添加新的值，delete()方法来删除值，has()方法来检查是否存在某个值，以及size属性来获取集合的大小。
3）WeakMap ：WeakMap与Map类似，也是一种键值对的集合。然而，它们的键必须是对象，而值可以是任何类型。与Map不同的是，WeakMap的键是弱引用，也就是说，如果键对象没有被其他地方引用，则它们可以被垃圾回收。这使得WeakMap非常适合缓存数据，因为当对象不再需要时，它们可以自动从WeakMap中删除，从而释放内存。
4）WeakSet ：WeakSet是一种值的集合，其中每个值都是唯一的，并且没有特定的顺序。与Set不同的是，它们的值也是弱引用的，因此可以被垃圾回收。WeakSet通常用于存储对象的引用，以避免内存泄漏。

下面是Map、Set、WeakMap和WeakSet的例子：

Map：

const myMap = new Map();
const key1 = 'key1';
const key2 = { name: 'John' };
const key3 = function () { console.log('Hello!'); };
myMap.set(key1, 'value1');
myMap.set(key2, 'value2');
myMap.set(key3, 'value3');
console.log(myMap.get(key1)); // 'value1'
console.log(myMap.get(key2)); // 'value2'
console.log(myMap.get(key3)); // 'value3'
console.log(myMap.size); // 3

我们创建了一个 Map 对象，并使用三个不同类型的键 (key1、key2、key3) 来存储三个值 (value1、value2、value3) 。我们可以使用 get() 方法来获取相应的值，使用 size 属性来获取键值对的数量。

Set：

const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');
console.log(mySet.has('value1')); // true
console.log(mySet.has('value4')); // false
console.log(mySet.size); // 3
mySet.delete('value2');
console.log(mySet.size); // 2

我们创建了一个 Set 对象，并使用 add() 方法向其中添加三个值 (value1、value2、value3) 。我们可以使用 has() 方法来检查集合中是否存在某个值，使用 size 属性来获取集合的大小，使用 delete() 方法来删除值。

WeakMap：

let key1 = { name: 'John' };
let key2 = { name: 'Mary' };
let weakMap = new WeakMap();
weakMap.set(key1, 'value1');
weakMap.set(key2, 'value2');
key1 = null;
console.log(weakMap.get(key1)); // undefined
console.log(weakMap.get(key2)); // 'value2'

我们创建了一个 WeakMap 对象，并使用两个对象键 (key1、key2) 来存储两个值 (value1、value2) 。然后我们将 key1 赋值为null，这将导致key1对象被垃圾回收，它们与值 value1 一起被从 WeakMap 中删除。当我们使用 get() 方法尝试访问已经被删除的键时，返回undefined。

WeakSet：

let obj1 = { name: 'John' };
let obj2 = { name: 'Mary' };
let weakSet = new WeakSet([obj1, obj2]);
console.log(weakSet.has(obj1)); // true
obj1 = null;
console.log(weakSet.has(obj1)); // false

我们创建了一个 WeakSet 对象，并向其中添加两个对象 (obj1、obj2) 。我们可以使用 has() 方法检查 WeakSet 中是否存在某个对象，当我们将 obj1 赋值为null时，它们与值一起被从 WeakSet 中删除。当我们使用 has() 方法尝试访问已经被删除的对象时，返回false。

Map、Set、WeakMap和WeakSet之间的区别和使用场景：

1. Map和Set：
   Map 和 Set 都是集合数据结构，不同之处在于：

1、Map存储键值对，可以使用任何类型作为键，而Set只存储值，并且每个值必须是唯一的。
2、Map提供了更多的方法来操作键值对，如get()、set()和size属性等。而Set则提供了更多的方法来操作值，如add()、delete()和has()等。

使用场景：

1、当需要存储键值对并且需要使用键来访问值时，可以使用 Map 。
2、当需要存储唯一的值时，可以使用 Set 。

2. WeakMap和WeakSet：

WeakMap 和 WeakSet 与 Map 和 Set 类似，但是它们的键或值是弱引用，也就是说当键或值对象没有其他引用时，它们可以被垃圾回收，不会影响程序的内存使用情况。不同之处在于：

1、WeakMap和WeakSet只能使用对象作为键或值。
2、WeakMap和WeakSet没有size属性，因为其内容可能会随时被垃圾回收。

使用场景：

1、当需要存储需要进行垃圾回收的对象，并且这些对象只能被作为键或值来存储时，可以使用 WeakMap 和 WeakSet 。
2、当需要在内存受限的情况下使用缓存时，可以使用 WeakMap 和 WeakSet 来存储数据，因为它们会随时被垃圾回收，从而释放内存。

总的来说， Map 和 Set 是非常常用的数据结构，用于存储和操作数据。 WeakMap 和 WeakSet 则更适合用于缓存数据和避免内存泄漏的情况。

扯半天概念，现在让我们看下具体在深拷贝解决循环引用时的使用

1、new Set()

 const o = {a: 1, b: 2};
 o.c = o;
 function isPrimitive(val) {
   return Object(val) !== val;
 }
 const set = new Set();
 function clone(obj) {
   const copied = {};
   for (const [key, value] of Object.entries(obj)) {
     if (isPrimitive(value)) {
       copied[key] = value;
     } else {
       if (set.has(value)) {
         if (Array.isArray(value)) {
           copied[key] = [...value];
         } else {
           copied[key] = {...value};
         }
       } else {
         set.add(value);
         copied[key] = clone(value);
       }
     }
   }
   return copied;
 }

2、new Map()

function isObject(obj) {
  return (typeof obj === "object" || typeof obj === "function") && obj !== null;
}
function cloneDeep1(source, hash = new Map()) {
 if (!isObject(source)) return source;
  if (hash.has(source)) return hash.get(source);
  var target = Array.isArray(source) ? [] : {};
  hash.set(source, target);

  for (var key in source) {
    if (Object.prototype.hasOwnProperty.call(source, key)) {
      if (isObject(source[key])) {
        target[key] = cloneDeep(source[key], hash);
      } else {
        target[key] = source[key];
      }
    }
  }
  return target;
}
let three = cloneDeep1(obj);
console.log(three);

3、new weekMap

function cloneDeep(source, hash = new WeakMap()) {
  if (!isObject(source)) return source;
  if (hash.has(source)) {
    // 新增代码，查哈希表
    let a = hash.get(source);
    return a;
  }

  let target = Array.isArray(source) ? [] : {};
  hash.set(source, target); // 新增代码，哈希表设值
  for (let key in source) {
    if (Object.prototype.hasOwnProperty.call(source, key)) {
      if (isObject(source[key])) {
        target[key] = cloneDeep(source[key], hash); // 新增代码，传入哈希表
      } else {
        target[key] = source[key];
      }
    }
  }
  return target;
}

希望对大家有所帮助，能看到最后的兄弟，帮忙点个赞吧！多谢