写在前面

前几天看到前端胖头鱼的一篇文章《就因为JSON.stringify，我的年终奖差点打水漂了》，讲的就是JSON.stringify在工程开发中的应用，线上用户不能提交表单。因为字段中经过JSON.stringify后的字符串对象缺少value key，导致后端parse之后无法正确读取value值，进而报接口系统异常，用户无法进行下一步动作。本篇文章就将详细谈谈JSON.stringify，并将带着你进行自己手写一个JSON.stringify，站在全局考察自己对于各种数据类型理解的深度，和各种极端的边界情况的处理能力。

JSON.stringify()

JSON.stringify是日常开发中经常用到的JSON对象中的一个方法，用于将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。

简而言之，就是用于将对象转换成JSON字符串。

  1. JSON.stringify(value[, replacer [, space]])
  • value：必填参数，需要序列化的JSON对象。
  • replacer：可选参数。
    • 函数类型：则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；
    • 数组类型：则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；
    • null或未提供：则对象所有的属性都会被序列化。
  • space：可选参数，用来控制字符串之间的间距。
    • 指定缩进用的空白字符串，用于美化输出（pretty-print）；
    • 数字类型，它代表有多少的空格；上限为10。小于1，意味着没有空格；
    • 字符串类型，当字符串长度超过10个字母，取其前10个字母，该字符串将被作为空格；
    • null或未提供，将没有空格。

注意：

  • 循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。
  • 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
  • undefined、任意的函数以及symbol值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。函数、undefined被单独转换时，会返回 undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined)。这就是为什么对象中有这些类型的属性，不能使用JSON.parse(JSON.stringify())来进行深拷贝。
  • Date 日期调用了 toJSON() 将其转换为了 string 字符串（同Date.toISOString()），因此会被当做字符串处理。
  • NaN 和 Infinity 格式的数值及 null 都会被当做 null。
  • 其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性。 ```javascript const user = {name:”yichuan”,age:18,university:”SCU”}; //1.序列化对象 console.log(JSON.stringify(user));//‘{“name”:”yichuan”,”age”:18,”university”:”SCU”}’

//2.序列化基础数据类型 console.log(JSON.stringify(“平”));//“平” console.log(JSON.stringify(18));//“18” console.log(JSON.stringify(true));//“true” console.log(JSON.stringify(null));//“null” console.log(JSON.stringify(undefined));//undefined

//3.使用replacer函数 console.log(JSON.stringify(user,function(key,value){ return typeof value === “number” ? 666 : “sixsixsix”; }));//‘{name:”sixsixsix”,age:666,university:”sixsixsix”}’

//4.指定数组 console.log(JSON.stringify(user,[“name”]));//‘{“name”:”yichuan”}’

//5.指定字符串间的间距 console.log(JSON.stringify(user,null,2)); / { “name”: “yichuan”, “age”: 18, “university”: “SCU” } /

//6.指定字符串的间距”“ console.log(JSON.stringify(user,null,”**“)); / { **“name”: “yichuan”, *“age”: 18, *“university”: “SCU” } */

  1. 整理归纳：
  3. | JSON.stringify | 输入 | 输出 |
  4. | --- | --- | --- |
  5. | 基础数据类型 | string | string |
  6. |  | number | 字符串类型的字符串 |
  7. |  | boolean | "true"/"false" |
  8. |  | undefined | undefined |
  9. |  | null | "null" |
  10. |  | NaN和Infinity | "null" |
  11. |  | symbol | undefined |
  12. |  | BigInt | 报错 |
  13. | 引用数据类型 | function | undefined |
  14. |  | Array数组中出现了function、undefined、symbol | string/"null"<br /> |
  15. |  | regExp | "{}" |
  16. |  | Date | Date的toJSON()字符串 |
  17. |  | 普通object | <br />- 如果有toJSON()方法，那么序列化toJSON()的返回值<br />- 如果属性值中出现了function、undefined、symbol则忽略<br />- 所有以symbol为属性键的属性都会被完全忽略掉<br /> |
  19. <a name="Hws8C"></a>
  20. ## 手撕JSON.stringify()
  21. 其实现场手撕代码还是有点麻烦的，需要考虑到对各种类型的数据进行处理，考虑各种边界情况。 
  22. ```javascript
  23. function stringify(data){
  24.     const type = typeof data;
  25.   //可能为基础数据类型的处理
  26.   if(type !== "object"){
  27.       //判断是否为NaN或Infinity或者null
  28.     if(Number.isNaN(data)||data===Infinity){
  29.         return "null";
  30.     }
  31.     //判断可能为function、undefined、symbol类型
  32.     if(type === "function" || type === "undefined" || type === "symbol" ){
  33.         return undefined
  34.     }
  35.     //判断字符串或数值的处理
  36.     if(type === "string" || type === "number"){
  37.         return `"${data}"`
  38.     }
  39.     if (typeof data === 'bigint') {
  40.       throw new TypeError('Do not know how to serialize a BigInt')
  41.     }
  42.     if (isCyclic(data)) {
  43.       throw new TypeError('Converting circular structure to JSON')
  44.     }
  45.     return String(data);
  46.   }else{
  47.       //null
  48.     if(type==="null"){
  49.         return "null"
  50.     }else if(data.toJSON && typeof data.toJSON === "function"){
  51.       //递归
  52.         return stringify(data.toJSON);
  53.     }else if(Array.isArray(data)){
  54.         const arr = [];
  55.       //对于数组类型有很多种情况
  56.       data.forEach((item,index)=>{
  57.           //判断可能为function、undefined、symbol类型
  58.         if(type === "function" || type === "undefined" || type === "symbol" ){
  59.           arr[index] = "null"
  60.         }else{
  61.             arr[index] = stringify(item);
  62.         }
  63.       });
  64.       result = `"${arr}"`;
  65.       return arr.result.replace(/'/g,"");
  66.     }else{
  67.         //普通对象
  68.       const arr = [];
  69.       //遍历对象
  70.       Object.keys(data).forEach((key)=>{
  71.           //key如果是symbol类型，忽略
  72.         if(data[key]!=="symbol"){
  73.             if(typeof data[key]!=="undefined" && typeof data[key]!=="function" && typeof data[key]!=="symbol"){
  74.               arr.push(`"${key}":stringify(data[key])`);
  75.           }
  76.         }
  78.       })
  79.       return `{${arr}}`.replace(/'/g, '"')
  80.     }
  81.   }
  82. }

参考文章

写在最后

我们平时开发中将JSON.stringify应用最多的可能就是浅层的对象进行深拷贝，也就是进行序列化处理。但是当我们进行手撕代码的时候，需要考虑各种边界情况，这对于我们来说就比较麻烦，作为面试也是对数据类型的全面考察。