详解关于JSON.parse()和JSON.stringify()的性能小测试

JSON.parse(JSON.stringify(obj))我们一般用来深拷贝，其过程说白了，就是利用JSON.stringify将射流研究…对象序列化(JSON字符串),再使用JSON.parse来反序列化（还原)js对象。至于这行代码为什么能实现深拷贝，以及它有什么局限性等等，不是本文要介绍的。本文要探究的是，这行代码的执行效率如何？如果随意使用会不会造成一些问题？

先上两个射流研究…性能测试的依赖函数

/** * 一个简单的断言函数* @param值{布尔值}断言条件* @帕拉姆desc字符串}一个消息*/function assert(value，){ let Li=document。create element(' Li ')；li.className=值？通过":"失败；李。appendchild(文档。createtextnode(desc))；文件。getelementbyid(' results ').附录子(李)；}/** * 一个测试套件，定时器是为了多次执行减少误差* @param fn {Function}需要多次执行的代码块（需要测试、比对性能的代码块)* @参数配置{对象}配置项，maxCount:执行代码块的为循环次数，时间：定时器执行次数*/函数intervalTest(fn，config={ }){ 0让maxCount=config。maxCount | | 1000let times=config.times | | 10让timeArr=[]；让计时器=设置间隔（函数(){让开始=新日期()。getTime()；用于(设I=0；i maxCountI){ fn。叫(这个)；}让逝去=新日期()。getTime()-start；断言（真，"测量时间：'过去'毫秒");timeArr.push(经过的时间);if(timearr。长度====次){ clearInterval(定时器);让average=timeArr.reduce((p，c)=p c)/times；让p=文档。创建元素(' p ')；p.innerHTML=`for循环：${maxCount}次，定时器执行：${times}次，平均值：$ { average } msdocument。尸体。append child(p)；} }, 1000);}定义一些初始数据

让jsonData={ title: 'hhhhh '，datarr :[]，series: [ { name: 'line1 '，data: [] }，{ name: 'line2 '，data: [] }，{ name: 'line3 '，data :[]}；让res=[ { name: 'line1 '，value: 1 }，{ name: 'line2 '，value: 2 }，{ name: ' line3 '，value: 3 }，]；场景1:模拟真实环境中图表数据实时更新

数据处理函数

/** * 处理数据数据的函数。模拟真实环境中图表数据实时更新* @param lastData {Object}上一次的数据* @param res {Array}当前数据* @返回数据处理完成后的结果集*/function handleJsonData(最后数据，res) { //1 .使用JSON.parse(JSON.stringify())深拷贝让数据=JSON。解析(JSON。stringify(LastDATa))；//2.不使用数据序列化，直接修改参数//让数据=lastDataif(数据。日期。长度60){数据。日期。shift()；用于(设I=0；一、数据。系列。长度；I){数据。系列[一]。数据。shift()；} } data.dateArr.push(新日期()。toTimeString().substr(0，8))；用于(设I=0；一、数据。系列。长度；I){数据。系列[一]。数据。推动.值);}返回数据；}maxCount=100

跑起来，先让maxCount=100，对于循环100次

让jsonTest=function(){ jsonData=handleJsonData(jsonData，RES)；};intervalTest(jsonTest，{ max count : 100 })；1.使用JSON.parse(JSON.stringify())深拷贝的结果：

2.不使用数据序列化，直接修改参数的结果：

函数handleJsonData(lastData，res) { //1 .使用JSON.parse(JSON.stringify())深拷贝//让数据=JSON。解析(JSON。stringify(LastDATa))；//2.不使用数据序列化，直接修改参数让数据=lastData//.}

最大计数=1000

intervalTest(jsonTest，{ max count : 1000 })；1.使用JSON.parse(JSON.stringify())深拷贝的结果：

2.不使用数据序列化，直接修改参数的结果：

maxCount=10000

intervalTest(jsonTest，{ maxcount : 10000 })；1.使用JSON。解析(JSON。stringfy())深度复制结果：

2.不要使用JSON序列化，直接修改参数：的结果

场景2:确定对象是否为空

//1.使用JSON。stringfy()判断对象是否为空。让isempty object 1=function(){ if(JSON。string fy(JSON data)=' { } '){//做某事} }；//2.使用Object.keys()。判断对象是否为空的长度。让isempty object 2=function(){ if(object . keys(JSON data))。length==0){//做某事} }；我只是浏览了一下判断条件，if中没有执行任何代码

最大计数=1000

1.使用JSON.stringify()判断对象是否为空的结果：

intervalTest(isEmptyObject1，{ maxcount : 1000 })；

2.使用Object.keys()的结果。判断对象是否为空的长度：

intervalTest(isEmptyObject2，{ maxcount : 1000 })；

maxCount=10000

1.使用JSON.stringify()判断对象是否为空的结果：

2.使用Object.keys()的结果。判断对象是否为空的长度：

maxCount=100000

1.使用JSON.stringify()判断对象是否为空的结果：

2.使用Object.keys()的结果。判断对象是否为空的长度：

JSON.parse()和JSON.stringify()的测试到此结束。更改参数和更改执行的代码块可能会有不同的结果。以上结果仅供参考。

小结论：不需要JSON.parse()和JSON.stringify()，采用替代方案性能更好。PS:尤其是需要多次执行的代码块，尤其是当JSON数据非常庞大的时候

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。