JS前端基础：浅拷贝与深拷贝的核心区别

一、前言在 JavaScript 中数据分为基本数据类型和引用数据类型。像对象、数组这类引用类型数据赋值时不会直接拷贝数据本体而是拷贝内存地址。因此我们在开发中会遇到 浅拷贝 和 深拷贝 两种数据拷贝方式。很多新手经常踩坑修改新对象旧对象数据也跟着改变本质原因就是没有分清浅拷贝和深拷贝的区别。本文用最简单通俗的语言讲透浅拷贝、深拷贝的原理和核心差异。二、什么是浅拷贝核心定义浅拷贝只复制对象的指针地址不复制对象本身新旧对象共享同一块内存空间。浅拷贝并不会创建全新的数据内容只是把「原对象的内存地址」复制给新对象。简单理解两个变量共用同一个数据本体。浅拷贝特性●只拷贝第一层地址不递归拷贝深层数据●新对象和原对象 共享内存●修改新对象的属性原对象会同步变化●适合简单单层对象不适合嵌套复杂对象浅拷贝代码示例// 原对象let obj1 {name: “张三”,age: 18}// 浅拷贝只拷贝地址let obj2 obj1// 修改新对象obj2.name “李四”// 新旧对象全部改变console.log(obj1.name) // 李四console.log(obj2.name) // 李四可以清晰看到修改新对象原对象数据被污染这就是浅拷贝最大的问题。三、什么是深拷贝核心定义深拷贝完全复制并创建一个一模一样的全新对象开辟新的内存空间新旧对象不共享内存。深拷贝会彻底拷贝对象的所有层级数据不是拷贝地址而是真正复制一份全新的数据本体。简单理解复制一份完全独立的副本两者毫无关联。深拷贝特性●完全拷贝所有层级数据包括嵌套对象、嵌套数组●新旧对象 内存独立、互不干扰●修改新对象旧对象保持不变●适合复杂嵌套对象、后台列表数据拷贝深拷贝代码示例// 原对象let obj1 {name: “张三”,age: 18}// 深拷贝开辟新内存生成全新对象let obj2 JSON.parse(JSON.stringify(obj1))// 修改新对象obj2.name “李四”// 原对象不受影响console.log(obj1.name) // 张三console.log(obj2.name) // 李四四、浅拷贝与深拷贝核心区别重点内存机制不同浅拷贝复制指针地址新旧对象 共享同一块内存深拷贝复制完整数据创建新内存新旧对象 内存独立数据影响不同浅拷贝修改新数据原数据会被修改数据污染深拷贝修改新数据原数据完全不变互不影响拷贝层级不同浅拷贝仅拷贝第一层深层依旧是地址拷贝深拷贝递归拷贝所有层级彻底复制完整对象使用场景不同浅拷贝简单单层对象、临时数据读取深拷贝编辑表单、修改列表数据、嵌套复杂对象、防止原数据污染五、开发常见拷贝方法区分浅拷贝方法直接赋值、Object.assign()、扩展运算符 …单层属于浅拷贝深拷贝方法JSON.parse(JSON.stringify())、递归手写深拷贝、Lodash 工具库 cloneDeep六、总结浅拷贝只复制对象指针地址不复制对象本体新旧对象共享内存修改会互相影响深拷贝完整复制对象数据创建全新独立内存新旧对象互不干扰浅拷贝速度快但容易污染原数据深拷贝安全性高、适合业务数据处理开发中如果需要修改拷贝后的对象且不影响原数据必须使用深拷贝。