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

JavaScript 对象拷贝:浅拷贝与深拷贝的实现方案

冬敏小哥_5499

冬敏小哥_5499

发布时间:2025-11-15 20:53:02

|

378人浏览过

|

来源于php中文网

原创

浅拷贝只复制对象第一层属性,深层共享引用,常用方法有Object.assign、扩展运算符;深拷贝递归复制所有层级,实现方式包括JSON.parse(JSON.stringify())、递归函数处理循环引用、Lodash的cloneDeep和浏览器原生structuredClone。

javascript 对象拷贝:浅拷贝与深拷贝的实现方案

JavaScript 中对象拷贝分为浅拷贝和深拷贝,理解它们的区别和实现方式对开发非常重要。浅拷贝只复制对象的第一层属性,深层嵌套仍共享引用;而深拷贝会递归复制所有层级,生成完全独立的对象。

浅拷贝的实现方法

浅拷贝适用于对象只有一层基本数据类型属性的情况。以下是一些常见的浅拷贝方式:

  • Object.assign():将源对象的所有可枚举属性复制到目标对象
  • const obj1 = { a: 1, b: { c: 2 } };
    const obj2 = Object.assign({}, obj1);
  • 扩展运算符(...):语法简洁,使用广泛
  • const obj2 = { ...obj1 };
  • Array.prototype.slice()(针对数组)
  • const arr2 = arr1.slice();

注意:当对象包含嵌套对象或数组时,这些方法仅复制引用,修改嵌套结构会影响原对象。

深拷贝的基本实现思路

深拷贝需要递归遍历对象的所有属性,确保每一层都是新创建的。常见实现方式包括:

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

deep-java-review
deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文,推断业务需求,进行多维度评分和分类汇总,生成完整PRD文档。包含细粒度Java代码审查清单(Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载
  • JSON.parse(JSON.stringify()):简单有效,但有局限性
  • const newObj = JSON.parse(JSON.stringify(oldObj));

    这种方法无法处理函数、undefined、Symbol、Date、RegExp 和循环引用,且 Date 会被转为字符串。

  • 递归手动实现:更灵活,可控制类型处理
  • function deepClone(obj) {
     if (obj === null || typeof obj !== 'object') return obj;
     if (obj instanceof Date) return new Date(obj);
     if (obj instanceof RegExp) return new RegExp(obj);
     const cloned = Array.isArray(obj) ? [] : {};
     for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
       cloned[key] = deepClone(obj[key]);
      }
     }
     return cloned;
    }

处理循环引用

递归深拷贝在遇到循环引用时会陷入无限循环。可通过 WeakMap 记录已访问对象来解决:

function deepClone(obj, hash = new WeakMap()) {
 if (obj === null || typeof obj !== 'object') return obj;
 if (hash.has(obj)) return hash.get(obj); // 返回已存在的拷贝
 const cloned = Array.isArray(obj) ? [] : {};
 hash.set(obj, cloned); // 先记录引用
 for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
   cloned[key] = deepClone(obj[key], hash);
  }
 }
 return cloned;
}

现代工具库的支持

实际项目中推荐使用成熟库处理复杂情况:

  • Lodash 提供 _.cloneDeep() 方法,稳定支持各种类型和循环引用
  • const _ = require('lodash');
    const cloned = _.cloneDeep(original);
  • structuredClone():浏览器原生支持的深拷贝 API(较新)
  • const cloned = structuredClone(obj);

    该方法支持多数内置类型,但兼容性需注意(Node.js 17+,现代浏览器)

基本上就这些。选择拷贝方式时,根据数据结构复杂度和性能要求权衡。简单场景用扩展运算符或 JSON 方法,复杂对象建议用 Lodash 或 structuredClone。

热门AI工具

更多
PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

DeepSeek

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

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

蛙蛙写作

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

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

WorkBuddy

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

豆包大模型

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

UpDream
UpDream Hot

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

相关专题

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

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

2015

2023.08.07

json是什么
json是什么

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

2902

2023.08.23

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

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

996

2023.10.13

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

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

3279

2025.09.10

数据类型有哪几种
数据类型有哪几种

数据类型有整型、浮点型、字符型、字符串型、布尔型、数组、结构体和枚举等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2611

2023.10.31

php数据类型
php数据类型

本专题整合了php数据类型相关内容,阅读专题下面的文章了解更多详细内容。

514

2025.10.31

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

442

2026.02.12

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

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

529

2023.09.22

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

80

2026.09.30

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习

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

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