概述
循环提供了一种快速和重复的方式去做同一件事，javascript 里提供了不同类型和功能的循环语句供我们使用，但是你有了解过这些语句在运行时的性能差异吗？
循环方式
-
for 语句
-
for... in 语句
-
for... of 语句
-
while 语句
-
do... while 语句
-
forEach 方法 (仅 Array 类型可用)
除了do...while和while这两种循环方式的差异化不明显之外，我们只需要测试其他五种方式即可，下面我们就以Object和Array为遍历目标测试不同循环方式的运行时时间
目标测试
Array遍历
function printTimer(target) {
console.time('runtime with `for`')
for (let i = 0, l = target.length; i < l; i++) {
target[i]
}
console.timeEnd('runtime with `for`')
// benchmark with `while`
console.time('runtime with `while`')
const len = target.length
let i = -1
while (++i < len) {
target[i]
}
console.timeEnd('runtime with `while`')
// `for in`
console.time('runtime with for in')
for (let k in target) {
target[k]
}
console.timeEnd('runtime with for in')
// `for of`
console.time('runtime with `for of`')
for (let value of target) {
value
}
console.timeEnd('runtime with `for of`')
// forEach
console.time('runtime with `forEach`')
target.forEach((item) => {
item
})
console.timeEnd('runtime with `forEach`')
}
// Test smallArray
const smallerArray = Array.from({ length: 10000 })
printTimer(smallerArray)
// runtime with `for`: 0.263ms
// runtime with `while`: 0.184ms
// runtime with for in: 13.052ms
// runtime with `for of`: 0.315ms
// runtime with `forEach`: 0.196ms
// Test biggerArray
const biggerArray = Array.from({ length: 10000000 })
printTimer(biggerArray)
// runtime with `for`: 8.77ms
// runtime with `while`: 5.107ms
// runtime with for in: 2.890s
// runtime with `for of`: 16.14ms
// runtime with `forEach`: 2.905ms以上通过对不同大小的数组遍历可以发现，运行速度最快的是while语句，其次是forEach方法，性能最差的是for in语句，当遍历的数据长度增加后，这个结果更明显。
遍历 Object
function printTimer(target) {
const keys = Object.keys(target)
// `for`
console.time('run with `for`')
for (let i = 0, len = keys.length; i < len; i++) {
target[keys[i]]
}
console.timeEnd('run with `for`')
// `while`
console.time('run with `while`')
let len = keys.length
let i = -1
while (++i < len) {
target[keys[i]]
}
console.timeEnd('run with `while`')
// `for in`
console.time('run with `for in`')
for (let key in target) {
target[key]
}
console.timeEnd('run with `for in`')
// `forEach`
console.time('run with `forEach`')
keys.forEach((key) => {
target[key]
})
console.timeEnd('run with `forEach`')
}
const target = {}
for (let i = 0; i < 1000000; i++) {
target[i] = i
}
printTimer(target)
// run with `for`: 8.428ms
// run with `while`: 8.932ms
// run with `for in`: 106.705ms
// run with `forEach`: 17.548ms由于普通的Object没有iterator接口，所以这里省略了for of语句的测试场景。除了for in语句可以直接遍历一个对象之外，其他三种循环方法先是获取到这个对象的key数组，然后通过遍历这个数组读取对象的属性值完成遍历。所以这里跟对Array的遍历性能大致相同。
总结
有了以上两种不同数据结构的遍历结果，不同循环语句和方法之间的性能差异也很明显了。所以我们在对数据遍历时可以优先使用while语句，其次是for语句和forEach方法，性能最差的是for in语句和for of语句，这里就不推荐使用了。