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六、总结浅拷贝只复制对象指针地址不复制对象本体新旧对象共享内存修改会互相影响深拷贝完整复制对象数据创建全新独立内存新旧对象互不干扰浅拷贝速度快但容易污染原数据深拷贝安全性高、适合业务数据处理开发中如果需要修改拷贝后的对象且不影响原数据必须使用深拷贝。

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

相关推荐

医疗AI大模型核心技术解析与落地实践

通勤、睡前、碎片时间都能用：一句一句读懂英语的低门槛方案

企业AI转型：跨越研发鸿沟的组织能力重构

更多资讯

3个坑讲透scalemode，这份速查手册救了你

switch下载慢排查3步走：最佳实践避坑指南

Win7支持多大内存？这份速查手册帮你搞定源码级配置

3个致命坑：pojie最佳实践助你面试通关

海森伯格不确定性原理代码实现：5个完整示例解决调不通难题

80后程序员的避坑指南：专属于80后的回忆源码解析

今日更新

3个坑点带你一文搞懂55gg小游戏源码

2026最新covar实战：3步搞定环境配置不再卡壳

3个Docker命令避坑指南：手写实现原理

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？