我在上一讲为你剖析了闭包这个难点，带你了解了作用域、闭包产生的原因及表现形式。那么这一讲，我们一起来手工实现一个 JSON.stringify 的方法。

这个方法能够站在全局考察你对 JS 各种数据类型理解的深度，对各种极端的边界情况处理能力，以及 JS 的编码能力。之所以将这篇作为这一模块的进阶，是因为我想把整个数据类型的知识点串起来，让你理解得更加融会贯通，能够更上一层楼。

在大厂的前端面试过程中，这个题目也经常会被问到。大部分候选人只知道这个方法的作用，而如果让他自己实现一个 JSON.Srtingify 方法的话，大多数人都不一定能写出来，或者即便能写出来一些，但是考虑的问题又不够全面。

因此你要想夯实自身 JavaScript 的编程基础，通过实践来实现一些 JS API 方法，是非常有必要的，所以这一讲我就来帮你搞懂它。

那么，到底什么是 JSON.stringify 方法？

方法基本介绍

JSON.stringify 是日常开发中经常用到的 JSON 对象中的一个方法，JSON 对象包含两个方法：一是用于解析成 JSON 对象的 parse()；二是用于将对象转换为 JSON 字符串方法的 stringify()。下面我们分别来看下两个方法的基本使用情况。

JSON.parse

JSON.parse 方法用来解析 JSON 字符串，构造由字符串描述的 JavaScript 值或对象。该方法有两个参数：第一个参数是需要解析处理的 JSON 字符串，第二个参数是可选参数提供可选的 reviver 函数，用在返回之前对所得到的对象执行变换操作。

该方法的语法为：JSON.parse(text[, reviver])

下面通过一段代码来看看这个方法以及 reviver 参数的用法，如下所示。

  1. const json = '{"result":true, "count":2}';
  2. const obj = JSON.parse(json);
  3. console.log(obj.count);
  4. console.log(obj.result);
  5. JSON.parse('{"p": 5}', function (k, v) {
  6. if(k === '') return v;     
  7. return v * 2;              
  8. });

上面的代码说明了，我们可以将一个符合 JSON 格式的字符串转化成对象返回；带第二个参数的情况，可以将待处理的字符串进行一定的操作处理，比如上面这个例子就是将属性值乘以 2 进行返回。

下面我们来了解一下 JSON.stringify 的基本情况。

JSON.stringify

JSON.stringify 方法是将一个 JavaScript 对象或值转换为 JSON 字符串，默认该方法其实有三个参数：第一个参数是必选，后面两个是可选参数非必选。第一个参数传入的是要转换的对象；第二个是一个 replacer 函数，比如指定的 replacer 是数组，则可选择性地仅处理包含数组指定的属性；第三个参数用来控制结果字符串里面的间距，后面两个参数整体用得比较少。

该方法的语法为：JSON.stringify(value[, replacer [, space]])

下面我们通过一段代码来看看后面几个参数的妙用，如下所示。

  1. JSON.stringify({ x: 1, y: 2 });
  2. JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] })
  3. function replacer(key, value) {
  4. if (typeof value === "string") {
  5. return undefined;
  6.   }
  7. return value;
  8. }
  9. var foo = {foundation: "Mozilla", model: "box", week: 4, transport: "car", month: 7};
  10. var jsonString = JSON.stringify(foo, replacer);
  11. console.log(jsonString);
  12. JSON.stringify({ a: 2 }, null, " ");
  13.  "a": 2
  14. }"*/
  15. JSON.stringify({ a: 2 }, null, "");

从上面的代码中可以看到，增加第二个参数 replacer 带来的变化：通过替换方法把对象中的属性为字符串的过滤掉，在 stringify 之后返回的仅为数字的属性变成字符串之后的结果；当第三个参数传入的是多个空格的时候，则会增加结果字符串里面的间距数量，从最后一段代码中可以看到结果。

下面我们再看下 JSON.stringify 的内部针对各种数据类型的转换方式。

如何自己手动实现？

为了让你更好地理解实现的过程，请你回想一下 “01 | 代码基本功测试（上）：JS 的数据类型你了解多少” 中的基本知识，我们当时讲了那么多种数据类型，如果它们都使用这个方法，返回的结果又会是怎么样的呢？

分析各种数据类型及边界情况

我们来分析一下都有哪些数据类型传入，传入了之后会有什么返回，通过分析的结果我们之后才能更好地实现编码。大致的分析汇总如下表所示（可参考 MDN 文档）。

06 | 进阶练习：带你一起实现 JSON.Stringify 方法 - 图1

上面这个表中，基本整理出了各种数据类型通过 JSON.stringify 这个方法之后返回对应的值，但是还有一个特殊情况需要注意：对于包含循环引用的对象（深拷贝那讲中也有提到）执行此方法，会抛出错误。

那么根据上面梳理的这个表格，我们来一起看下代码怎么编写吧。

代码逻辑实现

我们先利用 typeof 把基础数据类型和引用数据类型分开，分开之后再根据不同情况来分别处理不同的情况，按照这个逻辑代码实现如下。

  1. function jsonStringify(data) {
  2.   let type = typeof data;
  3.   if(type !== 'object') {
  4.     let result = data;
  5.     if (Number.isNaN(data) || data === Infinity) {
  6.       result = "null";
  7.     } else if (type === 'function' || type === 'undefined' || type === 'symbol') {
  8.       return undefined;
  9.     } else if (type === 'string') {
  10.       result = '"' + data + '"';
  11.     }
  12.     return String(result);
  13.   } else if (type === 'object') {
  14.     if (data === null) {
  15.       return "null"  
  16.     } else if (data.toJSON && typeof data.toJSON === 'function') {
  17.       return jsonStringify(data.toJSON());
  18.     } else if (data instanceof Array) {
  19.       let result = [];
  20.       data.forEach((item, index) => {
  21.         if (typeof item === 'undefined' || typeof item === 'function' || typeof item === 'symbol') {
  22.           result[index] = "null";
  23.         } else {
  24.           result[index] = jsonStringify(item);
  25.         }
  26.       });
  27.       result = "[" + result + "]";
  28.       return result.replace(/'/g, '"');
  29.     } else {
  30.       let result = [];
  31.       Object.keys(data).forEach((item, index) => {
  32.         if (typeof item !== 'symbol') {
  33.           if (data[item] !== undefined && typeof data[item] !== 'function' && typeof data[item] !== 'symbol') {
  34.             result.push('"' + item + '"' + ":" + jsonStringify(data[item]));
  35.           }
  36.         }
  37.       });
  38.       return ("{" + result + "}").replace(/'/g, '"');
  39.     }
  40.   }
  41. }

手工实现一个 JSON.stringify 方法的基本代码如上面所示，有几个问题你还是需要注意一下：

  1. 由于 function 返回’null’， 并且 typeof function 能直接返回精确的判断，故在整体逻辑处理基础数据类型的时候，会随着 undefined，symbol 直接处理了；
  2. 由于 01 讲说过 typeof null 的时候返回’object’，故 null 的判断逻辑整体在处理引用数据类型的逻辑里面；
  3. 关于引用数据类型中的数组，由于数组的每一项的数据类型又有很多的可能性，故在处理数组过程中又将 undefined，symbol，function 作为数组其中一项的情况做了特殊处理；
  4. 同样在最后处理普通对象的时候，key （键值）也存在和数组一样的问题，故又需要再针对上面这几种情况（undefined，symbol，function）做特殊处理；
  5. 最后在处理普通对象过程中，对于循环引用的问题暂未做检测，如果是有循环引用的情况，需要抛出 Error；
  6. 根据官方给出的 JSON.stringify 的第二个以及第三个参数的实现，本段模拟实现的代码并未实现，如果有兴趣你可以自己尝试一下。

整体来说这段代码还是比较复杂的，如果在面试过程中让你当场手写，其实整体还是需要考虑很多东西的。当然上面的代码根据每个人的思路不同，你也可以写出自己认为更优的代码，比如你也可以尝试直接使用 switch 语句，来分别针对特殊情况进行处理，整体写出来可能看起来会比上面的写法更清晰一些，这些可以根据自己情况而定。

实现效果测试

上面的这个方法已经实现了，那么用起来会不会有问题呢？我们就用上面的代码，来进行一些用例的检测吧。

上面自己实现的这个 jsonStringify 方法和真正的 JSON.stringify 想要得到的效果是否一样呢？请看下面的测试结果。

  1. let nl = null;
  2. console.log(jsonStringify(nl) === JSON.stringify(nl));
  3. let und = undefined;
  4. console.log(jsonStringify(undefined) === JSON.stringify(undefined));
  5. let boo = false;
  6. console.log(jsonStringify(boo) === JSON.stringify(boo));
  7. let nan = NaN;
  8. console.log(jsonStringify(nan) === JSON.stringify(nan));
  9. let inf = Infinity;
  10. console.log(jsonStringify(Infinity) === JSON.stringify(Infinity));
  11. let str = "jack";
  12. console.log(jsonStringify(str) === JSON.stringify(str));
  13. let reg = new RegExp("\w");
  14. console.log(jsonStringify(reg) === JSON.stringify(reg));
  15. let date = new Date();
  16. console.log(jsonStringify(date) === JSON.stringify(date));
  17. let sym = Symbol(1);
  18. console.log(jsonStringify(sym) === JSON.stringify(sym));
  19. let array = [1,2,3];
  20. console.log(jsonStringify(array) === JSON.stringify(array));
  21. let obj = {
  22. name: 'jack',
  23. age: 18,
  24. attr: ['coding', 123],
  25. date: new Date(),
  26. uni: Symbol(2),
  27. sayHi: function() {
  28. console.log("hi")
  29.     },
  30. info: {
  31. sister: 'lily',
  32. age: 16,
  33. intro: {
  34. money: undefined,
  35. job: null
  36.         }
  37.     }
  38. }
  39. console.log(jsonStringify(obj) === JSON.stringify(obj));

通过上面这些测试的例子可以发现，我们自己实现的 jsonStringify 方法基本和 JSON.stringify 转换之后的结果是一样的，不难看出 jsonStringify 基本满足了预期结果。

本讲的内容也就先介绍到这里。

总结

这一讲，我利用原理结合实践的方式，带你实现了一个 JSON.stringify 的方法。从中你可以看到，要想自己实现一个 JSON.stringify 方法整体上来说并不容易，它依赖很多数据类型相关的知识点，而且还需要考虑各种边界情况。

希望你多加实践，如果在面试中也让你当场实现一个 JSON.stringify 方法，你才能够轻松应对。

另外，如果把本讲中的题目作为面试题的话，其实是对你的 JS 编码能力的一个很全面的考察，因此对于数据类型的相关知识还是很有必要系统性地学习，尤其是对于 JSON 的这两个方法，不常用的那几个参数你是否有了解？还有引用数据类型中对数组以及普通对象的处理，这部分手写起来会比基础数据类型复杂一些，在一些细节处理上会遇到问题。因此，你要好好理解。

那么讲到这里，第一个模块的内容就介绍完毕了，涉及数据类型相关的知识就暂时告一段落了，马上我们进入全新的第二个模块深入数组的学习。在后续的课时中，我将带领你深入学习 JS 的数组相关知识。我们下一讲再见~