你肯定听说过console.log()并且可能一直在使用它。它是如此受欢迎,以至于在IDE中键入时,像VisualStudioIntellicode这样的工具经常在任何其他控制台方法之前推荐它:在今天的帖子中,我们将探讨一些最有用的控制台方法及其在数据可视化中的用途。、调试等1.table()当您需要在代码中直观地查看一组可以用表格表示的对象(例如对象数组)时,console.table()方法就派上用场了。以这个汽车列表为例:constcars=[{color:'red',age:4,maxSpeed:120,},{color:'blue',age:2,maxSpeed:100,},{color:'黄色',年龄:3,最大速度:160,},];您将如何在控制台中检查它们?console.log()是一个典型的方法:console.log(cars);在Chrome开发者控制台中,我们可以检查我们记录的对象的各种属性,以及我们想要的任意多的层次结构。我们可以在Node.js终端中查看属性并为其着色:这是一种可接受的方法,但console.table()方法提供了更优雅的替代方法:console.table(cars);顾名思义,它以易于理解的表格格式呈现数据,例如电子表格。table()也适用于数组的数组:constarr=[[1,3,5],[2,4,6],[10,20,30],];控制台表(arr);2.assert()非常适合调试目的,console.assert()接受断言,如果断言为假,则将错误消息写入控制台。但如果这是真的,什么也不会发生。constnum=13;console.assert(num>10,'数字必须大于10');console.assert(num>20,'数字必须大于20');第一个断言通过,因为num大于10,所以只有第二个断言显示在控制台中:3.trace()console.trace()帮助您在调用它的位置输出当前堆栈跟踪。例如:functiona(){b();}functionb(){c();}functionc(){console.trace();}a();4.error()error()可能是第二种流行的控制台方法。在Chrome控制台中,它以独特的红色显示错误消息。console.error('这是一条错误信息。');console.log('这是一条日志消息。');你不会在Node.js中得到这种颜色分离:但是,消息在内部的位置上是不同的。console.error()写入stderr流,而console.log()写入stdout流。您可以使用process.stderr和process.stdout访问这些流。这对于将错误消息和信息性消息重定向到不同的文件很有用,就像我们在下面的代码示例中所做的那样。constfs=require('fs');consterrorFs=fs.createWriteStream('./error-log.txt');process.stderr.write=errorFs.write.bind(errorFs);constinfoFs=fs.createWriteStream('./info-log.txt');process.stdout.write=infoFs.write.bind(infoFs);console.error('这是一条错误信息。');console.log('这是一条日志消息。');运行此代码时,传递给error()和log()的消息将输出到适当的文件,而不是输出到控制台。5.warn()console.warn()在Chrome控制台输出黄色信息,表示警告。console.warn('这是一条警告信息');在Node.js中,消息被写入stderr流,如console.error()。6、count()和countReset()console.count()记录当前调用count()的次数。另一个有用的调试工具。函数shout(message){console.count();返回消息.toUpperCase()+'!!!';}喊('嘿');喊('嗨');喊('你好');显示的标签是默认的,因为我们没有指定标签。我们可以通过将字符串参数传递给count()来做到这一点。功能呼喊(消息){console.count(消息);returnmessage.toUpperCase()+'!!!';}shout('hey');shout('hi');shout('hello');shout('hi');shout('hi');shout('你好');现在我们对每条消息都有不同的计数。countReset()方法将标签的计数设置回零。功能呼喊(消息){console.count(消息);returnmessage.toUpperCase()+'!!!';}shout('hi');shout('hello');shout('hi');shout('hi');shout('hello');控制台.countReset('嗨');喊('嗨');7。time()、timeEnd()和timeLog()我们可以一起使用这些方法来衡量我们的程序中的特定操作需要多长时间。constarr=[...Array(10)];constdoubles1=[];console.time('forof');leti=0;for(;i<1000;i++){for(constitemofarr);}console.timeLog('forof');for(;i<1000000;i++){for(constitemofarr);}console.timeEnd('forof');console.time('forEach');i=0;for(;i<1000;i++){arr.forEach(()=>{});}console.timeLog('forEach');for(;i<1000000;i++){arr.forEach(()=>{});}console.timeEnd('forEach');这里我们比较forof和forEach循环的性能。time()为传递给它的标签指定的操作启动一个计时器。timeLog()在不停止计时器的情况下记录当前持续时间,我们用它来显示一千次迭代后经过的时间。timeEnd()记录当前持续时间并停止计时器。我们在一百万次迭代后调用它。看起来forEach()比for快。8.clear()console.clear()通过清除日志来消除控制台混乱。console.log('一条日志消息。');控制台.clear();9.group()、groupCollapsed()和groupEnd()console.group()向其后的任何控制台消息添加一定程度的缩进。console.groupEnd()将缩进重置为调用前面的console.group()之前的级别。console.log('这是外层');console.group();console.log('Level2');console.group();console.log('Level3');console.warn('Moreoflevel3');console.groupEnd();console.log('回到level2');console.groupEnd();console.log('回到外层');console.groupCollapsed()创建类似于console.group()的组,但该组会折叠,直到用户使用相邻的显示按钮将其展开。console.log('这是外层');console.group();console.log('Level2');console.groupCollapsed();console.log('Level3');console.warn('更多的是3级');console.groupEnd();console.log('回到2级');console.groupEnd();console.log('回到外层');10.dir()console.dir()的工作方式与console.log()类似,只是记录了HTMLElements。console.log()会将HTMLElement记录为我们可以在控制台中遍历的HTML:但console.dir()会将其记录为对象,显示交互式属性列表:结论正如您在本文中所见,除了此外到console.log(),有很多console方法。其中一些只是在控制台UI中添加了颜色和更好的可视化效果,而另一些则可以成为调试和性能测试的强大工具。今天的内容就先分享到这里,希望对大家有用,谢谢阅读。
