作为前端,这几个关于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. 如果本文对您有帮助,欢迎点赞\评论\收藏哈,您的「点赞\评论\收藏」是我创作的加油站,感恩🤗。
相关推荐
醉の虾18 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧27 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm36 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王1 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒1 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰2 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter