【前端】--console.log和alert的区别

前言

        敲了将近两周的前端代码,为了页面调试方便,有的时候用console.log,有的时候用alert,console.log是在控制台中打出日志,alert是在界面上弹框呈现,在页面调试时发现没有简单,那么这两者有什么区别呢?下面我们一起来学习一下。

正文

先来看一段代码:

 //第一张表单击单行时显示Tab标签页,传值
  ShowDetails(index) {
     var vm = this;
     var Selected = {
       id: '',pomOrderID: '', sapOrderID: '', quantity: '', pomOrderSeq: "", salesOrderID: '', sapOrderType: '', defID: '', defVer: '', defDescript: "", departID: '', lineID: '', planStartDate: '', planPlant: '', extSnStart: '', packNote: '', createOn: ''
            }
      Selected = index;
      /**********console.log和alert测试**********/
      console.log(Selected); 
      console.log(Selected.toString()); 
      alert(Selected); //输出结果:[object Object]
      alert(Selected.toString()); //[object Object]
      console.log(vm.data); //显示表格中两行数据
      console.log(vm.data.toString()); 
      alert(vm.data);//[object Object],[object Object]          
        },

输出结果:
F12,控制台输出:
【前端】--console.log和alert的区别_第1张图片

前两个alert(结果一样):

【前端】--console.log和alert的区别_第2张图片

第三个alert:

【前端】--console.log和alert的区别_第3张图片

分析:
    console.log可以输出任何类型的数据,alert只能输出String类型的数据,如果alert输出的是对象会自动调用toString()方法。

console.log

  • 在控制台输出
  • 可以输出任意类型的数据
  • 支持多个参数的写法
  • 无阻塞作用

alert

  • 在页面上弹出
  • 只能输出String类型的数据
  • 不支持多个参数的输出,只能输出第一个参数
  • 有阻塞作用,点击确定按钮之后,代码才能执行下一步

代码练习

【前端】--console.log和alert的区别_第4张图片

为什么使用console.log而不用alert?

        1、我们在页面调试时会选用alert,这样在页面上就可以看出输出结果,而不用再打开调试框,但是alert只能输出String类型的数据,如果遇到上面例子中的情况,将会造成返回值的误判或者不准确判断。
        2、页面调试(debug)时,都是执行到下一步的时候,才能返回看到上一步的效果,但是alert在页面上弹出框只能看到当前这一步的结果,但是这一步还没有执行,只是走到这里了,其实是没有办法看到当前实际的值。所以我们在debug模式尽量使用console.log而不用alert。

总结

        console.log和alert两者的区别暂且为大家介绍到这里,后续博客将会分享更多前端的知识,感谢您的阅读。

你可能感兴趣的:(【前端】)