除了console.log之外的一些console函数方法。

 

今天早晨看见了Beyond console.log()这篇文章,以下大多数例子也是来自这篇文章,在之前也是有知道一些除了log之外的方法,但是看完这篇文章感觉又被开启了一道大门。真的敬佩js这门语言的高深,当第一次出来找工作的时候我以为我算是迈入了它的大门,可是最近我老是在别的地方被它重重的打击一次又一次,真的羞愧。

console.log():我们都有使用过这个,个人习惯用这个打印的数据的次数比debugger次数还多,确实挺方便的,但是麻烦就在于当找不到所想要的数据时,你得console.log好多次(这时用debugger是明智之举)。log除了可以打印出普通的基本类型之外,它还可以打印出类似于c语言的占位符。

显而易见,%s代表了String类型,类似的还有%o(代表了Object类型)以及%d(整数)或者是%f(小数)。

还有一个最有意思的是,%c占位符,我第一次看到这个%c的时候懵逼了,js什么时候有c开始的类型了。原来这个c是html的老朋友了CSS。下面是一个简单的例子(尽管我觉得是个鸡肋的功能,但是至少挺好看的):

 console.dir() :这大家应该也是比较熟悉的一个方法了,在大多数情况下,console.log与console.dir没有什么特别大的差别。但是根据方法名dir大家大概能猜到具体的作用:打印出元素节点的时,两者输出天差地别。

 

console.log打印出的时元素的html便签信息。而dir则是打印出了元素节点的具体信息。

console.warn():在console.log的基础信息的头部加上了黄色三角形感叹符号的提示,并且该行有相对应的背景色。

console.error():在console.log的基础信息的头部加上了红色×符号的提示,页面上出现的报的红色错误都是调用的这个方法。

console.table():这是让我最感到神奇的方法,之前我们打印数组或者对象,当里面的元素信息过多时候,就会呈现出省略号: [{…}, {…}, {…}]。我们得一层层的打开去找里面为数不多的有用字段,就显得很麻烦。现在你可以直接用这个table方法,console.table(data)。

这是不是比log方法打印出的数据已经简单的多了,还没完,它还可以接受第二个参数,输入你想要看的字段数组。

console.table(data, ["id", "price"]);

如下呈现效果,还可以根据右上角的三角形符号进行排序得到你想要的效果,因此index是从2开始的:

 console.assert():接收两个参数,第一个参数是判断是否assert的条件,第二个是输出的内容。值得注意的是,筛选出来的的必须是不符合条件的,否则不会打印。

console. trace():这个方法会输出你这语句所在js文件的具体位置。

结束语: 学习就像战斗,黎明终将会在该到来的时候降临,努力向前,踏过黑暗。

猜你喜欢

转载自blog.csdn.net/a66813016/article/details/85199553