關(guān)于JavaScript的日志打印, 不止有console.log一種, 其實(shí)還有很多, 記錄一下吧
-
console.table()
這個(gè)的話, 一般用于數(shù)組, 或者json格式的時(shí)候, 可以進(jìn)行可視化的操作, 比如:
var params = [
{name: "張三", age: 22, sex: "男"},
{name: "李四", age: 21, sex: "男"},
{name: "小紅", age: 18, sex: "女"}
]
console.table(params);
console.table().png
這樣一看, 是不是非常的簡(jiǎn)單明了, 這個(gè)可以推薦大家多去用用, 真的很方便
-
console.info(), console.warn(), console.error()
其實(shí)這些用法和console.log()的用法相同, console.info()為提示信息, console.warn()為警示信息, console.error()為錯(cuò)誤信息, 下面來(lái)看例子
console.log('log信息');
console.info('info信息');
console.warn('warn信息');
console.error('error信息');
image.png
-
console.dir()
我們?cè)谑褂胏onsole.log的時(shí)候, 是可以打印dom的節(jié)點(diǎn), 類似于下圖
console.log打印dom節(jié)點(diǎn).png
但是看不到這個(gè)input節(jié)點(diǎn)下面的屬性對(duì)不對(duì)? 我要查看屬性怎么辦? 使用console.dir(), 請(qǐng)看:
console.dir打印dom節(jié)點(diǎn)屬性.png
是不是明顯的區(qū)別, 所以想看dom節(jié)點(diǎn)屬性的時(shí)候, 不妨可以試試這個(gè)console.dir()方法 -
console.group()
這個(gè)其實(shí)是用于分組, 其實(shí)是在控制臺(tái)創(chuàng)建一個(gè)新的分組, 然后輸出在控制臺(tái)上的內(nèi)容都會(huì)添加一個(gè)縮進(jìn), 標(biāo)識(shí)該內(nèi)容屬于這個(gè)分組, 知道調(diào)用console.groupEnd()的時(shí)候, 當(dāng)前的這個(gè)分組就結(jié)束, 直接看例子, 還是用上上面的表格, 來(lái)做一個(gè)
var params = [
{name: "張三", age: 22, sex: "男"},
{name: "李四", age: 21, sex: "男"},
{name: "小紅", age: 18, sex: "女"}
]
console.group('分組開(kāi)始');
console.table(params);
console.groupEnd();
console.group()分組展示.png
-
console.count()
這個(gè)方法特別適用于計(jì)數(shù)使用, 比如說(shuō)for循環(huán)等場(chǎng)景, 如果在console.count()里未傳參數(shù), 則默認(rèn)為default,
如果傳了參, 則為傳的參數(shù). 如下例子:
// 先試試不傳參數(shù)的
for(let i = 0; i < 5; i++) {
console.count();
}
// 傳參數(shù)的
for(let i = 0; i < 5; i++) {
console.count("label")
}
console.count()打印展示.png
-
console.log()
其實(shí)這種是用的最普遍的, 它就是向控制臺(tái)輸出一條信息, 它支持多個(gè)參數(shù), 輸出的行為取決于輸入的第一個(gè)參數(shù)是否一個(gè)替換字符串, 如果第一個(gè)參數(shù)是替換字符串, 那么后面的參數(shù), 都是為這個(gè)替換字符串服務(wù)的
先來(lái)說(shuō)一下替換字符串的參數(shù)
| 占位符 | 描述 |
|---|---|
| %s | 字符串 |
| %d或%i | 整數(shù) |
| %o | 對(duì)象 |
| %f | 浮點(diǎn)數(shù) |
| %c | 樣式代碼 |
console.log('%c 把這些字替換成紅色蒂秘！%s', 'color: red', '我是后來(lái)追加的文字');
// 如果去掉了%s
console.log('%c 把這些字替換成紅色！', 'color: red', '我是后來(lái)追加的文字');
console.log打印展示.png
先總結(jié)一下常用的吧, 后面的我再研究研究, 再補(bǔ)上來(lái)
