本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于JSON.parse()和JSON.stringify()的性能测试(示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。JSON.parse(JSON.stringify(obj))我们一般用来深拷贝,其过程说白了,就是利用 JSON.stringify 将js对象序列化(JSON字符串),再使用JSON.parse来反序列化(还原)js对象。至于这行代码为什么能实现深拷贝,以及它有什么局限性等等,不是本文要介绍的。本文要探究的是,这行代码的执行效率如何?如果随意使用会不会造成一些问题?
先上两个js性能测试的依赖函数
1 2 3 4 5 6 7 8 9 10 11 |
function assert(value, desc) {
let li = document.createElement( 'li' );
li.className = value ? 'pass' : 'fail' ;
li.appendChild(document.createTextNode(desc));
document.getElementById( 'results' ).appendChild(li);
}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
function intervalTest(fn, config = {}) {
let maxCount = config.maxCount || 1000;
let times = config.times || 10;
let timeArr = [];
let timer = setInterval( function () {
let start = new Date ().getTime();
for (let i = 0; i < maxCount; i++) {
fn.call(this);
}
let elapsed = new Date ().getTime() - start;
assert(true, 'Measured time: ' + elapsed + ' ms' );
timeArr.push(elapsed);
if (timeArr.length === times) {
clearInterval(timer);
let average = timeArr.reduce((p, c) => p + c) / times;
let p = document.createElement( 'p' );
p.innerHTML = ` for 循环:${maxCount}次,定时器执行:${times}次,平均值:${average} ms`;
document.body.appendChild(p);
}
}, 1000);
}
|
定义一些初始数据
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | let jsonData = {
title: 'hhhhh' ,
dateArr: [],
series: [
{
name: 'line1' ,
data: []
},
{
name: 'line2' ,
data: []
},
{
name: 'line3' ,
data: []
},
]
};
let res = [
{
name: 'line1' ,
value: 1
},
{
name: 'line2' ,
value: 2
},
{
name: 'line3' ,
value: 3
},
];
|
场景1:模拟真实环境中图表数据实时更新
数据处理函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
function handleJsonData(lastData, res) {
let data = JSON.parse(JSON.stringify(lastData));
if (data.dateArr.length > 60) {
data.dateArr.shift();
for (let i = 0; i < data.series.length; i++) {
data.series[i].data.shift();
}
}
data.dateArr.push( new Date ().toTimeString(). substr (0, 8));
for (let i = 0; i < data.series.length; i++) {
data.series[i].data.push(res[i].value);
}
return data;
}
|
maxCount=100
跑起来,先让maxCount=100,for循环100次
1 2 3 4 5 | let jsonTest = function () {
jsonData = handleJsonData(jsonData, res);
};
intervalTest(jsonTest, {maxCount: 100});
|
1.使用 JSON.parse(JSON.stringify()) 深拷贝 的结果:
阅读剩余部分
相关阅读 >>
javascript中作用域的详细介绍(代码示例)
javascript如何实现json字符串与对象转换
js遇到代码出现问题时调试代码的方法
如何在网页中引入外部js文件和css样式文件
javascript中如何使用prompt方法
javascript向php传递中文乱码怎么办
javascript警告框怎么消除
javascript字符串怎么替换字符
javascript数组方法有哪些
js怎么替换字符串?
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » JSON.parse()和JSON.stringify()的性能测试(示例)