JS简单测试循环运行时间的方法

2019-11-20 09:05:24

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS简单测试循环运行时间的方法。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>JS 测试循环运行的时间</title><script>  var arr = [];  var max = 10000000;  //加载  window.addEventListener("load", function () {    setTimeout(function () {      //初始化arr      for (var i = 0; i < max; i++) {        arr[i] = i + 1;      }      //显示所有按钮      document.getElementById("div1").style.display = "block";      document.getElementById("div2").style.display = "none";    }, 1);  });  //1) 使用 for 循环  function test1() {    var d1 = new Date();    var sum = 0;    for (var i = 0; i < arr.length; i++) {      sum += arr[i]    }    var d2 = new Date();    var x = d2 - d1;    console.log("for计算结果：" + sum + "，用时：" + x);  }  //2) 使用 for..in 循环  function test2() {    var d1 = new Date();    var sum = 0;    for (var i in arr) {      sum += arr[i]    }    var d2 = new Date();    var x = d2 - d1;    console.log("for..in计算结果：" + sum + "，用时：" + x);  }  //3) 使用 forEach 循环  function test3() {    var d1 = new Date();    var sum = 0;    arr.forEach(function (n) {      sum += n;    })    var d2 = new Date();    var x = d2 - d1;    console.log("forEach计算结果：" + sum + "，用时：" + x);  }</script></head><body>请按F12查看控制器输出 <br /><div id="div1" style="display:none;">  <input type="button" value="使用for循环" onclick="test1();" /> <br />  <input type="button" value="使用for..in循环" onclick="test2();" /> <br />  <input type="button" value="使用forEach循环" onclick="test3();" /> <br /></div><div id="div2">  正在初始化...</div></body></html>

效果图：