摘要:我们一般用来深拷贝,其过程说白了,就是利用将对象序列化字符串,再使用来反序列化还原对象。至于这行代码为什么能实现深拷贝,以及它有什么局限性等等,不是本文要介绍的。小结论能不用和就不用,采用替代方案且性能更优的。
JSON.parse(JSON.stringify(obj))我们一般用来深拷贝,其过程说白了,就是利用 JSON.stringify 将js对象序列化(JSON字符串),再使用JSON.parse来反序列化(还原)js对象。至于这行代码为什么能实现深拷贝,以及它有什么局限性等等,不是本文要介绍的。本文要探究的是,这行代码的执行效率如何?如果随意使用会不会造成一些问题?
先上两个js性能测试的依赖函数
/** * 一个简单的断言函数 * @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); }
/** * 一个测试套件,定时器是为了多次执行减少误差 * @param fn {Function} 需要多次执行的代码块(需要测试、比对性能的代码块) * @param config {Object} 配置项,maxCount: 执行代码块的for循环次数,times: 定时器执行次数 */ 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); }
定义一些初始数据
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:模拟真实环境中图表数据实时更新
数据处理函数
/** * 处理json数据的函数。模拟真实环境中图表数据实时更新 * @param lastData {Object} 上一次的数据 * @param res {Array} 当前数据 * @returns data 处理完成后的结果集 */ function handleJsonData(lastData, res) { // 1. 使用 JSON.parse(JSON.stringify()) 深拷贝 let data = JSON.parse(JSON.stringify(lastData)); // 2. 不使用JSON序列化,直接修改参数 // 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循环100次
let jsonTest = function () { jsonData = handleJsonData(jsonData, res); }; intervalTest(jsonTest, {maxCount: 100});
1.使用 JSON.parse(JSON.stringify()) 深拷贝 的结果:
2.不使用JSON序列化,直接修改参数 的结果:
function handleJsonData(lastData, res) { // 1. 使用 JSON.parse(JSON.stringify()) 深拷贝 // let data = JSON.parse(JSON.stringify(lastData)); // 2. 不使用JSON序列化,直接修改参数 let data = lastData; // ... }maxCount=1000
intervalTest(jsonTest, {maxCount: 1000});
1.使用 JSON.parse(JSON.stringify()) 深拷贝 的结果:
2.不使用JSON序列化,直接修改参数 的结果:
maxCount=10000intervalTest(jsonTest, {maxCount: 10000});
1.使用 JSON.parse(JSON.stringify()) 深拷贝 的结果:
2.不使用JSON序列化,直接修改参数 的结果:
场景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内部没有执行代码
maxCount=10001.使用 JSON.stringify() 判断一个对象是否为空对象 的结果:
intervalTest(isEmptyObject1, {maxCount: 1000});
2.使用 Object.keys().length 判断一个对象是否为空对象 的结果:
intervalTest(isEmptyObject2, {maxCount: 1000});maxCount=10000
1.使用 JSON.stringify() 判断一个对象是否为空对象 的结果:
2.使用 Object.keys().length 判断一个对象是否为空对象 的结果:
maxCount=1000001.使用 JSON.stringify() 判断一个对象是否为空对象 的结果:
2.使用 Object.keys().length 判断一个对象是否为空对象 的结果:
关于JSON.parse()和JSON.stringify()的测试先到此为止,变换参数、更改执行的代码块可能会有不同结果,以上结果仅供参考。
小结论:能不用JSON.parse()和JSON.stringify()就不用,采用替代方案且性能更优的。PS:特别是需要多次执行的代码块,特别是这个JSON数据比较庞大时
还有更多关于JSON.parse()和JSON.stringify()的知识等着大家去挖掘,欢迎大家一起交流学习~
关于JSON.parse(JSON.stringify(obj)):关于JSON.parse(JSON.stringify(obj))实现深拷贝应该注意的坑
关于深拷贝:深拷贝的终极探索(99%的人都不知道)
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/109182.html
摘要:在前端项目对数组,的拷贝,比较中,我们往往会去用,那么这样做究竟好不好呢经过一系列测试,发现用这种方式的性能是比较差的,下面是实验结果数组拷贝结果结果结果结果结果我们发现差距在四倍左右,当数组变大基本也维持在这个比例遍历对比结果结果 在前端项目对数组,map的拷贝,比较中,我们往往会去用json.stringify、json.parse,那么这样做究竟好不好呢?经过一系列测试,发现用这...
摘要:它接受任意数量的源对象,枚举它们的所有属性并分配给。所以现在怎么办有几种方法可以创建一个对象的深拷贝。为了防止发生任何意外,请使用而不是。我想测量哪种方法是最高性能的。图表以下是,和中不同技术的性能。 原文:Deep-copying in JavaScript - DasSur.ma 如何在 JavaScript 中拷贝一个对象?对于这个很简单的问题,但是答案却不简单。 引用传值 在...
摘要:下面就通过一个简单的例子,怎么让更加的实用,更好的复用。代码的实用性,只能尽量,尽量再尽量。关于实用性,命名和扩展性也很重要。而且,这样没复用性。关于这篇文章,也是我目前尝试的一种方式,如果大家有更好的一个实现方式,欢迎在评论区留言。 程序员的精神,不应不止于实现,更要注重优化。不应止于表面,更要研究内部机制,方能青出于蓝而胜于蓝。 1.前言 在上家公司开发后台管理系统的时候,频繁要处理各...
摘要:下面就通过一个简单的例子,怎么让更加的实用,更好的复用。代码的实用性,只能尽量,尽量再尽量。关于实用性,命名和扩展性也很重要。而且,这样没复用性。关于这篇文章,也是我目前尝试的一种方式,如果大家有更好的一个实现方式,欢迎在评论区留言。 程序员的精神,不应不止于实现,更要注重优化。不应止于表面,更要研究内部机制,方能青出于蓝而胜于蓝。 1.前言 在上家公司开发后台管理系统的时候,频繁要处...
摘要:它基于制定的规范的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得成为理想的数据交换语言。用于把一个对象恩,中万物皆对象,转化为一个字符串。可以查看到来自于。 JSON JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集,采用...
阅读 3539·2021-09-10 10:51
阅读 2510·2021-09-07 10:26
阅读 2484·2021-09-03 10:41
阅读 812·2019-08-30 15:56
阅读 2898·2019-08-30 14:16
阅读 3489·2019-08-30 13:53
阅读 2103·2019-08-26 13:48
阅读 1914·2019-08-26 13:37