如何用 JSON.parse 的第二个参数(Reviver)将日期字符串自动还原为 Date 对象

酷敏酱_6741

酷敏酱_6741

2026-04-17

683人浏览

原创

json.parse 的 reviver 函数对解析后每一层键值对逐个调用,先最深层后冒泡;需校验字符串是否为合法日期格式(如 iso 8601),避免误转非日期字符串或遗漏 return 导致属性被删。

如何用 json.parse 的第二个参数(reviver)将日期字符串自动还原为 date 对象

JSON.parse 的 reviver 函数到底怎么触发

它不是全局钩子,而是对 JSON.parse 解析后**每一层的键值对逐个调用**:先调最深层,再往上冒泡。只要某个属性值是字符串、且符合日期格式(比如 "2023-10-05T14:30:00.000Z"),你就可以在 reviver 里判断并替换成 Date 实例。

注意:reviver 的 this 指向当前对象(父级),key 是字符串,value 是已解析的原始值(还没被替换)——所以你不能靠 typeof value === 'string' 就无脑转,得加格式校验。

常见错误现象:
– 把所有字符串都转成 Date,结果把 "id": "abc123" 变成 Invalid Date
– 忘了 return 值,导致该字段被删(reviver 返回 undefined 会删除该属性)

怎么写一个安全的日期 reviver

核心是识别 ISO 8601 格式字符串,同时兼容常见后端返回变体(如带空格的 "2023-10-05 14:30:00" 或带毫秒的 "2023-10-05T14:30:00.123")。不建议用正则硬匹配全集,简单有效的方式是:

  • 先检查 typeof value === 'string'
  • 再用 new Date(value).toISOString() 反向验证:如果能生成合法 ISO 字符串,且与原字符串“语义等价”,就可信
  • 但要注意:new Date("2023-10-05") 和 new Date("2023-10-05T00:00:00") 生成的 ISO 不同(后者含时区),所以更稳妥的是用 Date.parse(value) !== NaN + 长度/字符特征初筛

实操建议用这个轻量版:

chartjs-reporter
chartjs-reporter

此技能用于在用户需要将结构化数据(查询结果、CSV 摘要、JSON 记录或 Python 字典/列表)转换为独立的 HTML 页面时使用。

下载
function dateReviver(key, value) {
  if (typeof value === 'string') {
    // 粗筛:长度在 10~30 之间,且含 - : T 或空格
    if (value.length >= 10 && value.length JSON.parse(jsonStr, dateReviver);

为什么不能在 reviver 里处理嵌套对象或数组的边界情况

reviver 是深度优先遍历,value 已经是解析后的 JS 值。比如 {"created_at": "2023-10-05T14:30:00Z", "meta": {"updated": "2023-10-06T09:15:00Z"}},reviver 会先收到 meta.updated 的字符串,再收到 meta 对象(此时 value 已是 { updated: Date }),最后才收到顶层对象。

这意味着:
– 你无法在 reviver 中“提前知道”某个字符串是否属于日期字段(没有 schema)
– 如果后端字段名不固定(比如有时叫 date,有时叫 occurred_at),光靠值判断容易误伤
– 数组项如果是日期字符串,也会被单独传入 reviver,没问题;但如果你依赖字段名(如只处理 key 包含 time 的),就得结合 key 判断

性能影响很小,但别在 reviver 里做复杂计算或异步操作——它同步执行,阻塞整个解析。

遇到 Invalid Date 却没报错,怎么定位问题

因为 new Date(invalidString) 不抛错,只返回 Invalid Date(其 getTime() 是 NaN)。最容易被忽略的是时区和格式歧义:

  • "2023-10-05 14:30:00" 在 Safari 中可能解析失败(缺少 T),而 Chrome 宽松接受
  • "05/10/2023" 是美式还是欧式?不同浏览器行为不一致
  • 后端返回的 "2023-10-05T14:30:00+0800"(无冒号)在某些旧环境可能失败

调试技巧:
– 在 reviver 里加 console.log({ key, value, parsed: new Date(value) })
– 用 Date.parse(value) 替代构造函数,它只返回时间戳或 NaN,更干净
– 如果项目可控,让后端统一返回带 T 和 Z 的完整 ISO 8601(如 "2023-10-05T14:30:00.000Z"),这是最省心的方案

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

js json

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

相关专题

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

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

2023.08.07

2135

5

json是什么
json是什么

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

2023.08.23

3282

1

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

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

2023.10.13

1096

3

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

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

2025.09.10

3759

7

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

4376

8

正则表达式不包含
正则表达式不包含

正则表达式,又称规则表达式,,是一种文本模式,包括普通字符和特殊字符,是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式的文本。php中文网给大家带来了有关正则表达式的相关教程以及文章,希望对大家能有所帮助。

2023.07.05

2901

4

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

2023.07.05

8002

9

java正则表达式匹配字符串
java正则表达式匹配字符串

在Java中,我们可以使用正则表达式来匹配字符串。本专题为大家带来java正则表达式匹配字符串的相关内容,帮助大家解决问题。

2023.08.11

812

5

正则表达式空格
正则表达式空格

正则表达式空格可以用“\s”来表示,它是一个特殊的元字符,用于匹配任意空白字符,包括空格、制表符、换行符等。本专题为大家提供正则表达式相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

520

5

热门下载

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

精品课程

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

共101课时 | 21.1万人学习

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

共39课时 | 4.9万人学习