JS基础：深拷贝，循环引用以及Map与WeakMap

2023-12-27 15:05:06

以下是您需要的文章草稿：

1. 深拷贝与浅拷贝

在JavaScript中，存在两种常见的拷贝方式：深拷贝和浅拷贝。浅拷贝仅复制对象的引用，而深拷贝则复制对象的实际值。这意味着，如果对象包含对其他对象的引用，浅拷贝只复制引用，而深拷贝则复制引用指向的对象。

例如：

const obj1 = {
  name: "John",
  age: 30,
  friends: ["Mary", "Bob", "Alice"]
};

const obj2 = obj1; // 浅拷贝

const obj3 = JSON.parse(JSON.stringify(obj1)); // 深拷贝

在上述代码中，obj2是对obj1的浅拷贝，而obj3是对obj1的深拷贝。这意味着，如果我们修改obj2的属性，obj1的属性也会受到影响，但如果我们修改obj3的属性，obj1的属性不会受到影响。

2. 循环引用

循环引用是指两个或多个对象相互引用，导致无法释放内存的情况。例如：

const obj1 = {
  name: "John",
  age: 30,
  friends: ["Mary", "Bob", "Alice"]
};

const obj2 = {
  name: "Mary",
  age: 25,
  friends: [obj1]
};

obj1.friends.push(obj2);

在上述代码中，obj1和obj2相互引用，导致无法释放内存。当我们尝试释放内存时，JavaScript引擎会不断在obj1和obj2之间循环，无法找到一个合适的释放点。

3. Map与WeakMap

Map和WeakMap是JavaScript中的两种内置数据结构，它们都是键值对的集合。但是，它们之间存在一些关键的区别。

Map ：Map允许键和值都是任意类型的数据，并且它可以遍历。
WeakMap ：WeakMap的键必须是对象，而值可以是任意类型的数据。WeakMap不能遍历，并且它不会阻止键对象被垃圾回收。

在循环引用的情况下，WeakMap可以起到很好的作用。我们可以使用WeakMap来存储对象，而不用担心循环引用。例如：

const obj1 = {
  name: "John",
  age: 30,
  friends: ["Mary", "Bob", "Alice"]
};

const obj2 = {
  name: "Mary",
  age: 25,
  friends: [obj1]
};

const weakMap = new WeakMap();
weakMap.set(obj1, "John");
weakMap.set(obj2, "Mary");

console.log(weakMap.get(obj1)); // John
console.log(weakMap.get(obj2)); // Mary