前言

相信大多数人使用JSON.parse()和JSON.stringfy()这两个方法，只知道它们的第一个参数，这也是大多数人用的最多的功能，将JSON数据转化为JS对象。但是实际上，这两个方法除了第一个参数之外，还有其它参数，并且在转换过程中发挥着重要的作用。

方法详解

JSON.parse()

参数说明

JSON.parse()一共有两个参数，具体使用语法和参数的值、作用如下图所示

js 复制代码

JSON.parse(text[, reviver])
// text，必传，要被解析的JSON字符串
// reviver，选传，转换时的参数

reviver函数，可以对需要转换的数据进行遍历，并按照要求对数据进行处理，函数如果有返回值，则key值对应的value值就是返回值；如果没有返回值（或返回undefined），则该属性会被删除。

使用场景一

当需要将JSON数据转化为JS对象，并对数据进行处理时，平时我们可能是先将数据进行转换，再进行其它处理，实际上在转换的过程中可以传入第二个参数对数据进行处理。例如现在我们一个JSON数据的数组，我们需要将其转化为JS数据，并对其中某个属性进行操作，可以用以下的方法：

js 复制代码

let array = '[{"name": "apple", "price": 100}, {"name": "peach", "price": 300}, {"name": "watermelon", "price": 100}]';
array = JSON.parse(array, function (key, value) {
  console.log('key', key);
  console.log('value', value);
  /*
   key name, value apple, key price, value 100, key 0, value {name: 'apple', price: 400}
   key name, value peach, key price, value 300, key 1, value {name: 'peach', price: 600}
   key name, value watermelon, key price, value 100, key 2, value {name: 'watermelon', price: 400}
   key   , value [{name: 'apple', salary: 400}, {name: 'peach', salary: 600}, {name: 'waterwelon', salary: 400}]
  */
     // 对价格进行处理
     if (key === 'price') {
       return value + 300
     }
     // 不处理的返回原来的值
     return value
 })
 console.log(array) // [{name: 'apple', salary: 400}, {name: 'peach', salary: 600}, {name: 'waterwelon', salary: 400}]

从上述代码我们可以看出，在使用JSON.parse()的时候，可以传入第二个参数，并且参数为一个函数，函数的参数分别为key 和value 。函数执行的过程，首先是对JSON数组进行遍历，如果值是对象，会依次对对象的属性进行遍历，其中key 的值为属性名，value 的值为属性名，而函数return 的值会作为该key 的新的属性值，基于这种方式我们就可以在转化过程中根据不同的key值做不同的处理。当对象遍历完，下一次遍历得到的则是数组的下标和整个对象的值，最后一次遍历则是返回转化完的整个值。

使用场景二

这里需要注意的是，在处理函数中，返回值决定了key值对应的值，如果返回的是undefined，则会删除该属性，基于该特性也可以在转化过程中进行属性的删除。

js 复制代码

let array = '[{"name": "apple", "price": 100}, {"name": "peach", "price": 300}, {"name": "watermelon", "price": 100}]';
array = JSON.parse(array, function (key, value) {
     // 返回 undefined 删除价格属性
     if (key === 'price') {
       return undefined
     }
     // 不处理的返回原来的值
     return value
 })
 console.log(array) // [{name: 'apple'}, {name: 'peach'}, {name: 'waterwelon'}]

实现思路

这里简单讲一下JSON.parse()的实现思路，不考虑其它复杂的场景，代码如下：

js 复制代码

function myJsonParse(text, reviver) {
  // 通过eval函数可以把字符串转成对象
  // text = eval("(" + text + ")");
  // 文档建议不使用 eval 进行转换，而是使用 Function
  text = Function('"use strict";return (' + text + ")")();
  // 内部函数
  function objParse(holder, key) {
    let k;
    let v;
    let value = holder[key];
    // 判断值是不是对象
    if (value && typeof value === "object") {
      // 对象遍历
      for (k in value) {
        if (Object.prototype.hasOwnProperty.call(value, k)) {
          // 递归调用，接受执行reviver函数后的值
          v = objParse(value, k);
          // 如果不是undefined，则把最新的值赋值给k
          if (v !== undefined) {
            value[k] = v;
          } else {
            // 如果是undefined，则删除该属性，这也就为什么可能过滤属性的根本原因了
            delete value[k];
          }
        }
      }
    }
    // 返回执行reviver函数后的值
    return reviver.call(holder, key, value);
  }

  // 验证是否有传reviver且reviver是否是函数
  return reviver && typeof reviver === "function"
    ? objParse({ "": text }, "")
    : text;
}

小结

JSON.parse()的第二个参数，不仅可以处理JSON格式的数组，对象也是可以进行处理的，处理逻辑同处理数组时一致。对于eval()和Function()的使用，大家可以查看MDN文档。

JSON.stringfy()

参数说明

JSON.stringfy()一共有三个参数，具体使用语法和参数的值、作用如下图所示

js 复制代码

JSON.stringify(value[, replacer [, space]])
// obj，必传，要转换成JSON字符串的对象
// replacer，选传，转换时的参数
// space，选传，指定缩进用的空白字符串，用于美化输出

这里的replacer可以为数组，也可以为函数，当它为函数时使用方式与JSON.parse()一致，在这里就不过多讲解了，下面就简单讲下数组的用法。

js 复制代码

let array = [{name: "apple", price: 100}, {name: "peach", price: 300}, {name: "watermelon", price: 100}];
array = JSON.stringfy(array, ['name'])
console.log(array) // "[{"name": 'apple'}, {"name": 'peach'}, {"name": 'waterwelon'}]"

如果第二个参数为数组，则可以指定转化后的数据只保留数组中包含的key所对应的值。

实现思路

其实当使用JSON.stringfy()的时候，是调用了对象本身的toJSON()，如果对对象的toJSON()进行重写，当调用JSON.stringfy()时则返回的是重写后函数的返回值

js 复制代码

let obj = { a: 1 }
obj.toJSON = function() {
  return 'toJSON'
}
JSON.stringfy(obj) // 'toJSON'

注意事项

在使用JSON.stringfy()的过程中，还存在着许多需要注意的点

js 复制代码

/*
    1、循环引用时或尝试去转换BigInt类型的值会抛出TypeError
    2、对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。
    3、序列化对象的值有undefined、任意的函数以及symbol值，分为三种情况：
      3-1、在数组中，在序列化过程中会被转换成null
        function test(){}
        // [null,null,null]
        console.log(JSON.stringify([undefined, test, Symbol("")]))
      3-2、在非数组对象的属性值中，在序列化过程中会被忽略、
        // 有些对象属性的确可能会是这些类型，在序列化时会被忽略
        let object = {
          name: 'zs',
          age: 18,
          sex: undefined,
          say: function () {

          },
          id: Symbol()
        }
        // {"name":"zs","age":18}
        console.log(JSON.stringify(object))
      3-3、单独时，都会返回undefined
        // undefined
        console.log(JSON.stringify(undefined))
        // undefined
        console.log(JSON.stringify(function () {}))
        // undefined
        console.log(JSON.stringify(Symbol('1213')))
      3-4、NaN 和 Infinity 格式的数值及 null 都会被当做 null
        let object = {
          name: "zs",
          age: NaN,
          money: Infinity,
        };
        // {"name":"zs","age":null,"money":null}
        console.log(JSON.stringify(object)); 
        // [null,null]
        console.log(JSON.stringify([NaN, Infinity]))
*/

更多使用时的注意事项大家可以查看MDN文档

总结

可能大家在使用这些API的时候，只使用了部分功能，其它功能没有涉及到所以基本上不了解，我也是在某次偶然的机会中查看到了文档，才知道这些方法其实还有更多的用途而并不局限于对数据类型的转换。希望大家看完这篇文章能有所收获，在今后的学习工作中，对于使用的API，最好还是参考着文档使用，说不定还隐藏着某些你没用过但是又十分好用的功能。

你不知道的JSON.parse()和JSON.stringfy()

前言

方法详解

JSON.parse()

参数说明

使用场景一

使用场景二

实现思路

小结

JSON.stringfy()

参数说明

实现思路

注意事项

总结