十個很少使用的 JavaScript Console 方法
你一定聽說過 console.log() ，而且可能一直在使用它。它非常流行，在集成開發(fā)環(huán)境中鍵入時，Visual Studio Intellicode 等工具通常會在其他控制臺方法之前推薦使用它。
在本文中，我們將探討一些最有用的控制臺方法，以及它們在數據可視化、調試等方面的用途。
1. table()
當你需要在代碼中以表格形式（如對象數組）顯示一組對象時， console.table() 方法就會派上用場。以汽車列表為例：
const cars = [
{
color: 'red',
age: 4,
maxSpeed: 120,
},
{
color: 'blue',
age: 2,
maxSpeed: 100,
},
{
color: 'yellow',
age: 3,
maxSpeed: 160,
},
];如何在控制臺中檢查它們？ console.log() 是一種典型的方法：
console.log(cars);在 Chrome 瀏覽器開發(fā)者控制臺中，我們可以檢查我們記錄的對象的各種屬性，層次不限。
圖片
我們可以在 Node.js 終端中查看屬性，還可以獲得色彩：
圖片
這是一種可以接受的方法，但 console.table() 方法提供了一種更優(yōu)雅的替代方法：
console.table(cars);console.table() 在 Chrome 瀏覽器控制臺中:
圖片
console.table() in Node.js Node.js 中的
圖片
顧名思義，它以易于理解的表格形式呈現數據，就像電子表格一樣。它也適用于數組陣列。
const arr = [
[1, 3, 5],
[2, 4, 6],
[10, 20, 30],
];
console.table(arr);
圖片
2. assert()
console.assert() 非常適合調試目的，它接收斷言，并在斷言為 false 時向控制臺寫入錯誤信息。但如果是 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() 可以幫助您在調用它的位置輸出當前堆棧跟蹤。例如
function a() {
b();
}
function b() {
c();
}
function c() {
console.trace();
}
a();
圖片
4. error()
error() 可能是第二種最常用的 Console 方法。在 Chrome 瀏覽器控制臺中，它會以獨特的紅色顯示錯誤信息。
console.error('This is an error message.');
console.log('This is a log message.');
圖片
不過，在 Node.js 中不會有這種顏色分離：
圖片
不過，信息在內部被寫入不同的位置。 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()的信息將輸出到相應的文件，而不是控制臺。
5. warn()
console.warn() 在 Chrome 瀏覽器控制臺中輸出黃色信息，表示警告。
console.warn('This is a warning message');
圖片
在 Node.js 中，信息會像 console.error() 一樣寫入 stderr 流。
6. count() 和 countReset()
console.count() 記錄當前調用 count() 的執(zhí)行次數。這是另一個有用的調試工具。
function shout(message) {
console.count();
return message.toUpperCase() + '!!!';
}
shout('hey');
shout('hi');
shout('hello');
圖片
由于我們沒有指定標簽，因此顯示的標簽是 default 。我們可以通過為 count() 傳遞一個字符串參數來做到這一點
function shout(message) {
console.count(message);
return message.toUpperCase() + '!!!';
}
shout('hey');
shout('hi');
shout('hello');
shout('hi');
shout('hi');
shout('hello');
圖片
現在，每條信息都有不同的計數。countReset() 方法將標簽的計數設回零。
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(), and 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() 啟動定時器，執(zhí)行向其傳遞的標簽所指定的操作。 timeLog() 在不停止計時器的情況下記錄當前持續(xù)時間，我們用它來顯示迭代一千次后的時間。 timeEnd() 記錄當前持續(xù)時間并停止計時器。我們在一百萬次迭代后調用它。
看起來 forEach() 比 for of 快。
8. clear()
console.clear() 通過清除日志來清除控制臺中的雜亂信息。
console.log('A log message.');
console.clear();
圖片
9. group(), groupCollapsed(), and groupEnd()
console.group() 為其后的控制臺信息添加一級縮進。 console.groupEnd() 會將縮進程度重置為調用前面的 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.log() 將 HTMLElement 記錄為 HTML，我們可以在控制臺中瀏覽：
圖片
但是， console.dir() 會將其記錄為一個對象，并顯示一個交互式屬性列表：
圖片
總結
正如你在本文中所看到的，除了console.log()之外，還有許多控制臺方法。其中一些只是在控制臺 UI 中用顏色和更好的可視化來點綴，而另一些則可以作為調試和性能測試的強大工具。
