作为前端,这几个关于console的小知识点,你知道吗
在我们实际开发中呢,经常会遇到把一个变量打印到控制台,看一下它的结果的情况
就比如下面这个形式的对象:
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()
:
console.log(JSON.stringify(obj, null, 4))
运行效果如下:
可以看到,这里以字符串的形式将这个对象输出在了控制台。
console.table
我们还可以使用 console.table()
,它会以一种表格的形式来输出结果:
可以看到,这样看着还是很整齐的。
如果我们要打印的是一个数组的话,使用 console.table()
输出数据,看起来会更方便一些:
const arr = ['a', 'b', 'c']
console.table(arr)
还有,输出多个数据的使用使用 console.table()
也有利于查看数据,如:
const a = 'a', b = 'b', c = 'c'
console.table({a, b, c})
效果如下:
consle.time 和 console.timeEnd
还有,在我们开发的过程中,有时候需要去看一段代码执行到底消耗了多少时间,我们可以使用 console.time()
和 consle.timeEnd()
包裹想要测试运行时间的代码,比如下面这段代码:
function test() {
for (let i = 0; i < 10000; i++) { }
}
console.time()
test()
console.timeEnd()
运行代码,可以看到控制台输出了这段代码在本机大概的一个运行时间:
作者:程序员黑豆
来源:juejin.cn/post/7292969465298567187
来源:juejin.cn/post/7292969465298567187