JSON.parse 和 JSON.stringify 怎么用
JavaScript 里处理 JSON,翻来覆去就这两个方法。但用错场景的情况很常见。
JSON.parse:字符串变对象
接口返回的是文本,fetch 的 response.json() 内部做的就是 parse。拿到字符串后想取字段,必须先转。
它有两个参数,第二个是 reviver,可以在解析过程中改值,比如把日期字符串转成 Date 对象。日常用得不多,知道有就行。
最常见的报错是 Unexpected token。原因通常是:这段字符串根本不是 JSON,比如接口返回了 HTML 错误页;或者被转义了两层,需要先解一次。
JSON.stringify:对象变字符串
发请求、写 localStorage、打日志,都要先把对象序列化。
它有三个参数:值、replacer、缩进。第三个参数传 2,输出就会带两个空格缩进,调试时很好用。
replacer 可以过滤字段,也能做敏感信息脱敏。比如把 token、手机号替换掉再打日志。
几个会丢东西的地方
undefined、函数、Symbol 作为对象属性时会被直接丢掉,作为数组元素时变成 null。
Date 对象会变成 ISO 字符串,转回来不会自动变回 Date。
循环引用会直接抛错,比如对象 A 的属性指向 A。
NaN 和 Infinity 会变成 null,且不报错。这个最隐蔽,数据悄悄变了。
一个常见误区
用 JSON.parse(JSON.stringify(obj)) 做深拷贝。
对纯数据对象可以,但只要涉及 Date、undefined、函数、Map、Set,结果就不对。而且循环引用会直接崩。
调试建议
不确定序列化结果时,先把对象 stringify 再格式化看一遍。贴进 JSON 在线解析工具,能直观看到哪些字段丢了、哪些被转成了字符串。比在控制台里一层层展开快。