js中深拷贝和浅拷贝的理解,它们的区别是什么

在JavaScript中,深拷贝和浅拷贝是用来复制对象和数据结构的两种不同方法,它们的区别在于复制的程度和对原始数据的影响。

浅拷贝(Shallow Copy):

  • 浅拷贝是一种复制操作,它创建一个新的对象,然后将原始对象的属性值复制到新对象中。这包括基本数据类型的值以及对象的引用。

  • 在浅拷贝中,新对象的属性值引用与原对象的属性值相同的对象。这意味着如果修改新对象中的引用类型属性的值,原对象中的相应属性也会受到影响,因为它们引用相同的对象。

  • 浅拷贝通常使用Object.assign()、展开运算符(...)或Object.create()等方法来执行。

    复制代码
    const originalObj = { a: 1, b: { c: 2 } };
    const shallowCopy = { ...originalObj };
    shallowCopy.b.c = 3; // 修改了浅拷贝对象,原对象也受影响
    console.log(originalObj.b.c); // 输出 3

深拷贝(Deep Copy):

  • 深拷贝是一种复制操作,它创建一个新的对象,然后递归复制原对象的属性值,包括嵌套对象和数组,确保新对象与原对象完全独立,不共享任何对象。
  • 在深拷贝中,新对象的属性值是原对象属性值的副本,不共享相同的对象引用。这意味着对新对象的修改不会影响原对象,因为它们是完全独立的。
  • 深拷贝通常需要自定义递归函数或使用第三方库来实现,因为JavaScript没有内置的深拷贝方法。

以下是一个手写实现深拷贝的JavaScript函数示例:

这个函数**deepCopy** 可以复制一个对象,包括嵌套的对象和数组,确保返回的对象是原对象的深拷贝,不共享任何对象引用。请注意,这个示例只适用于处理普通的JavaScript对象和数组,对于特殊对象类型(如函数、正则表达式等)可能需要更多的处理。

复制代码
function deepCopy(obj) {
  // 检查如果传入的是非对象,直接返回
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  // 创建一个新的对象或数组来存储复制的值
  const copy = Array.isArray(obj) ? [] : {};

  // 遍历原对象的属性
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      // 递归复制嵌套对象或数组
      copy[key] = deepCopy(obj[key]);
    }
  }

  return copy;
}

// 示例用法
const originalObj = {
  a: 1,
  b: {
    c: 2,
    d: [3, 4],
  },
};

const deepCopyObj = deepCopy(originalObj);
deepCopyObj.b.d[0] = 100; // 修改深拷贝后的对象,原对象不受影响

console.log(originalObj.b.d[0]); // 输出 3
console.log(deepCopyObj.b.d[0]); // 输出 100

以下是使用JSON方法进行深拷贝示例:

复制代码
const originalObj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(originalObj)); // 使用JSON方法进行深拷贝
deepCopy.b.c = 3; // 修改深拷贝对象,原对象不受影响
console.log(originalObj.b.c); // 输出 2

总之,区别在于浅拷贝只复制对象属性的引用,而深拷贝复制对象属性的副本。深拷贝通常更安全,但可能会导致性能开销,特别是对于嵌套结构复杂的对象。选择深拷贝或浅拷贝取决于你的需求以及对象结构的复杂性。

相关推荐
腾讯TNTWeb前端团队2 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰5 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪5 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪5 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy6 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom7 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom7 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom7 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom7 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom7 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试