【前端】--console.log和alert的区别
来源:互联网 发布:nba2k16捏脸数据 编辑:程序博客网 时间:2024/06/04 18:36
前言
敲了将近两周的前端代码,为了页面调试方便,有的时候用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,控制台输出:
前两个alert(结果一样):
第三个alert:
分析:
console.log可以输出任何类型的数据,alert只能输出String类型的数据,如果alert输出的是对象会自动调用toString()方法。
console.log
- 在控制台输出
- 可以输出任意类型的数据
- 支持多个参数的写法
- 无阻塞作用
alert
- 在页面上弹出
- 只能输出String类型的数据
- 不支持多个参数的输出,只能输出第一个参数
- 有阻塞作用,点击确定按钮之后,代码才能执行下一步
代码练习
为什么使用console.log而不用alert?
1、我们在页面调试时会选用alert,这样在页面上就可以看出输出结果,而不用再打开调试框,但是alert只能输出String类型的数据,如果遇到上面例子中的情况,将会造成返回值的误判或者不准确判断。
2、页面调试(debug)时,都是执行到下一步的时候,才能返回看到上一步的效果,但是alert在页面上弹出框只能看到当前这一步的结果,但是这一步还没有执行,只是走到这里了,其实是没有办法看到当前实际的值。所以我们在debug模式尽量使用console.log而不用alert。
总结
console.log和alert两者的区别暂且为大家介绍到这里,后续博客将会分享更多前端的知识,感谢您的阅读。
阅读全文
0 0
- 【前端】--console.log和alert的区别
- console.log和alert的区别
- alert 和 console.log的区别
- alert和console.log的区别
- 简述alert()和console.log()的区别
- alert() 与 console.log() 的区别
- alert跟console.log()的区别
- alert 和 console.log
- console.dir()和console.log()的区别
- console.dir()和console.log()的区别
- JavaScript学习笔记-alert()与console.log()的区别
- javascript的alert()与console.log()
- console.log与alert
- Firefox+console.log()取代讨厌的alert()调试方法
- javascript调试不用alert用console.log的原因
- 前端中.alert&&.confirm的区别
- console.log和console.dir
- 非常好用的前端调试函数console.log()
- 框架
- HTML(十六)
- 基于kolla部署多节点OpenStack(Ocata版)
- Spring Boot Servlet
- vue div contenteditable属性,模拟v-model双向数据绑定功能
- 【前端】--console.log和alert的区别
- HTML(十七)
- 杭电acm P2017字符串的统计
- 工作周报-2017年12月3日
- flask:使用flask-mail客户端访问触发发送邮件
- Spring Boot 过滤器、监听器
- sanic下通过信号(blinker)创建cassandra的表索引
- dedecms循环输出时limit用法
- CentOS 7安装python3.5版本