在JavaScript中实现深拷贝有哪些高效且安全的方法?

风明吖_7807

风明吖_7807

2025-10-04

194人浏览

原创

structuredClone是现代浏览器推荐的深拷贝方法,支持多数数据类型并自动处理循环引用,但不支持函数、undefined等,需注意兼容性;2. 自定义递归函数通过WeakMap避免无限递归,兼容性好且可扩展,适合复杂场景;3. JSON序列化方法简洁但限制多,仅适用于纯数据对象;4. 第三方库如Lodash的cloneDeep功能全面且稳定,适合高要求场景但需引入依赖。选择应基于环境与需求。

在javascript中实现深拷贝有哪些高效且安全的方法?

在JavaScript中实现深拷贝,既要考虑性能,又要处理各种复杂数据类型。以下是几种高效且安全的方法,适用于不同场景。

1. 使用 structuredClone(现代浏览器推荐)

这是目前最安全、最简单的原生深拷贝方法,支持大多数常见数据类型,如对象、数组、Date、RegExp、Map、Set、ArrayBuffer等。

它自动处理循环引用,无需额外代码,性能良好。

示例:

const original = { name: 'Alice', info: { age: 25 } };
const cloned = structuredClone(original);
cloned.info.age = 30;
console.log(original.info.age); // 25,未受影响
注意:不支持函数、undefined、Symbol 和 WeakMap/WeakSet。仅在现代浏览器和 Node.js(v17+)中可用。

2. 自定义递归深拷贝函数(兼容性好)

当需要兼容旧环境或控制拷贝行为时,可手动实现深拷贝函数,处理循环引用和特殊类型。

关键点是使用 WeakMap 记录已访问对象,避免无限递归。

示例:

function deepClone(obj, seen = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  if (seen.has(obj)) return seen.get(obj);

  const clone = Array.isArray(obj) ? [] : {};
  seen.set(obj, clone);

  for (let key in obj) {
    if (Object.hasOwn(obj, key)) {
      clone[key] = deepClone(obj[key], seen);
    }
  }
  return clone;
}
此方法兼容性高,可扩展支持 Map、Set 等类型,适合需要精细控制的场景。

3. 利用 JSON 序列化(简单但有限制)

通过 JSON.parse(JSON.stringify()) 实现深拷贝,写法简洁,性能尚可。

但存在明显限制:

node-connect
node-connect

诊断Android、iOS及macOS配套应用的OpenClaw节点连接与配对故障,适用于二维码/设置码/手动连接失败或本地Wi-Fi问题时。

下载
  • 忽略 undefined、函数、Symbol
  • 无法处理循环引用(会报错)
  • Date 对象会被转为字符串
  • Map、Set、RegExp 等类型无法正确复制

仅建议用于纯数据对象(POJO),如配置项、API 响应数据等简单结构。

4. 第三方库(功能全面)

如 Lodash 的 _.cloneDeep(),经过充分测试,支持几乎所有类型,包括函数和循环引用。

优点是稳定可靠,缺点是引入额外依赖。

示例:

const _ = require('lodash');
const cloned = _.cloneDeep(original);
适合项目已使用 Lodash 或对深拷贝要求极高的场景。

基本上就这些。选择哪种方法取决于你的运行环境和数据复杂度。structuredClone 是未来趋势,自定义实现更灵活,JSON 方法仅限简单场景,第三方库则提供开箱即用的稳定性。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关专题

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

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

2023.08.07

1935

5

json是什么
json是什么

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

2023.08.23

2522

1

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

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

2023.10.13

876

3

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

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

2025.09.10

2799

7

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

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

2023.10.31

2271

5

php数据类型
php数据类型

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

2025.10.31

474

9

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

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

2026.02.12

402

19

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1498

5

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

2144

5

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 11.8万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习