作为前端,这几个关于console的小知识点,你知道吗

公众号 程序员黑豆 分享前端资料、面试题、AI知识,欢迎关注哈。

在我们实际开发中呢,经常会遇到把一个变量打印到控制台,看一下它的结果的情况,就比如下面这个形式的对象:

js 复制代码
const obj = {
  "err_no": 0,
  "err_msg": "success",
  "data": {
    "user_basic": {
      "university": {},
      "major": {}
    },
    "user_counter": {},
    "user_growth_info": {}
  }
}

我们一般会使用 console.log() 看一下它的值: console.log(obj)

我们点击这个按钮可以一层层的展开这个对象:

除了 console.log() 外,根据实际情况我们还可以使用下面几种。

console.dir

我们还可以使用 console.dir()。在使用它输出 JS 数据类型数据的时候它和使用 console.log() 的效果差不多:

我们展开这个对象,可以查看我们想看的数据:

当我们想打印出个某个 DOM 对象时就不一样了,使用 console.log() 输出的是这个 DOM 元素:

使用 console.dir() 输出的是这个 DOM 对象:

JSON.stringify()

我们还可以使用 console.log() 配合 JSON.stringify()

js 复制代码
console.log(JSON.stringify(obj, null, 4))

运行效果如下:

可以看到,这里以字符串的形式将这个对象输出在了控制台。

console.table

我们还可以使用 console.table(),它会以一种表格的形式来输出结果:

可以看到,这样看着还是很整齐的。

如果我们要打印的是一个数组的话,使用 console.table() 输出数据,看起来会更方便一些:

js 复制代码
const arr = ['a', 'b', 'c']
console.table(arr)

还有,输出多个数据的使用使用 console.table() 也有利于查看数据,如:

js 复制代码
const a = 'a', b = 'b', c = 'c'
console.table({a, b, c})

效果如下:

consle.time 和 console.timeEnd

还有,在我们开发的过程中,有时候需要去看一段代码执行到底消耗了多少时间,我们可以使用 console.time()consle.timeEnd() 包裹想要测试运行时间的代码,比如下面这段代码:

js 复制代码
function test() {
  for (let i = 0; i < 10000; i++) { }
}

console.time()
test()
console.timeEnd()

运行代码,可以看到控制台输出了这段代码在本机大概的一个运行时间:

感谢阅读

  1. 公众号 程序员黑豆 分享前端资料、面试题、AI知识,欢迎关注哈。
  2. 如果本文对您有帮助,欢迎点赞\评论\收藏哈,您的「点赞\评论\收藏」是我创作的加油站,感恩🤗。
相关推荐
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香3 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596933 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai3 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书