“多维解析”JS中的深拷贝：揭秘浅谈背后的真谛

2024-01-21 02:58:12

深入浅出，剥丝抽茧解深拷贝

JavaScript中的数据类型可分为基本类型和引用类型。基本类型包括字符串、数字、布尔值等，它们的值存储在栈内存中；引用类型包括对象、数组、函数等，它们的值存储在堆内存中，通过引用来访问。当对引用类型进行赋值操作时，实际上是将变量的指针指向了堆内存中的对象。

浅拷贝是指对引用类型进行赋值操作时，仅仅复制其指针，指向堆内存中同一块地址。这意味着对浅拷贝副本的修改会影响原始对象，反之亦然。

深拷贝是指对引用类型进行赋值操作时，会在堆内存中重新开辟一块内存地址，将原始对象的值完全复制过来存放起来。这意味

着深拷贝副本与原始对象完全独立，不受互相影响。

实战演练，揭秘深拷贝的多种实现方式

方法一：使用JSON.parse()和JSON.stringify()

const obj = { name: 'John', age: 30 };

// 使用JSON.stringify()将对象转换成JSON字符串
const jsonStr = JSON.stringify(obj);

// 使用JSON.parse()将JSON字符串转换成对象
const newObj = JSON.parse(jsonStr);

console.log(newObj); // { name: 'John', age: 30 }
console.log(obj === newObj); // false

方法二：使用Object.assign()

const obj = { name: 'John', age: 30 };

// 使用Object.assign()将对象的值复制到另一个对象中
const newObj = Object.assign({}, obj);

console.log(newObj); // { name: 'John', age: 30 }
console.log(obj === newObj); // false

方法三：使用递归

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

  if (Array.isArray(obj)) {
    return obj.map(item => deepCopy(item));
  }

  const newObj = {};
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }

  return newObj;
}

const obj = { name: 'John', age: 30, hobbies: ['coding', 'reading'] };

const newObj = deepCopy(obj);

console.log(newObj); // { name: 'John', age: 30, hobbies: ['coding', 'reading'] }
console.log(obj === newObj); // false