JS的console對(duì)象的一些小技巧
在學(xué)習(xí) JS 的過(guò)程中，我們常用
console.log輸出日志到瀏覽器控制臺(tái)，今天就來(lái)看看console對(duì)象的一些使用小技巧。
在瀏覽器中，console對(duì)象是window對(duì)象上的一個(gè)屬性，我們可以在控制臺(tái)打印出window對(duì)象或者使用window.hasOwnProperty('console')來(lái)進(jìn)行證明，我們一般是直接引用 console 使用。
基本使用
1.打印不同級(jí)別的日志
JS 定義了不同的日志級(jí)別，我們可以使用不同的方法輸出不同級(jí)別的日志，他們之間的區(qū)別主要在于控制臺(tái)的展示形式以及我們可以使用控制臺(tái)的日志過(guò)濾功能過(guò)濾出指定級(jí)別的日志。
// 打印日志內(nèi)容信息
console.log('log log');
// 打印咨詢類說(shuō)明信息
console.info('info log');
// 打印 debug 調(diào)試級(jí)別的信息
console.debug('debug log');
// 打印警告信息
console.warn('warn log');
// 打印錯(cuò)誤信息
console.error('error log');
在控制臺(tái)的打印結(jié)果如下：
2.過(guò)濾出控制臺(tái)中不同級(jí)別的日志
上面說(shuō)到不同級(jí)別的日志可以通過(guò)瀏覽器控制臺(tái)的日志過(guò)濾功能進(jìn)行過(guò)濾，下面簡(jiǎn)單介紹一下。
如下圖所示，默認(rèn)情況下是展示所有級(jí)別日志：
下面是不同選項(xiàng)時(shí)展示的日志：
Default：只展示
info，warn，error級(jí)別和log的日志Verbose：只展示
debug級(jí)別的日志Info：只展示
info級(jí)別和log日志Warnings：只展示
warn級(jí)別的日志Errors：只展示
error級(jí)別的日志
console小技巧
下面正式介紹 console 相關(guān)的一些小技巧。
1.打印對(duì)象屬性和值
通過(guò)使用{}包裹打印的內(nèi)容，可以輸出對(duì)應(yīng)的屬性及其值，方便查看。
var a = 1;
var b = 2;
var c = 3;
console.log({a, b, c});
輸出效果如下圖：
2.統(tǒng)計(jì)代碼執(zhí)行耗時(shí)
有時(shí)候我們需要一種手段來(lái)統(tǒng)計(jì)某段代碼的執(zhí)行耗時(shí)，一般是記錄代碼執(zhí)行前后的時(shí)間，cosnole也提供了相應(yīng)的功能，我們只需要在調(diào)用的開(kāi)始和結(jié)束的方法中傳入相同的指定的標(biāo)識(shí)即可。
console.time('cost-time')
var result = 0;
for(var i = 0; i < 100000; i++){
result += i;
}
console.timeEnd('cost-time');
輸出效果如下圖：
3.打印對(duì)象的可交互列表
有時(shí)候我們需要打印對(duì)象，如果對(duì)象內(nèi)容比較少會(huì)全部展開(kāi)顯示在控制臺(tái)，我們可以使用下面的方法打印，打印結(jié)果會(huì)顯示一個(gè)三角形，方便我們一級(jí)一級(jí)展開(kāi)查看。
const obj = {name: 'John', age: 18, sex: 'male', height: 180};
console.dir(obj);
輸出的效果如下圖：
4.表格形式呈現(xiàn)打印
有時(shí)候如果你希望以表格的形式呈現(xiàn)輸出結(jié)果，就可以使用下面的方法。
const obj = {name: 'John', age: 18, sex: 'male', height: 180};
console.table(obj);
輸出效果如下圖：
而且這個(gè)表格還是可交互的，可以根據(jù)不同的屬性進(jìn)行排序展示。
5.自定義控制臺(tái)輸出樣式
如果我們對(duì)日志輸出格式還有特殊的要求，可以在輸出日志時(shí)自定義輸出樣式。我們只需要使用%c在輸出內(nèi)容中指定一個(gè)占位符，并在后面參數(shù)中傳入指定的 CSS 樣式，那么從占位符開(kāi)始的內(nèi)容都會(huì)應(yīng)用該樣式，這里給一個(gè)例子，具體支持的所有 CSS 樣式可以在文末的參考文檔查看。
console.log('This is %c result', 'background-color: red');
輸出的效果如下圖：
寫(xiě)在最后
以上就是今天要介紹的一些小技巧，希望可以對(duì)大家有所幫助。
參考鏈接
B站|你只會(huì)使用console.log嗎：https://www.bilibili.com/video/BV1a64y147fs
MDN|Console對(duì)象介紹：https://developer.mozilla.org/zh-CN/docs/Web/API/Console