js 遍历数组性能对比

js常用的遍历数组的方式有三种：for，forEach，of，由于实现方式的不同，导致三种遍历方式性能有所差异

forEach的性能损耗，主要在于要生成函数。而of的问题，是在于内部使用了迭代器。所以这两种方式比起for来说都要差一些。

结论：

for > forEach > of

在千万级的规模，差距达到几十毫秒，

亿级规模，差距达到几百毫秒

十亿级规模，差距达到几秒钟

随着数据规模的扩大，forEach和of的差距逐渐减少，但forEach仍然比of性能高

如果是需要实时变动的图表，每秒刷新几十上百次的那种，请使用for

在实际使用的过程中，绝大多数情况下，其实是不需要考虑这个差距的，毕竟这种规模的数据交给前端处理的情况不多。

大多数情况下还是要考虑可读性，forEach和of的可读性明显要好于for

 

测试代码

const arr = []
// Create an array with a million elements
for (let i = 0; i < 10000 * 10000; i++) {
    arr.push(i)
}

const length = arr.length

// Use for to walk through the array and print the time
console.time('for')


for (let i = 0; i < length; i++) {
    let n1 = arr[i]
    }
console.timeEnd('for') // for: 56ms

// Use forEach to traverse and print the time
console.time('forEach')

arr.forEach((o) => {
    let n2 = o
    })
console.timeEnd('forEach') // forEach: 636ms

console.time('of')

for (let o of arr) {
    let n3 = o
    }
console.timeEnd('of') // of：804ms:

最后，补充一个使用for循环的好习惯：

for (let i = 0,len=arr.length; i < len; i++) {
    //
}

请使用块级的len变量提前计算arr.length，否则每次循环都会从上级作用域取arr计算一次