JavaScript Math对象用法及console.log调试方法详解

本文介绍JavaScript中Math对象的常用功能，如生成随机数和获取圆周率。重点对比alert()与console.log()两种调试方式，指出alert会阻塞页面渲染而console.log不会，并通过代码示例展示如何利用console.log进行非阻塞式调试，提高开发效率。

Math对象基础

Math对象


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>math对象</title>
  <script type="text/javascript">
    var iPi=Math.PI;
    // alert(iPi);
    var iNum=Math.random();
    // alert(iNum);
    // var
    /*
    console.log是常用的调试程序的方法
    * */
    var arr=[];
    for(var i=0;i<20;i++){
      arr[i]=Math.random();//Math.random()只能返回从0到1之间的随机数
    }
    console.log(arr)//console.log()在谷歌浏览器中用console查看就能看见调试程序
  </script>
</head>
<body>
</body>
</html>

Math对象可用于生成随机数等数值操作。这一功能引出了除alert()之外的另一种程序调试手段，即console.log()，此外还可以利用document.title进行辅助调试。

调试方法对比

调试程序的方法

在实际开发中，通常较少使用document.title或alert()进行调试。因为alert()会弹出对话框，导致浏览器暂停执行后续函数，影响程序流畅性；而console.log()则避免了这一阻塞问题，更适合日常调试。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    window.onload=function () {
      var oBody=document.getElementById('body1');
      var iNum01=12;
      alert(iNum01);
      oBody.style.backgroundColor='gold';
      var iNum02=14;
      alert(iNum02);
    }
  </script>
</head>
<body id="body1">
</body>
</html>

若使用alert()，页面会先弹出数值12，随后改变背景颜色，最后再弹出数值14。由于浏览器渲染速度较慢，用户会观察到先弹出12，再弹出14，最后颜色才变化的现象。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    window.onload=function () {
      var oBody=document.getElementById('body1');
      var iNum01=12;
      // alert(iNum01);
      console.log(iNum01);
      oBody.style.backgroundColor='gold';
      var iNum02=14;
      // alert(iNum02);
      console.log(iNum02);
    }
  </script>
</head>
<body id="body1">
</body>
</html>

使用console.log()的效果是直接修改页面状态，同时将调试信息输出到浏览器的控制台（Console）中供开发者查看，无需等待弹窗关闭即可继续交互。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript错误与调试技巧总结》、《JavaScript传值操作技巧总结》、《javascript编码操作技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JavaScript Math对象与console.log调试技巧

Math对象基础

调试方法对比

实用工具推荐