JSON.stringify使用中的bug！！！

前言

项目中遇到一个 bug，一个组件为了保留一份 JSON 对象，使用 JSON.stringify 将其转换成字符串，这样做当然是为了避免对象是引用类型造成数据源的污染。

但发现后面使用 JSON.parse 方法之后，发现数据有所变化。

代码示例：

 可以看到，Infinity 变成了 null，从而导致了后面的 bug。其实项目中自己踩 JSON.stringify 的坑已经很多了，借此机会好好整理一下，也给大家一个参考。

先说下这个问题的解决方法：

解决方法1：

简单粗暴，重新给 age 属性赋值

解决方法2：

 这就有点绕了，当做参考吧，其实我自己是直接使用了第一种方法。不过这里可以看到 JSON.stringify 实际上还有第二个参数，那它有什么用呢？接下来我们揭开它的神秘面纱。

JSON.stringify的基础语法

 

概念

        MDN 中文文档对它的解释如下：

        其实并不只是对象或者数组，普通的值也是可以的，只是平时用的少。

         简单来说，JSON.stringify() 就是将值转换为相应的 JSON 格式字符串。

JSON.stringify 强大的第二个参数 replacer

        这个参数是可选的，可以是一个函数，也可以是一个数组

        当是一个函数的时候，则在序列化的过程中，被序列化的每个属性都会经过该函数的转换和处理，看如下代码：

        这里其实就是一个筛选的作用，利用的是 JSON.stringify 中对象属性值为 undefined 就会在序列化中被忽略的特性（后面我们会提到）。

        值得注意的是，在一开始 replacer 函数会被传入一个空字符串作为 key 值，代表着要被 stringify 的这个对象。

上面 console.log(key, value) 输出的值如下：

 

可以看出，通过第二个参数，我们可以更加灵活的去操作和修改被序列化目标的值。

当第二个参数为数组的时候，只有包含在这个数组中的属性名才会被序列化：

 

 

中看不中用的第三个参数

指定缩进用的空白字符串，更多时候就是指定一个数字，代表几个空格：