作者： 一川 来源：前端万有引力

1写在前面

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

2JSON.stringify()

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

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

JSON.stringify(value[, replacer [, space]]) 

注意：

循环引用的对象(对象之间相互引用，形成无限循环)执行此方法，会抛出错误。布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。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，仅会序列化可枚举的属性。

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" } */ 

整理归纳：

JSON.stringify

输入

输出

基础数据类型

string

string

number

字符串类型的字符串

boolean

"true"/"false"

undefined

undefined

null

"null"

NaN和Infinity

"null"

symbol

undefined

BigInt

报错

引用数据类型

function

undefined

Array数组中出现了function、undefined、symbol

string/"null"

| | | regExp | "{}" | | | Date | Date的toJSON()字符串 | | | 普通object |

如果有toJSON()方法，那么序列化toJSON()的返回值如果属性值中出现了function、undefined、symbol则忽略所有以symbol为属性键的属性都会被完全忽略掉 |3手撕JSON.stringify()

其实现场手撕代码还是有点麻烦的，需要考虑到对各种类型的数据进行处理，考虑各种边界情况。

function stringify(data){  const type = typeof data;   //可能为基础数据类型的处理   if(type !== "object"){    //判断是否为NaN或Infinity或者null     if(Number.isNaN(data)||data===Infinity){      return "null";     }     //判断可能为function、undefined、symbol类型     if(type === "function" || type === "undefined" || type === "symbol" ){      return undefined     }     //判断字符串或数值的处理     if(type === "string" || type === "number"){      return `"${data}"`     }     if (typeof data === 'bigint') {       throw new TypeError('Do not know how to serialize a BigInt')     }     if (isCyclic(data)) {       throw new TypeError('Converting circular structure to JSON')     }     return String(data);   }else{    //null     if(type==="null"){      return "null"     }else if(data.toJSON && typeof data.toJSON === "function"){       //递归      return stringify(data.toJSON);     }else if(Array.isArray(data)){      const arr = [];       //对于数组类型有很多种情况       data.forEach((item,index)=>{        //判断可能为function、undefined、symbol类型         if(type === "function" || type === "undefined" || type === "symbol" ){           arr[index] = "null"         }else{           arr[index] = stringify(item);         }       });       result = `"${arr}"`;       return arr.result.replace(/'/g,"");     }else{      //普通对象       const arr = [];       //遍历对象       Object.keys(data).forEach((key)=>{        //key如果是symbol类型，忽略         if(data[key]!=="symbol"){           if(typeof data[key]!=="undefined" && typeof data[key]!=="function" && typeof data[key]!=="symbol"){             arr.push(`"${key}":stringify(data[key])`);           }         }                })       return `{${arr}}`.replace(/'/g, '"')     }   } } 

《MDN：JSON.stringify()》

《就因为JSON.stringify，我的年终奖差点打水漂了》

5写在最后

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