带你一起实现JSON.Stringify方法
发布网友
发布时间：2024-09-26 02:35
共1个回答
热心网友
时间：2024-10-04 00:33
JSON.Stringify方法能够站在全局考察对JS各种数据类型理解的深度，对各种极端的边界情况处理能力，以及JS的编码能力。之所以将这篇作为这一模块的进阶，是因为想把整个数据类型的知识点串起来，让理解得更加融会贯通，能够更上一层楼。
在前端面试过程中，这个题目也经常会被问到。大部分候选人只知道这个方法的作用，而如果让他自己实现一个JSON.Srtingify方法的话，大多数人都不一定能写出来，或者即便能写出来一些，但是考虑的问题又不够全面。
因此要想夯实自身JavaScript的编程基础，通过实践来实现一些JSAPI`方法，是非常有必要的，所以就来搞懂它。
方法基本介绍JSON.stringify是日常开发中经常用到的JSON对象中的一个方法，JSON对象包含两个方法：一是用于解析成JSON对象的parse()；二是用于将对象转换为JSON字符串方法的stringify()。下面分别来看下两个方法的基本使用情况。
JSON.parseJSON.parse方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。该方法有两个参数：第一个参数是需要解析处理的JSON字符串，第二个参数是可选参数提供可选的reviver函数，用在返回之前对所得到的对象执行变换操作。
该方法的语法为：JSON.parse(text[,reviver])
下面通过一段代码来看看这个方法以及reviver参数的用法，如下所示。
constjson='{"result":true,"count":2}';constobj=JSON.parse(json);console.log(obj.count);//2console.log(obj.result);//true/*带第二个参数的情况*/JSON.parse('{"p":5}',function(k,v){if(k==='')returnv;//如果k不是空，returnv*2;//就将属性值变为原来的2倍返回});//{p:10}上面的代码说明了，可以将一个符合JSON格式的字符串转化成对象返回；带第二个参数的情况，可以将待处理的字符串进行一定的操作处理，比如上面这个例子就是将属性值乘以2进行返回。
JSON.stringifyJSON.stringify方法是将一个JavaScript对象或值转换为JSON字符串，默认该方法其实有三个参数：第一个参数是必选，后面两个是可选参数非必选。第一个参数传入的是要转换的对象；第二个是一个replacer函数，比如指定的replacer是数组，则可选择性地仅处理包含数组指定的属性；第三个参数用来控制结果字符串里面的间距，后面两个参数整体用得比较少。
该方法的语法为：JSON.stringify(value[,replacer[,space]])
下面通过一段代码来看看后面几个参数的妙用，如下所示。
JSON.stringify({x:1,y:2});//"{"x":1,"y":2}"JSON.stringify({x:[10,undefined,function(){},Symbol('')]})//"{"x":[10,null,null,null]}"/*第二个参数的例子*/functionreplacer(key,value){if(typeofvalue==="string"){returnundefined;}returnvalue;}varfoo={foundation:"Mozilla",model:"box",week:4,transport:"car",month:7};varjsonString=JSON.stringify(foo,replacer);console.log(jsonString);//"{"week":4,"month":7}"/*第三个参数的例子*/JSON.stringify({a:2},null,"");/*"{"a":2}"*/JSON.stringify({a:2},null,"");//"{"a":2}"从上面的代码中可以看到，增加第二个参数replacer带来的变化：通过替换方法把对象中的属性为字符串的过滤掉，在stringify之后返回的仅为数字的属性变成字符串之后的结果；当第三个参数传入的是多个空格的时候，则会增加结果字符串里面的间距数量，从最后一段代码中可以看到结果。
下面再看下JSON.stringify的内部针对各种数据类型的转换方式。
如何自己手动实现？为了更好地理解实现的过程，回想一下JS的数据类型你了解多少中的基本知识，当时讲了那么多种数据类型，如果它们都使用这个方法，返回的结果又会是怎么样的呢？
分析各种数据类型及边界情况来分析一下都有哪些数据类型传入，传入了之后会有什么返回，通过分析的结果,才能更好地实现编码。大致的分析汇总如下表所示（可参考MDN文档）。
JSON.stringify输入输出基础数据类型undefinedundefined基础数据类型boolean"true"/"false"基础数据类型number字符串类型的数值基础数据类型symbolundefined基础数据类型null"null"基础数据类型stringstring基础数据类型NaN和Infinity"null"引用数据类型Array数组中出现了undefined、function以及symbol"null"引用数据类型RegExp"{}"引用数据类型DateData的toJSON()字符串值引用数据类型普通object1.如果有toJSON方法，那么序列化toJSON()的返回值2.如果属性值中出现了undefined、任意的函数以及symbol值，忽略3.所有symbol为属性键的属性都会被完全忽略掉上面这个表中，基本整理出了各种数据类型通过·JSON.stringify·这个方法之后返回对应的值，但是还有一个特殊情况需要注意：对于包含循环引用的对象（深拷贝那讲中也有提到）执行此方法，会抛出错误。
代码逻辑实现先利用typeof把基础数据类型和引用数据类型分开，分开之后再根据不同情况来分别处理不同的情况，按照这个逻辑代码实现如下。
functionjsonStringify(data){lettype=typeofdata;if(type!=='object'){letresult=data;//data可能是基础数据类型的情况在这里处理if(Number.isNaN(data)||data===Infinity){//NaN和Infinity序列化返回"null"result="null";}elseif(type==='function'||type==='undefined'||type==='symbol'){//由于function序列化返回undefined，因此和undefined、symbol一起处理returnundefined;}elseif(type==='string'){result='"'+data+'"';}returnString(result);}elseif(type==='object'){if(data===null){return"null"//第01讲有讲过typeofnull为'object'的特殊情况}elseif(data.toJSON&&typeofdata.toJSON==='function'){returnjsonStringify(data.toJSON());}elseif(datainstanceofArray){letresult=[];//如果是数组，那么数组里面的每一项类型又有可能是多样的data.forEach((item,index)=>{if(typeofitem==='undefined'||typeofitem==='function'||typeofitem==='symbol'){result[index]="null";}else{result[index]=jsonStringify(item);}});result="["+result+"]";returnresult.replace(/'/g,'"');}else{//处理普通对象letresult=[];Object.keys(data).forEach((item,index)=>{if(typeofitem!=='symbol'){//key如果是symbol对象，忽略if(data[item]!==undefined&&typeofdata[item]!=='function'&&typeofdata[item]!=='symbol'){//键值如果是undefined、function、symbol为属性值，忽略result.push('"'+item+'"'+":"+jsonStringify(data[item]));}}});return("{"+result+"}").replace(/'/g,'"');}}}手工实现一个JSON.stringify方法的基本代码如上面所示，有几个问题还是需要注意一下：
由于function返回'null'，并且typeoffunction能直接返回精确的判断，故在整体逻辑处理基础数据类型的时候，会随着undefined，symbol直接处理了；
由于之前讲说过typeofnull的时候返回object，故null的判断逻辑整体在处理引用数据类型的逻辑里面；
关于引用数据类型中的数组，由于数组的每一项的数据类型又有很多的可能性，故在处理数组过程中又将undefined，symbol，function作为数组其中一项的情况做了特殊处理
同样在最后处理普通对象的时候，key（键值）也存在和数组一样的问题，故又需要再针对上面这几种情况（undefined，symbol，function）做特殊处理；
最后在处理普通对象过程中，对于循环引用的问题暂未做检测，如果是有循环引用的情况，需要抛出Error；
  整体来说这段代码还是比较复杂的，如果在面试过程中当场手写，其实整体还是需要考虑很多东西的。当然上面的代码根据每个人的思路不同，也可以写出自己认为更优的代码，比如也可以尝试直接使用switch语句，来分别针对特殊情况进行处理，整体写出来可能看起来会比上面的写法更清晰一些，这些可以根据自己情况而定。
实现效果测试上面的这个方法已经实现了，那么用起来会不会有问题呢？就用上面的代码，来进行一些用例的检测吧。
上面实现的这个jsonStringify方法和真正的JSON.stringify想要得到的效果是否一样呢？请看下面的测试结果。
letnl=null;console.log(jsonStringify(nl)===JSON.stringify(nl));//trueletund=undefined;console.log(jsonStringify(undefined)===JSON.stringify(undefined));//trueletboo=false;console.log(jsonStringify(boo)===JSON.stringify(boo));//trueletnan=NaN;console.log(jsonStringify(nan)===JSON.stringify(nan));//trueletinf=Infinity;console.log(jsonStringify(Infinity)===JSON.stringify(Infinity));//trueletstr="jack";console.log(jsonStringify(str)===JSON.stringify(str));//trueletreg=newRegExp("\w");console.log(jsonStringify(reg)===JSON.stringify(reg));//trueletdate=newDate();console.log(jsonStringify(date)===JSON.stringify(date));//trueletsym=Symbol(1);console.log(jsonStringify(sym)===JSON.stringify(sym));//trueletarray=[1,2,3];console.log(jsonStringify(array)===JSON.stringify(array));//trueletobj={name:'jack',age:18,attr:['coding',123],date:newDate(),uni:Symbol(2),sayHi:function(){console.log("hi")},info:{sister:'lily',age:16,intro:{money:undefined,job:null}}}console.log(jsonStringify(obj)===JSON.stringify(obj));//true通过上面这些测试的例子可以发现，实现的jsonStringify方法基本和JSON.stringify转换之后的结果是一样的，不难看出jsonStringify基本满足了预期结果。
总结利用原理结合实践的方式，实现了一个JSON.stringify的方法。从中可以看到，要想自己实现一个JSON.stringify方法整体上来说并不容易，它依赖很多数据类型相关的知识点，而且还需要考虑各种边界情况。
另外，如果把本讲中的题目作为面试题的话，其实是对JS编码能力的一个很全面的考察，因此对于数据类型的相关知识还是很有必要系统性地学习，尤其是对于JSON的这两个方法，不常用的那几个参数是否有了解？还有引用数据类型中对数组以及普通对象的处理，这部分手写起来会比基础数据类型复杂一些，在一些细节处理上会遇到问题。因此，要好好理解。
