你不知道的console，控制台也能玩出花样~

2021-06-20 15:55:21 阅读：210 来源： 互联网

标签：count 玩出 console log label 参数控制台 any

平时前端开发的过程console是大家用到的最多的命令之一，但是大部分人只会console.log()，并不知道console它还有其他很多的骚操作，今天就给大家分享一下~。

1. 首先是大家最常用来调试的console.log([data]:any[,…args]:any),很多时候我们需要查看函数的参数是不是我们想要的值或者结果是不是我们预想的值的时候一般会使用它。

console.log("吴小迪啊")   //可以直接输出字符串
console.log(1)           //直接输出数字
var a = ["1","2","3"]
console.log(a)           //输出变量
function test(a,b){
   console.log(a,b)      //输出函数的参数
}
test(1,"2")

以上代码在控制台的输出结果：
在这里插入图片描述
2. console.clear()此方法用来清除控制台的内容，有些时候我们的控制台的东西太多的时候，亦或者是我想让我现在输出的东西显示在最上面，它之前的输出暂时隐藏的时候可以用到此方法：

//在上一个代码下面拼接此代码
console.clear()
console.log("其他的应该都消失了吧？我现在是老大了！")

这个时候你会发现之前的输出都已经不见了，只有console.clear()后面的这个输出还在了。
在这里插入图片描述
3. console.time([label]：string)这个一般结合console.timeEnd([label]：string)使用，前端开发者想要自己测试性能的时候常用的方法,比如我现在想要测试一下向一个空数组添加若干值需要多久。

var arr = [];
console.time("test")
for(let i = 0;i < 1000000;i++){//向数组当中添加1000000个值
    arr.push(i)
}
console.timeEnd("test")

最终我们会发现我们向数组当中添加1000000个值一共用了110.0439453125毫秒
在这里插入图片描述
注意：
1. 如果console.time()和console.timeEnd()括号里没有放入参数，那么会输出默认的default:***；
2. 输出出来的时间不是固定的，是会随着计算机的性能从而有波动
3. 常用来测试算法/函数执行的时间，从而作比较选择最优的算法/函数的方法。

4. console.count([label]：string)用来维护一个特定于label的内部计数器，并将用给定 label 调用 console.count() 的次数输出到控制台。

console.count()
console.count()
console.count("test")
console.count("test")
console.count()

在这里插入图片描述
注意：
1. 与console.time一样，不给参数是默认的default
2. 中间就算被隔开了还是会接着之前的次数继续计数

5. console.countReset([label]：string)用来重置指定的计数
比如：

console.count()
console.count()
console.countReset() //重置计数
console.count()

输出结果为：
在这里插入图片描述
可以看到在重置后输出默认的default又重新从1开始计数了。
6. console.dir(obj：any[,options]：Object)
参数：

obj
options
options的参数：
- showHidden如果为true，则也会显示对象的不可枚举属性和符号属性。默认值：false
- depth告诉 util.inspect() 格式化对象时要递归多少次。这对于检查大型复杂对象很有用。要使其无限递归，可传入 null。默认值: 2。
- colors 如果为 true，则输出将使用 ANSI 颜色代码进行样式设置。颜色可定制，请参阅自定义 util.inspect() 颜色。默认值: false。

使用方法：

在obj上使用util.inspect()并将结果字符串打印到stdout。此函数绕过obj上定义的任何自定义inspect()函数。
7. console.error([data]：any[,…args]：any)用换行符打印到 stderr。可以传入多个参数，第一个参数用作主要信息，所有其他参数用作类似于 printf(3) 中的替换值（参数都传给 util.format()）。

const code = '5';
const code2 = '6';
function test(a,b){
     if(typeof(a)==="string" || typeof(b)==="string"){
        console.error('error :参数a或b不可以为字符串')
     }else{
        console.log('参数是允许范围内的')
     }
}
test(code,code2)

在这里插入图片描述

本身的javascript是不会对函数参数的数据类型做判断的，不管你传入的是什么类型，只要不违规操作都是不会报错的，但是我们可以通过类似上面这种判断方式去约束参数的数据类型，（当然判断数据类型有很多种方法，请留意笔者下期更新，做参数数据类型判断也有很多种方法，也请留意下期更新）如果参数的数据类型不是我们想要的就可以报一个error警告它
8. console.warn([data]：any[,…args]：any)，既然有error也就肯定会有warn警告，用法同上，把error改成warn就可以了。显示效果为：
在这里插入图片描述
9. console.table(tabularData:any[,properties]:string[])尝试使用tabularData(或使用properties)的属性列和tabularData的行来构造一个表并记录它。如果无法将其解析为表格，则回退到进记录参数。

// 这些不能解析为表格数据。
console.table(Symbol());  //symbl类型
console.table(1)        //number类型
console.table("1")      //string类型
console.table(undefined)        //undeined类型
console.table(true)     //boolean类型
//可以解析为表格数据的格式：
console.table([{ a: 1, b: 'Y' }, { a: 'Z', b: 2 }]);

控制台输出结果：
在这里插入图片描述
10. console.debug(data[,…args])是console.log()的别名

11. console.info(data[,…args])是console.log()的别名

12. console.dirxml(…data)此方法调用console.log()将接收到的参数传递给它。请注意，此方法不会生成任何XML格式

13. console.group([…label]:any)将后续行的缩进增加两个空格。
如果提供了一个或多个 label，则首先打印这些 label，而不另外添加缩进。

14. console.groupCollapsed()，console.group()的别名。

15. console.groupEnd()，减少后续行的缩进俩个空格。

16.console.timeLog([label]:string[,…data]:any),对于先前通过调用console.time()启动的计时器，将经过时间和其他 data 参数打印到 stdout

17. console.trace([message]:any[,…args]:any),打印字符串’Trace: ’ 到 stderr，然后将 util.format() 格式化的消息和堆栈跟踪打印到代码中的当前位置。

18.改变console.log的样式：console.log(’%c你的console内容’, ‘你的样式内容’)
示例代码：

console.log(`%c你好，亲爱的开发者朋友，
我是特权APP的创始人，
这个项目也是特权APP团队的项目之一，
如果你对我们团队感兴趣想要加入我们的话
请投简历到这里：1336791007@qq.com.特权APP期待你的加入！`,
        'font-size: 20px; color: orange;')
console.log('%c                                                          ',
'font-size: 20px;background: url("http://nowre.com/uploads/feature/feature_header_1435686903_FEATURE-TOP17.jpg"); background-size: 100%;')

实现效果：
在这里插入图片描述

不知道朋友们学会这些骚操作了没有呢？快去代码当中试试吧！

标签：count,玩出,console,log,label,参数,控制台,any
来源： https://blog.51cto.com/u_15275953/2928410

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

你不知道的console，控制台也能玩出花样~

使用方法：

不知道朋友们学会这些骚操作了没有呢？快去代码当中试试吧！