项目中遇到一个 bug,一个组件为了保留一份 JSON 对象,使用 JSON.stringify 将其转换成字符串,这样做当然是为了避免对象是引用类型造成数据源的污染。
但发现后面使用 JSON.parse 方法之后,发现数据有所变化。
代码简化:
可以看到,Infinity 变成了 null,从而导致了后面的 bug。其实项目中自己踩 JSON.stringify 的坑已经很多了,借此机会好好整理一下,也给大家一个参考。
先说下这个问题的解决方法:
解决方法1:
简单粗暴,重新给 age 属性赋值
解决方法2:
这就有点绕了,当做参考吧,其实我自己是直接使用了第一种方法。不过这里可以看到 JSON.stringify 实际上还有第二个参数,那它有什么用呢?接下来我们揭开它的神秘面纱。
JSON.stringify 基础语法
概念
MDN 中文文档对它的解释如下:
JSON.stringify() 方法将一个 JavaScript 值(对象或者数组)转换为一个 JSON 字符串,如果指定了 replacer 是一个函数,则可以选择性地替换值,或者如果指定了 replacer 是一个数组,则可选择性地仅包含数组指定的属性。
我个人觉得这样解释是有所不妥的,不妥之处在于“对象或者数组”,因为实际上对于普通的值,我们也可以使用 JSON.stringify,只是我们很少这么用罢了。不过这个问题不大,我们文中介绍的也都是针对对象或者数组。
而英文版 MDN 的解释就会合理很多:
The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.
简单来说,JSON.stringify() 就是将值转换为相应的 JSON 格式字符串。
JSON.stringify 强大的第二个参数 replacer
这个参数是可选的,可以是一个函数,也可以是一个数组
当是一个函数的时候,则在序列化的过程中,被序列化的每个属性都会经过该函数的转换和处理,看如下代码:
这里其实就是一个筛选的作用,利用的是 JSON.stringify 中对象属性值为 undefined 就会在序列化中被忽略的特性(后面我们会提到)。
值得注意的是,在一开始 replacer 函数会被传入一个空字符串作为 key 值,代表着要被 stringify 的这个对象。
上面 console.log(key, value) 输出的值如下:
可以看出,通过第二个参数,我们可以更加灵活的去操作和修改被序列化目标的值。
当第二个参数为数组的时候,只有包含在这个数组中的属性名才会被序列化:
中看不中用的第三个参数
指定缩进用的空白字符串,更多时候就是指定一个数字,代表几个空格:
JSON.stringify 使用场景
判断对象/数组值是否相等
localStorage/sessionStorage 存储对象
我们知道 localStorage/sessionStorage 只可以存储字符串,当我们想存储对象的时候,需要使用 JSON.stringify 转换成字符串,获取的时候再 JSON.parse。
实现对象深拷贝
路由(浏览器地址)传参
因为浏览器传参只能通过字符串进行,所以也是需要用到 JSON.stringify。