当前位置：网站首页 > 博客教程 > 正文

你不知道的Javascript之console对象使用小技巧，快来学下一下吧

connygpt 2024-10-10 05:19 11 浏览

前言

写过前端Javascript代码的同学肯定不会对console对象感到陌生，在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量。

但是相信很多人也就只用过console.log()这一个方法，今天我们就一起来看看console对象还有哪些比较有用的方法。由于本篇文章是跟控制台有关，代码就直接在控制台展现而没有另外用新文件展示。

Javascript

不同级别日志

通过console对象的不同方法，可以在控制台上输出不同级别的日志信息，它们会采用不同的标志来展示，如下图所示。

不同级别的日志

包含占位符

在输出信息时可以通过%占位符来指定对应的值，而不用总是采用拼接字符串的方法。支持的占位符包括以下几种。

%s - 字符
%d - 整数
%f - 浮点数
%o - 对象

通过以下一个简单的例子可以看出其用法。

包含占位符

打印分组信息

通过group()方法可以以分组的形式展示出信息，类似于列表结构。

打印分组信息

表达式判断

在一些测试框架中，经常会用assert断言来判断一个表达式的值是否为真。同样在console对象中也有assert方法，在断言为真时并不会输出任何信息，而在断言为false时，直接抛出异常。

表达式判断

上述代码中前两条语句判断结果都为true，所以没有输出任何信息，第三条语句判断结果为false，所以会直接抛出异常。

表格打印

console对象有个table方法，可以直接将对象类型的数据以表格展示。

表格打印

函数调用栈信息

通过console.trace()方法可以展示出函数调用栈的信息，来查看函数调用过程，一般会选择将这个方法放在最后执行的函数的方法体中。

函数调用栈信息

由于栈是先进后出机制，所以先执行的方法会在后面输出，因此上述代码结果会按照sum, f2, f1的顺序输出。

计时

一般统计一段代码执行耗时，方法会是通过Date对象获取毫秒数，然后将两个毫秒数进行相减。

一般计时方法

在上述代码中通过endTime和startTime两个变量的差值来计算出中间执行代码的耗时，我们可以看出往一个数组中添加100000个字符串耗时为15毫秒。

同样可以通过console对象的time()和timeEnd()方法来统计代码段的执行耗时。time()和timeEnd()可以接收一个字符串作为标识，而且两个方法接收的字符串必须一样，如果没有传入字符串则默认为‘default’字符串。

console对象计时方法

上述代码执行结果为16毫秒，与之前那个方法产生的结果大致一样。

性能分析

通过console.profile()和console.profileEnd()方法，可以展示出代码中各个函数执行所消耗的时间，可以用来评估代码性能。

我们使用以下测试代码来进行说明。

打开chrome浏览器的控制台会有一个Javascript Profile菜单栏，如果默认情况下没有的话，可以按照以下方法打开。

Javascript Profile

打开这个菜单选项后，我们可以看出每个方法执行消耗的时间。

时间消耗

结束语

今天这篇文章主要总结了下console对象的一些有用的方法，大家都掌握了吗？

控制台打印

上一篇：1.5.6 第3-7练:printf输出字符串用printf函数输出字符串"i am a student"
下一篇：C#-设置控制台窗口及显示飞行棋标题Logo 070

你不知道的Javascript之console对象使用小技巧，快来学下一下吧

前言

不同级别日志

包含占位符

打印分组信息

表达式判断

表格打印

函数调用栈信息

计时

性能分析

结束语

相关推荐

在.net core中使用nginx做负载均衡

React 18 超全升级指南

LTUI v1.7 发布，一个基于 Lua 的跨平台字符终端 UI 界面库

生成对抗网络(GAN)的半监督学习

《若依ruoyi》第二十五章:Spring boot 上传下载封装详解二

QT进阶之路 : 布局详解

如何在 Element UI 中使用栅格布局实现响应式设计?

IDEA 中 Jetty 的配置操作手册 idea jfinal

如何在Dify平台上创建智能Agent:一步步教你实现超级智能体搭建

k8s自动化运维三