您肯定聽說過 console.log() 并且可能一直在使用它。它非常流行，像 Visual Studio Intellicode 這樣的工具通常會在 IDE 中輸入時在任何其他控制臺方法之前推薦它：
在今天這篇文章中，我們將探討一些最有用的控制臺方法及其在數(shù)據(jù)可視化、調(diào)試等方面的用途。
1.table（）
當(dāng)您需要直觀地查看代碼中可以以表格形式表示的一組對象（如對象數(shù)組）時，console.table() 方法會派上用場。以這個汽車清單為例：
const cars = [
{
color: 'red',
age: 4,
maxSpeed: 120,
},
{
color: 'blue',
age: 2,
maxSpeed: 100,
},
{
color: 'yellow',
age: 3,
maxSpeed: 160,
},
];
您將如何在控制臺中檢查它們？console.log() 是一個典型的方法：
在 Chrome 開發(fā)人員控制臺中，我們可以檢查我們記錄的對象的各種屬性，以及我們想要的任意多的層次結(jié)構(gòu)。
我們可以在 Node.js 終端中查看屬性并進行著色：
這是一種可接受的方法，但 console.table() 方法提供了一種更優(yōu)雅的替代方法：
顧名思義，它以易于理解的表格格式呈現(xiàn)數(shù)據(jù)，如電子表格。
table() 也適用于數(shù)組數(shù)組：
const arr = [
[1, 3, 5],
[2, 4, 6],
[10, 20, 30],
];
console.table(arr);
2. assert()
非常適合調(diào)試目的，console.assert() 接受斷言并在斷言為假時將錯誤消息寫入控制臺。但如果這是true，什么也不會發(fā)生。
const num = 13;
console.assert(num > 10, 'Number must be greater than 10');
console.assert(num > 20, 'Number must be greater than 20');
第一個斷言通過，因為 num 大于 10，所以控制臺中只顯示第二個：
3. trace()
console.trace() 幫助您在調(diào)用它的位置輸出當(dāng)前堆棧跟蹤。例如：
function a() {
b();
}
function b() {
c();
}
function c() {
console.trace();
}
a();
4.error()
error() 可能是第二流行的控制臺方法。在 Chrome 控制臺中，它以獨特的紅色顯示錯誤消息。
console.error('This is an error message.');
console.log('This is a log message.');
你不會在 Node.js 中獲得這種顏色分離：
但是，消息在內(nèi)部寫入不同的位置。console.error() 寫入 stderr 流，而 console.log() 寫入 stdout 流。您可以使用 process.stderr 和 process.stdout 訪問這些流。這對于將錯誤消息和信息性消息重定向到不同的文件很有用，就像我們在下面的代碼示例中所做的那樣。
const fs = require('fs');
const errorFs = fs.createWriteStream('./error-log.txt');
process.stderr.write = errorFs.write.bind(errorFs);
const infoFs = fs.createWriteStream('./info-log.txt');
process.stdout.write = infoFs.write.bind(infoFs);
console.error('This is an error message.');
console.log('This is a log message.');運行此代碼時，傳遞給 error() 和 log() 的消息將輸出到相應(yīng)的文件，而不是控制臺。
5.warn()
console.warn() 在 Chrome 控制臺中輸出一條黃色消息，表示警告。
console.warn('This is a warning message');
在 Node.js 中，消息被寫入 stderr 流，如 console.error()。
6. count() 和 countReset()
console.count() 記錄當(dāng)前調(diào)用 count() 的次數(shù)。另一個有用的調(diào)試工具。
function shout(message) {
console.count();
return message.toUpperCase() + '!!!';
}
shout('hey');
shout('hi');
shout('hello');
顯示的標簽是默認的，因為我們沒有指定標簽。我們可以通過將字符串參數(shù)傳遞給 count() 來做到這一點。
function shout(message) {
console.count(message);
return message.toUpperCase() + '!!!';
}
shout('hey');
shout('hi');
shout('hello');
shout('hi');
shout('hi');
shout('hello');
現(xiàn)在我們對每條消息都有不同的計數(shù)。
countReset() 方法將標簽的計數(shù)設(shè)置回零。
function shout(message) {
console.count(message);
return message.toUpperCase() + '!!!';
}
shout('hi');
shout('hello');
shout('hi');
shout('hi');
shout('hello');
console.countReset('hi');
shout('hi');
7. time()、timeEnd() 和 timeLog()
我們可以一起使用這些方法來測量我們程序中的特定操作需要多長時間。
const arr = [...Array(10)];
const doubles1 = [];
console.time('for of');
let i = 0;
for (; i < 1000; i++) {
for (const item of arr);
}
console.timeLog('for of');
for (; i < 1000000; i++) {
for (const item of arr);
}
console.timeEnd('for of');
console.time('forEach');
i = 0;
for (; i < 1000; i++) {
arr.forEach(() => {});
}
console.timeLog('forEach');
for (; i < 1000000; i++) {
arr.forEach(() => {});
}
console.timeEnd('forEach');
這里我們對 for of 和 forEach 循環(huán)進行性能比較。time() 為傳遞給它的標簽指定的操作啟動計時器。timeLog() 在不停止計時器的情況下記錄當(dāng)前持續(xù)時間，我們用它來顯示一千次迭代后經(jīng)過的時間。timeEnd() 記錄當(dāng)前持續(xù)時間并停止計時器。我們在經(jīng)過一百萬次迭代后調(diào)用它。
看起來 forEach() 比 for of 快。
8.clear()
console.clear() 通過清除日志來消除控制臺的混亂。
console.log('A log message.');
console.clear();
9. group()、groupCollapsed() 和 groupEnd()
console.group() 向其后的任何控制臺消息添加一定程度的縮進。console.groupEnd() 將縮進重置為調(diào)用前面的 console.group() 之前的級別。
console.log('This is the outer level');
console.group();
console.log('Level 2');
console.group();
console.log('Level 3');
console.warn('More of level 3');
console.groupEnd();
console.log('Back to level 2');
console.groupEnd();
console.log('Back to the outer level');
console.groupCollapsed() 創(chuàng)建一個類似于 console.group() 的組，但是該組會折疊，直到用戶使用旁邊的顯示按鈕展開它。
console.log('This is the outer level');
console.group();
console.log('Level 2');
console.groupCollapsed();
console.log('Level 3 ');
console.warn('More of level 3');
console.groupEnd();
console.log('Back to level 2');
console.groupEnd();
console.log('Back to the outer level');
10.dir()
console.dir() 的工作方式類似于 console.log()，除了記錄 HTMLElements。console.log() 將 HTMLElement 記錄為我們可以在控制臺中遍歷的 HTML：
但是 console.dir() 會將其記錄為一個對象，顯示一個交互式屬性列表：
結(jié)論
正如您在本文中看到的，除了 console.log() 之外，還有許多控制臺方法。其中一些只是在控制臺 UI 中使用顏色和更好的可視化來增添趣味，而另一些則可以作為調(diào)試和性能測試的強大工具。
今天內(nèi)容就先分享到這里，希望對你有用，感謝閱讀。
