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

在前端项目对数组，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