讲师中心 微信公众号
AI工具推荐 视频效率加速

如何在JavaScript中实现深拷贝与浅拷贝_五种方法对比与性能分析【教程】

星晨姑娘_9445

星晨姑娘_9445

发布时间:2026-01-17 21:49:15

|

431人浏览过

|

来源于php中文网

原创

浅拷贝只复制第一层,Object.assign({}, obj) 和 {...obj} 最常用,不处理嵌套对象、原型链、不可枚举属性及 Symbol 键;structuredClone 是现代首选深拷贝方案,支持多种内置类型和循环引用,但不支持 function、undefined、Symbol。

如何在javascript中实现深拷贝与浅拷贝_五种方法对比与性能分析【教程】

浅拷贝只复制第一层,Object.assign 和扩展运算符最常用

浅拷贝不会递归复制嵌套对象,所有深层引用仍指向原对象。这意味着修改副本的嵌套属性,原对象也会被改。

最常用的两种方式是 Object.assign({}, obj) 和 {...obj},它们行为一致,都只处理对象自身可枚举属性,不拷贝原型链、不可枚举属性或 symbol 键(除非手动指定)。

  • Object.assign 支持多个源对象合并,适合配置覆盖场景
  • 扩展运算符写法更简洁,但不能直接用于 undefined 或 null —— 会报 TypeError: Cannot spread 'undefined'
  • 两者都不处理 Date、RegExp、Map、Set 等特殊类型,拷贝后仍是原引用

JSON 序列化反序列化是最简单的深拷贝,但有严重限制

JSON.parse(JSON.stringify(obj)) 是开发者最常写的“深拷贝”,但它根本不是通用解法。

它会在多种情况下静默失败或丢失数据:

立即学习“Java免费学习笔记(深入)”;

  • 函数、undefined、Symbol 键会被直接忽略
  • Date 变成字符串,RegExp 变成空对象 {}
  • 循环引用会抛出 TypeError: Converting circular structure to JSON
  • 无法保留原型链,所有结果都是纯 Object 实例

仅适用于纯数据对象(POJO),且确认不含上述类型时才可临时使用。

结构化克隆 API:structuredClone 是现代浏览器首选

structuredClone 是目前最接近“开箱即用深拷贝”的标准方案,支持 Map、Set、Date、RegExp、ArrayBuffer、TypedArray、Error 等,并能处理循环引用。

cn-json-diff
cn-json-diff

比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现,无需 API 密钥。

下载

但它有明确兼容性边界:

  • Chrome 98+、Firefox 94+、Safari 15.4+ 支持;Node.js 17.0+(需启用 --experimental-structured-cloning,18.12+ 默认开启)
  • 不支持 function、undefined、Symbol(会抛 DataCloneError)
  • 无法克隆带有自定义 toJSON 方法的对象(该方法会被忽略)
const original = { a: 1, b: new Set([1, 2]), c: /test/ };
const cloned = structuredClone(original); // ✅ 安全、高效、语义清晰

手写递归深拷贝必须处理边界与类型,typeof 不够用

想完全控制逻辑或兼容老环境,就得自己实现。但别只靠 typeof x === 'object' 判断——它对 null、Array、Date、RegExp 全返回 'object',极易出错。

正确做法是结合 Object.prototype.toString.call(x) 或 Array.isArray、x instanceof Date 等精确识别:

  • null 必须单独判断,否则递归会崩
  • 要区分普通对象、数组、日期、正则、Map/Set,每种类型需不同构造逻辑
  • 循环引用需用 WeakMap 缓存已拷贝对象,避免无限递归
  • 不处理 prototype 和不可枚举属性时,结果只是“数据副本”,不是完整实例拷贝

真正健壮的手写版本代码量不小,日常开发中除非有强定制需求,否则不建议从零造轮子。

性能差异明显,structuredClone 最快,手写递归最慢

在大数据量(如 10k 层级嵌套对象或 1MB JSON 字符串)下,各方法耗时差距可达数倍:

  • structuredClone 是 C++ 层实现,无 JS 解析开销,速度最快,内存也更可控
  • JSON.parse(JSON.stringify()) 要经历两次序列化/解析,字符串中间态带来额外内存压力,大对象易 OOM
  • 手写递归因 JS 层遍历 + 多次类型判断 + WeakMap 查找,CPU 开销最大
  • Object.assign 和扩展运算符是浅拷贝,天然最快,但和深拷贝不在同一比较维度

真正需要深拷贝时,优先查浏览器/运行时是否支持 structuredClone;不支持再评估是否值得引入 Lodash 的 cloneDeep 或定制简化版——而不是默认选 JSON 方案。

相关文章

数码产品性能查询
数码产品性能查询

该软件包括了市面上所有手机CPU,手机跑分情况,电脑CPU,电脑产品信息等等,方便需要大家查阅数码产品最新情况,了解产品特性,能够进行对比选择最具性价比的商品。

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2255

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3662

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1216

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

4219

2025.09.10

chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2906

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5939

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

4207

2026.03.24

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

549

2023.09.22

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

0

2026.11.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn