console对象探究
作为一个前端,console.log()可能是你最常用的方法,打印打印再打印,但是其实console对象上有用的方法有很多,来,各位看官上眼
分类输出
厌倦了 console.log 单调的输出?欢迎尝试 console 对象的分类输出功能。console 对象提供了 info、warn、error 方法分别输出提示、警告以及错误信息。
我们输入下面这段代码:
console.log('log');
console.info('info');
console.warn('warn');
console.error('error');
结果如下图所示:

断言输出
console 对象提供了类似于单元测试中的断言的方法:assert。该方法接收两个参数,第一个参数为断言条件,第二个参数代表断言信息。
同单元测试断言一样,当断言条件为 true 时,assert 无输出;只有当断言条件为 false 时,assert 方法才会在控制台中输出一条断言错误信息。
我们输入以下代码:
console.assert(true, 'true');
console.assert(false, 'false');
控制台如下所示:

分组输出
当你的控制台上输出了大量信息时,控制台会显得极其杂乱,你甚至不知道某一条信息是哪条代码输出的。此时,console 对象的 group 以及 groupEnd 方法可以拯救你。
将部分 console 语句放入 group 与 groupEnd 之间,可以形成将这部分 console 语句划定为一组信息进行输出。其中,group 方法接收一个字符,作为分组名称,groupEnd 方法不接收参数用于结束分组。
输入以下代码:
console.group('1');
console.log('1-1');
console.warn('1-2');
console.error('1-3');
console.groupEnd();
console.group('2');
console.log('2-1');
console.warn('2-2');
console.error('2-3');
console.groupEnd();
结果如图所示:

表格输出
我们不仅可以将控制台信息分组输出,我们还可以将其以表格的形式输出。
console 的 table 方法可以将一个对象以表格的形式输出,当输入的参数不是对象时,此时,table 方法相当于 log 方法。
输入以下代码:
const obj = {
a: {
id: ,
value:
},
b: {
id: ,
value:
}
};
console.log(obj);
console.table(obj);
控制台如图所示:

计次输出
在日常开发中,有一个常见的调试需求——计算一段代码的执行次数。一般来说,我们会在这段代码中定义一个变量,每执行一次它就进行一次自增,并通过 console.log 方法输出该变量。
可以看出,上述的方法略显麻烦,可不可以一行代码就解决这个问题呢?当然可以!count 方法,你值得拥有。
for(let i = ; i < ; i++){
console.count("num");
}
console.count("num");
console.count("anotherNum");

计时输出
当测试算法性能时,我们通常使用时间复杂度来评价算法的性能,但是,时间复杂度哪里有代码执行时间来的直观呢?
在之前不了解 console 对象的时候,我们在算法的头尾分别获取时间戳,取时间戳的差值作为代码执行时间。很明显,这种方法太过繁琐。
使用 console 对象的 time 以及 timeEnd 方法可以计算出代码执行时间。
console.time('time');
let sum = ;
for (let i = ; i < ;i++) {
sum += i;
}
console.timeEnd('time');
结果如下图所示:

原文链接:https://www.yuque.com/fe9/basic/hn1uw6
倾力推荐一下,前端九部真的写的很好,很细致
console对象探究的更多相关文章
- console对象-转
console对象 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 目录 开发者工具 console对象 console.log() console.debug() ...
- console对象
今天无意中看到console.info()的时候不自觉的楞了一下,对于console.info()确实不是十分的了解,平时就是用console.log(),既然不太明白就去网上看了一下关于consol ...
- 解决 IE 6/7 中console对象兼容性问题
话不多说,直接上代码 (function (){ //创建空console对象,避免JS报错 if(!window.console) window.console = {}; var console ...
- 浏览器js console对象
js中调用console写日志 console.log("some log"); console.warn("some warning"); console.e ...
- 浏览器兼容console对象的简要解决方案
不同浏览器或者版本之间对于console对象的支持不尽相同,而console方法在开发调试过程中都是不错的工具.难道要在上线前把所有console.xxxx去掉以保证某些浏览器不报错么.其实可以变通解 ...
- JavaScript -- 时光流逝(十三):DOM -- Console 对象
JavaScript -- 知识点回顾篇(十三):DOM -- Console 对象 (1) assert() : 如果断言为 false,则在信息到控制台输出错误信息.(2) clear() : 清 ...
- console对象的理解
console对象代表浏览器的JS控制台,虽然不是标准,但已经成为事实的标准 console对象的作用 a.显示代码运行错误信息 b.提供一个命令行接口,用来与网页互动 console对象拥有很多方法 ...
- console.log格式化及console对象
一.console.log格式化打印 console.log格式化这一用法一般都在个人博客或其他官网上有,当F12查看网页元素时,在控制台(console)那里偶尔会发现一些个性化的输出,感觉很奇特很 ...
- 代码调试console对象的花式玩法
转自阮一峰http://www.ruanyifeng.com/home.html console.log(),console.info(),console.debug() console.log方法用 ...
随机推荐
- FCC(ES6写法) Exact Change
设计一个收银程序 checkCashRegister() ,其把购买价格(price)作为第一个参数 , 付款金额 (cash)作为第二个参数, 和收银机中零钱 (cid) 作为第三个参数. cid ...
- Docker常用命令(一)
[转]原始出处:http://zxx287856774.blog.51cto.com/3417296/1665264 docker中 启动所有的容器命令 docker start $(docker p ...
- [Swift]LeetCode264.丑数 II | Ugly Number II
Write a program to find the n-th ugly number. Ugly numbers are positive numbers whose prime factors ...
- [Swift]LeetCode827. 最大人工岛 | Making A Large Island
In a 2D grid of 0s and 1s, we change at most one 0 to a 1. After, what is the size of the largest is ...
- 【原创】一文掌握 Linux 性能分析之 I/O 篇
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 一文掌握 Li ...
- 分布式事务之如何基于RocketMQ的事务消息特性实现分布式系统的最终一致性?
导读 在之前的文章中我们介绍了如何基于RocketMQ搭建生产级消息集群,以及2PC.3PC和TCC等与分布式事务相关的基本概念(没有读过的读者详见
- Pycharm、IDEA等汉化教程
本汉化教程对jetbrains全系列可用:IDEA.Pycharm.WebStorm.phpstorm.AndroidStudio.GoLand.RubyMine.CLion 此汉化无副作用,绝对安全 ...
- 【Spark篇】---Spark中广播变量和累加器
一.前述 Spark中因为算子中的真正逻辑是发送到Executor中去运行的,所以当Executor中需要引用外部变量时,需要使用广播变量. 累机器相当于统筹大变量,常用于计数,统计. 二.具体原理 ...
- python 菱形继承问题究极版
如果只是正常的菱形继承,经典类(python2中最后一个父类不继承object类)是深度优先,即会从左边父类开始一路走到底 新式类(最后一个父类继承了object类)是广度优先,即从左边父类开始继承, ...
- .NET Core玩转机器学习
最近在搞机器学习,目前国内没有什么关于ML.NET的教程,官方都是一大堆英文,经过了我的努力,找到了Relax Development大哥的博客,有关于ML.NET的内容 原文地址:https://w ...