前端關於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