如何避免 JSON 方法深拷贝将 Date 对象转为字符串的坑

大晨同学_6772

大晨同学_6772

2026-05-27

494人浏览

原创

JSON深拷贝会使Date变字符串而丢失类型和方法,RegExp变{},Function/undefined/Symbol消失,NaN/Infinity变null,Map/Set/BigInt等无法序列化;可用replacer+reviver修复Date,或用Lodash cloneDeep、手写递归处理。

如何避免 json 方法深拷贝将 date 对象转为字符串的坑

直接用 JSON.parse(JSON.stringify(obj)) 做深拷贝时,Date 对象会被转成 ISO 格式字符串,丢失其对象类型和方法(比如 .getTime()、.getFullYear()),后续调用会报错。这不是 bug,而是 JSON 规范本身不支持 Date 类型——它只认字符串、数字、布尔、null、数组和普通对象。

识别哪些值在 JSON 拷贝中会“变形”

除了 Date,以下类型同样无法保留原貌:

  • RegExp → 变成空对象 {}
  • Function、undefined、Symbol → 完全消失
  • NaN、Infinity → 变成 null
  • Map、Set、BigInt、TypedArray → 无法序列化,多数变为空或报错

用原生方式修复 Date 的深拷贝

可以在 JSON.stringify 的第二个参数(replacer)中拦截 Date,把它转为带类型标记的结构;再在 JSON.parse 的第二个参数(reviver)中还原:

function cloneWithDate(obj) {
  const dateRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
  
  const str = JSON.stringify(obj, (key, value) => {
    if (value instanceof Date) {
      return { __type: 'Date', value: value.toISOString() };
    }
    return value;
  });

  return JSON.parse(str, (key, value) => {
    if (value && typeof value === 'object' && value.__type === 'Date') {
      return new Date(value.value);
    }
    return value;
  });
}

这样 new Date('2025-03-15') 拷贝后仍是 Date 实例,instanceof Date 返回 true。

更稳妥的替代方案

如果项目允许引入轻量依赖,推荐使用 Lodash 的 cloneDeep,它已内置对 Date、RegExp、Map、Set、循环引用等的完整支持:

arcgis-js
arcgis-js

提供 ArcGIS Maps SDK for JavaScript 开发辅助,涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。

下载
import cloneDeep from 'lodash/cloneDeep';
const copied = cloneDeep(originalObj); // Date 保持不变

若必须零依赖,可手写递归深拷贝函数,对 value instanceof Date 分支单独处理:new Date(value.getTime()) 或 new Date(value.toString())。

开发时快速自查的小技巧

拷贝完成后,别只看打印结果——加一行类型校验:

console.assert(copied.createTime instanceof Date, 'createTime 应为 Date 类型');

或者在关键逻辑前做防御性判断:

if (!(copied.date instanceof Date)) {
  copied.date = new Date(copied.date); // 尝试从字符串恢复
}

不复杂但容易忽略

相关专题

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

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

2023.08.07

2195

5

json是什么
json是什么

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

2023.08.23

3482

1

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

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

2023.10.13

1156

3

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

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

2025.09.10

3999

7

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

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

2023.08.03

1818

5

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

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

2023.09.04

2884

5

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

2023.10.24

6204

49

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

2023.11.24

6009

6

java读取文件转成字符串的方法
java读取文件转成字符串的方法

Java8引入了新的文件I/O API,使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java,可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中,你需要将文件路径替换为你的实际文件路径,并且可能需要处理可能的IOException异常。想了解更多java的相关内容,可以阅读本专题下面的文章。

2024.03.22

7614

16

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 21.2万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 4.9万人学习