JSON.parse(JSON.stringify(obj))我們一般用來深拷貝,其過程說白了,就是利用 JSON.stringify 將js對象序列化(JSON字符串),再使用JSON.parse來反序列化(還原)js對象。至于這行代碼為什么能實現(xiàn)深拷貝,以及它有什么局限性等等,不是本文要介紹的。本文要探究的是,這行代碼的執(zhí)行效率如何?如果隨意使用會不會造成一些問題?
網(wǎng)站的建設成都創(chuàng)新互聯(lián)公司專注網(wǎng)站定制,經(jīng)驗豐富,不做模板,主營網(wǎng)站定制開發(fā).小程序定制開發(fā),H5頁面制作!給你煥然一新的設計體驗!已為成都地磅秤等企業(yè)提供專業(yè)服務。
先上兩個js性能測試的依賴函數(shù)
/**
* 一個簡單的斷言函數(shù)
* @param value {Boolean} 斷言條件
* @param desc {String} 一個消息
*/
function assert(value, desc) {
let li = document.createElement('li');
li.className = value ? 'pass' : 'fail';
li.appendChild(document.createTextNode(desc));
document.getElementById('results').appendChild(li);
}/**
* 一個測試套件,定時器是為了多次執(zhí)行減少誤差
* @param fn {Function} 需要多次執(zhí)行的代碼塊(需要測試、比對性能的代碼塊)
* @param config {Object} 配置項,maxCount: 執(zhí)行代碼塊的for循環(huán)次數(shù),times: 定時器執(zhí)行次數(shù)
*/
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循環(huán):${maxCount}次,定時器執(zhí)行:${times}次,平均值:${average} ms`;
document.body.appendChild(p);
}
}, 1000);
}定義一些初始數(shù)據(jù)
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:模擬真實環(huán)境中圖表數(shù)據(jù)實時更新
數(shù)據(jù)處理函數(shù)
/**
* 處理json數(shù)據(jù)的函數(shù)。模擬真實環(huán)境中圖表數(shù)據(jù)實時更新
* @param lastData {Object} 上一次的數(shù)據(jù)
* @param res {Array} 當前數(shù)據(jù)
* @returns data 處理完成后的結果集
*/
function handleJsonData(lastData, res) {
// 1. 使用 JSON.parse(JSON.stringify()) 深拷貝
let data = JSON.parse(JSON.stringify(lastData));
// 2. 不使用JSON序列化,直接修改參數(shù)
// let data = 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循環(huán)100次
let jsonTest = function () {
jsonData = handleJsonData(jsonData, res);
};
intervalTest(jsonTest, {maxCount: 100});1.使用 JSON.parse(JSON.stringify()) 深拷貝 的結果:

2.不使用JSON序列化,直接修改參數(shù) 的結果:
function handleJsonData(lastData, res) {
// 1. 使用 JSON.parse(JSON.stringify()) 深拷貝
// let data = JSON.parse(JSON.stringify(lastData));
// 2. 不使用JSON序列化,直接修改參數(shù)
let data = lastData;
// ...
}
maxCount=1000
intervalTest(jsonTest, {maxCount: 1000});1.使用 JSON.parse(JSON.stringify()) 深拷貝 的結果:

2.不使用JSON序列化,直接修改參數(shù) 的結果:

maxCount=10000
intervalTest(jsonTest, {maxCount: 10000});1.使用 JSON.parse(JSON.stringify()) 深拷貝 的結果:

2.不使用JSON序列化,直接修改參數(shù) 的結果:

場景2:判斷一個對象是否為空對象
// 1. 使用 JSON.stringify() 判斷一個對象是否為空對象
let isEmptyObject1 = function () {
if (JSON.stringify(jsonData) === '{}') {
// do something
}
};
// 2. 使用 Object.keys().length 判斷一個對象是否為空對象
let isEmptyObject2 = function () {
if (Object.keys(jsonData).length === 0) {
// do something
}
};只是走了一下判斷條件,if內(nèi)部沒有執(zhí)行代碼
maxCount=1000
1.使用 JSON.stringify() 判斷一個對象是否為空對象 的結果:
intervalTest(isEmptyObject1, {maxCount: 1000});
2.使用 Object.keys().length 判斷一個對象是否為空對象 的結果:
intervalTest(isEmptyObject2, {maxCount: 1000});
maxCount=10000
1.使用 JSON.stringify() 判斷一個對象是否為空對象 的結果:

2.使用 Object.keys().length 判斷一個對象是否為空對象 的結果:

maxCount=100000
1.使用 JSON.stringify() 判斷一個對象是否為空對象 的結果:

2.使用 Object.keys().length 判斷一個對象是否為空對象 的結果:

關于JSON.parse()和JSON.stringify()的測試先到此為止,變換參數(shù)、更改執(zhí)行的代碼塊可能會有不同結果,以上結果僅供參考。
小結論:能不用JSON.parse()和JSON.stringify()就不用,采用替代方案且性能更優(yōu)的。PS:特別是需要多次執(zhí)行的代碼塊,特別是這個JSON數(shù)據(jù)比較龐大時
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
文章標題:詳解關于JSON.parse()和JSON.stringify()的性能小測試
文章出自:http://www.chinadenli.net/article24/gsppce.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供域名注冊、企業(yè)網(wǎng)站制作、商城網(wǎng)站、關鍵詞優(yōu)化、自適應網(wǎng)站、企業(yè)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)