如何选择你的数据遍历方式

概述

循环提供了一种快速和重复的方式去做同一件事，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语句，这里就不推荐使用了。