前端关于JSON的stringify、parse和遍历的性能比较

hiyang 发布于2019-08-23 17:50 / 2883人阅读

摘要：在前端项目对数组，的拷贝，比较中，我们往往会去用，那么这样做究竟好不好呢经过一系列测试，发现用这种方式的性能是比较差的，下面是实验结果数组拷贝结果结果结果结果结果我们发现差距在四倍左右，当数组变大基本也维持在这个比例遍历对比结果结果

在前端项目对数组，map的拷贝，比较中，我们往往会去用json.stringify、json.parse，那么这样做究竟好不好呢？
经过一系列测试，发现用这种方式的性能是比较差的，下面是实验结果

1.数组拷贝

const a1 = new Array(1000000).fill("").map((e, index) => index)

function f1() {
    const start = new Date().getTime()
    const r = JSON.parse(JSON.stringify(a1))
    console.log("json结果", new Date().getTime() - start)
}

function f2() {
    const start = new Date().getTime()
    const r = [...a1]
    console.log("array结果", r == a1, new Date().getTime() - start)
}

f1()
f2()

结果：
json结果 104
array结果 false 35

我们发现差距在四倍左右，当数组变大基本也维持在这个比例

2.遍历对比

const map1 = {}
const map2 = {}
for (let i=0;i < 1000000;i++) {
    map1[i] = i
    map2[i] = i
}

function f1() {
    const start = new Date().getTime()
    const r = JSON.stringify(map1) == JSON.stringify(map2)
    console.log("json结果", r, new Date().getTime() - start)
}

function f2() {
    const start = new Date().getTime()
    const r = Object.keys(map1).every(key => {
        if (map2[key] || map2[key] === 0) {
            return true
        } else {
            return false
        }
    })
    console.log("array结果", r, new Date().getTime() - start)
}

f1()
f2()

结果：
json结果 true 506
array结果 true 140

基本上也是在四倍左右的差距

结尾

还有更多的测试没做，但估计基本上也是这个差距，
其实说到底，用json的api底层也是遍历过了，并且转成字符串，所以性能会比较差
大家还是自己手写的遍历还是手写，或者用第三方插件如lodash。不要一味用json api

云服务器 GPU云服务器 json_parse_stringify 关于前端的网站关于js读取json里的数据 json性能比较

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104236.html

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

摘要：我们一般用来深拷贝，其过程说白了，就是利用将对象序列化字符串，再使用来反序列化还原对象。至于这行代码为什么能实现深拷贝，以及它有什么局限性等等，不是本文要介绍的。小结论能不用和就不用，采用替代方案且性能更优的。 JSON.parse(JSON.stringify(obj))我们一般用来深拷贝，其过程说白了，就是利用 JSON.stringify 将js对象序列化（JSON字符串），再使...

oogh 2019-08-26 13:37 评论0 收藏0
JSON：如果你愿意一层一层剥开我的心，你会发现...这里水很深——深入理解JSON

摘要：说句玩笑话，如果是基于的，可能就叫了，形式可能就是这样的了，如果这样，那么可能现在是和比较密切了。此外，还有一个函数，我们较少看到，但是它会影响。我们先来看一个JS中常见的JS对象序列化成JSON字符串的问题，请问，以下JS对象通过JSON.stringify后的字符串是怎样的？先不要急着复制粘贴到控制台，先自己打开一个代码编辑器或者纸，写写看，写完再去仔细对比你的控制台输出，如果有...

Baaaan 2019-08-21 15:29 评论0 收藏0
ECMAScript 5.1 实用特性概览

摘要：返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。方法测试数组中的某些元素是否通过了指定函数的测试，返回值非常实用的功能，判断数组中是否某元素符合特定条件。 ECMAScript 5发布于2009年12月。ECMAscript 5.1版(下文称ES5)发布于2011年6月，，并且成为ISO国际标准（ISO/IEC 16262:2011） http://www.ecma...

xiao7cn 2019-08-21 10:57 评论0 收藏0
ECMAScript 5.1 实用特性概览

摘要：返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。方法测试数组中的某些元素是否通过了指定函数的测试，返回值非常实用的功能，判断数组中是否某元素符合特定条件。 ECMAScript 5发布于2009年12月。ECMAscript 5.1版(下文称ES5)发布于2011年6月，，并且成为ISO国际标准（ISO/IEC 16262:2011） http://www.ecma...

bang590 2019-08-01 15:31 评论0 收藏0
JSON.stringify() 的深入理解

摘要：深入理解规则字符串化并非严格意义上的强制类型转换，但其中涉及的相关规则基本类型值的字符串化规则为转换为，转换为，转换为。如果对象有自己的方法，字符串化时就会调用该方法并使用其返回值。将对象强制类型转换为是通过抽象操作来完成的。 [TOC] 序言最近在看《你所不知道的javascript》[中卷]一书，第一部分是类型和语法。本文是基于这部分的产物。在强制类型转换->抽象值操作-> to...

eechen 2019-08-23 18:40 评论0 收藏0