深浅拷贝让你头痛？避免数据混乱只需这一招

前端

2023-12-16 09:58:40

相信各位开发大牛都深知，赋值操作看似简单，但背后却暗藏玄机，稍不注意就会陷入深浅拷贝的泥潭，让代码逻辑混乱不堪。今天，我将深入浅出地为你揭开深浅拷贝的神秘面纱，让你轻松掌握避免数据混乱的秘诀。

说到拷贝，首先要了解JavaScript中的数据类型：

1. 基本数据类型： 包括字符串、数字、布尔值等，其值存储在栈内存中。对基本数据类型进行赋值操作时，会直接复制值，不会影响原有数据。

2. 对象数据类型： 包括对象、数组、函数等，其值存储在堆内存中。对对象数据类型进行赋值操作时，实际复制的是对该对象的引用，而不是值本身。

明白了数据类型，我们再来看深浅拷贝：

1. 深拷贝： 创建一个新的对象，完全独立于原有对象，修改新对象的属性不会影响原有对象。

2. 浅拷贝： 创建一个新对象，但是只拷贝一层属性值，如果原有对象中包含对象或数组等引用类型，则这些引用的值不会被拷贝，仍然指向原有对象。

那我们在什么情况下会遇到深浅拷贝问题呢？

情况一：赋值给引用类型的变量

const obj1 = { name: "John" };
const obj2 = obj1;
obj2.name = "Jane";
console.log(obj1.name); // Jane

由于obj2直接指向obj1的内存地址，所以修改obj2的属性，也会影响obj1。

情况二：使用展开运算符或Object.assign

const obj1 = { name: "John" };
const obj2 = { ...obj1 };
obj2.name = "Jane";
console.log(obj1.name); // Jane

展开运算符和Object.assign只会浅拷贝对象，因此修改obj2的属性，仍然会影响obj1。

避免数据混乱的秘诀

要避免数据混乱，就需要根据实际情况选择合适的拷贝方式：

1. 深拷贝： 对于需要独立修改的对象，可以使用以下方法进行深拷贝：

// 使用JSON
const obj1 = { name: "John" };
const obj2 = JSON.parse(JSON.stringify(obj1));
// 使用递归
const obj1 = { name: "John", address: { city: "New York" } };
const deepCopy = (obj) => {
  const newObj = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    newObj[key] = typeof obj[key] === "object" ? deepCopy(obj[key]) : obj[key];
  }
  return newObj;
};
const obj2 = deepCopy(obj1);