数组遍历性能js 循环大量数据性能分析(包括 for for in for of forEach lodash forI

遍历数组经常用forEach，然后组长review代码说不能用forEach,所以来研究下遍历数组的最佳方法

实践出真知，创建100万条数据，遍历数据，记录遍历时间差

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
</head>
<script>

</script>
<style>
  body {
    padding: 0;
    margin: 0;
  }

  p {
    margin: 0;
    line-height: 1;
  }
</style>

<body style="font-family: PingFangSC-Semibold, PingFang SC;">

</body>
<script>

  var arr2 = Array.from({ length: 10000 }, val => Math.ceil(Math.random() * 100000))

  const arr = []
  for (i = 0; i < 1000000; i++) {
    arr.push({
      type: '增长',
      value: Math.ceil(Math.random() * 100000),
      name: 'uid',
      item: '20200611'
    })
  }


  function methodFor1 () {
    const beginTime = +new Date()
    var arrCopy = []
    for (let i = 0; i < arr.length; i++) {
      arrCopy.push(arr[i])
    }
    const endTime = +new Date()
    console.log('methodFor1', endTime - beginTime + 'ms')
  }

  function methodFor2 () {
    const beginTime = +new Date()
    var arrCopy = []
    const len = arr.length
    for (let i = 0; i < len; i++) {
      arrCopy.push(arr[i])
    }
    const endTime = +new Date()
    console.log('methodFor2', endTime - beginTime + 'ms')
  }


  function methodForOf () {
    const beginTime = +new Date()
    var arrCopy = []
    const len = arr.length
    for (const item of arr) {
      arrCopy.push(item)
    }
    const endTime = +new Date()
    console.log('methodForOf', endTime - beginTime + 'ms')
  }

  function methodForEach () {
    const beginTime = +new Date()
    var arrCopy = []
    const len = arr.length
    arr.forEach(item=>{
      arrCopy.push(item)
    })
    const endTime = +new Date()
    console.log('methodForEach', endTime - beginTime + 'ms')
  }

  function methodForIn () {
    const beginTime = +new Date()
    var arrCopy = []
    const len = arr.length
    for (const key in arr) {
      arrCopy.push(arr[key])
    }
    const endTime = +new Date()
    console.log('methodForIn', endTime - beginTime + 'ms')
  }

  function methodLodashForIn () {
    const beginTime = +new Date()
    var arrCopy = []
    const len = arr.length
    _.forIn(arr, item => {
      arrCopy.push(item)
    })
    const endTime = +new Date()
    console.log('methodLodashForIn', endTime - beginTime + 'ms')
  }


  methodFor1()
  methodFor2()
  methodForOf()
  methodForEach()
  methodForIn()
  methodLodashForIn()



</script>

</html>

执行结果

for.html:48 methodFor1 9ms
for.html:59 methodFor2 8ms
for.html:71 methodForOf 18ms
for.html:82 methodForEach 21ms
for.html:93 methodForIn 126ms
for.html:104 methodLodashForIn 201ms

每次的结果不是绝对的，但大体就是这样 for in（存长度）< for in(不存长度) < for of <forEach< for in < lodash forIn

当调整数据为50万条的时候

for.html:59 methodFor1 4ms
for.html:59 methodFor2 5ms
for.html:71 methodForOf 6ms
for.html:82 methodForEach 6ms
for.html:93 methodForIn 34ms
for.html:104 methodLodashForIn 159ms

发现前四个相差不是很大所以当数据比较少的时候，前四个方法我觉得都可以用，数据多的时候最好就用原生 for循环