JavaScript 有大量?jī)?nèi)置 API，使編程變得有趣。但說(shuō)實(shí)話，您真正充分發(fā)揮了其中的多少潛力？在接下來(lái)的 30 天，我們將深入研究這些 API，介紹它們是什么以及您可能錯(cuò)過(guò)的很酷的東西。從基礎(chǔ)知識(shí)到更高級(jí)的東西，您將一路學(xué)到新的技巧。

對(duì) JavaScript API 感到不知所措嗎？或者也許您只是來(lái)這里學(xué)習(xí)新東西？無(wú)論哪種方式，這個(gè)系列都適合您。

今天，我們從一個(gè)一直默默幫助您調(diào)試的 API 開始：控制臺(tái) API。當(dāng)然，您以前使用過(guò) console.log()，但它還有更多的功能。讓我們來(lái)揭開它的一些隱藏技巧吧！

什么是控制臺(tái) API？

控制臺(tái) API 是超級(jí)有用的方法的集合，可以使調(diào)試、記錄和可視化數(shù)據(jù)變得更加容易。

但是讓我們面對(duì)現(xiàn)實(shí)吧——你可能一直堅(jiān)持使用 console.log() 來(lái)處理所有事情。是時(shí)候改掉這個(gè)習(xí)慣了，因?yàn)檫@個(gè) API 的功能還有很多。

這里有一些你錯(cuò)過(guò)的很酷的東西：

使用控制臺(tái) API 可以做的很酷的事情

1. 在表格中顯示數(shù)據(jù)

是否曾經(jīng)感覺您的日志只是一堆無(wú)法理解的文本？ console.table() 為您提供支持。

這是您的日志現(xiàn)在可能的樣子：

const fruits = [
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" },
  { name: "Grapes", color: "Green" },
];
console.log(fruits);

結(jié)果：

現(xiàn)在讓我們清理一下：

console.table(fruits);

結(jié)果：

好多了，對(duì)吧？它更容易閱讀，現(xiàn)在您的數(shù)據(jù)實(shí)際上一目了然。

2. 停止使用 console.assert() 編寫冗余的 If 語(yǔ)句

如果您編寫了十幾個(gè) if 語(yǔ)句只是為了記錄錯(cuò)誤，請(qǐng)舉手。好吧，別再這樣做了！ console.assert() 是為了拯救這一天。

而不是這個(gè)：

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("User is not logged in");
}

試試這個(gè)：

const isLoggedIn = false;

console.assert(isLoggedIn, "User is not logged in");

如果條件為假，消息將被記錄。就這么簡(jiǎn)單吧？

3. 衡量代碼性能

想知道一段代碼需要多長(zhǎng)時(shí)間才能執(zhí)行？向 console.time() 和 console.timeEnd() 打個(gè)招呼。

以下是衡量性能的方法：

console.time("Loop Timer");
for (let i = 0; i < 1_000_000; i++) {}
console.timeEnd("Loop Timer");

結(jié)果：

現(xiàn)在您可以找出是什么拖慢了您的應(yīng)用程序！

4. 計(jì)算一個(gè)區(qū)塊運(yùn)行了多少次

有沒(méi)有想過(guò)一段代碼的執(zhí)行頻率是多少？手動(dòng)跟蹤可能很棘手，尤其是當(dāng)您的代碼變得越來(lái)越復(fù)雜時(shí)。這就是 console.count() 派上用場(chǎng)的地方。

想象一下這個(gè)場(chǎng)景：

const fruits = [
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" },
  { name: "Grapes", color: "Green" },
];
console.log(fruits);

乍一看，可能很容易算出以“A”開頭的名字的問(wèn)候語(yǔ)運(yùn)行了多少次。但隨著你的邏輯擴(kuò)展，你可能會(huì)迷失方向。

現(xiàn)在讓我們用 console.count() 來(lái)簡(jiǎn)化事情：

console.table(fruits);

這是發(fā)生的事情：

• 每次問(wèn)候以“A”開頭的名字時(shí)，console.count() 都會(huì)增加計(jì)數(shù)并將其標(biāo)記為“問(wèn)候以 A 開頭的用戶”。
• 使用console.countReset()重置后，計(jì)數(shù)重新開始。

不再需要在代碼中猜測(cè)或添加打印語(yǔ)句。只需一行，即可完成！

5. 使用 CSS 設(shè)置日志樣式

有時(shí)，您需要彈出日志。使用 %c 通過(guò) CSS 設(shè)置日志樣式并使其脫穎而出。

示例：

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("User is not logged in");
}

結(jié)果：

突出顯示錯(cuò)誤、警告，或者只是享受日志帶來(lái)的樂(lè)趣。

6. 將相關(guān)日志分組在一起

厭倦了滾動(dòng)瀏覽無(wú)盡的日志？使用 console.group() 將相關(guān)日志分組在一起。

這是一個(gè)例子：

const isLoggedIn = false;

console.assert(isLoggedIn, "User is not logged in");

輸出：

console.time("Loop Timer");
for (let i = 0; i < 1_000_000; i++) {}
console.timeEnd("Loop Timer");

您還可以使用 console.groupCollapsed() 讓組默認(rèn)處于折疊狀態(tài)。

總結(jié)

控制臺(tái) API 比您想象的要強(qiáng)大得多。從表格到性能測(cè)量、計(jì)數(shù)器、樣式和分組，幾乎所有調(diào)試場(chǎng)景都有一個(gè)工具。

這只是我們JavaScript API 30 天系列的第一天。如果您發(fā)現(xiàn)這對(duì)您有幫助，請(qǐng)為本文添加書簽以供日后使用，并且一定要堅(jiān)持下去——還有很多東西需要學(xué)習(xí)！

嘿，如果您有任何疑問(wèn)，請(qǐng)隨時(shí)在 Twitter 上給我發(fā)消息：@sprucekhalifa。不要忘記關(guān)注我以獲取更多見解和更新。快樂(lè)編碼！

以上是日間學(xué)習(xí) JavaScript API：控制臺(tái) API的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！