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>

效果圖：