浅谈 JavaScript 中 （for循环） 的几种写法及其性能问题

直接代码说明

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
　　// 此处添加测试数组 textArr

    var textArr = [],
        i = 0;
    while (i<40000000) {
      textArr.push(i)
      i++
    }
    const forTest = (textArr) => {
      console.time('time forTest')
      var newArr = []
　　　　// 第一种写法 不带声明变量的写法 （运行效率最好，性能最佳）
      for (var i = 0; i < textArr.length; i++) {
        newArr.push(i)
      }
      console.timeEnd('time forTest')
    }
    const forTest1 = (textArr) => { 
　　　　console.time('time forTest1')
　　　　var newArr = []
　　　　// 第二种带声明变量的写法 （相比之下要差一些）
for (var i = 0,len = textArr.length; i < len; i++) {
        newArr.push(i)
      }
      console.timeEnd('time forTest1')
    } 
    const forTest2 = (textArr) => {
      console.time('time forTest2')
      var newArr = []
　　　　// 第三种 forEach的写法  (效率最差，运行最慢)
      textArr.forEach(item => {
        newArr.push(item)
      })
      console.timeEnd('time forTest2')
    }
    const forTest3 = (textArr) => {
      console.time('time forTest3')
      var newArr = []
　　　　// 第四种是 for循环的简便写法， （运行效率与不带声明变量的写法相差无几，相比之下，可以使用这种写法，最优），仅仅是本人的观点
      for (var i = 1,cur; cur = textArr[i++];) {
        newArr.push(i)
      }
      console.timeEnd('time forTest3')
    }
    forTest(textArr)
    forTest1(textArr)
    forTest2(textArr)
    forTest3(textArr)
  </script>
</body>
</html>

直接复制粘贴，在控制台即可看到这四种写法的效率比对，欢迎吐槽

posted @ 2018-10-11 11:21  骑着蜗牛看落日  阅读(881)  评论(0)  编辑  收藏  举报