日間學習 JavaScript API：控制台 API

JavaScript 有大量內建 API，讓程式設計變得有趣。但說實話，您真正充分發揮了其中的多少潛力？在接下來的 30 天，我們將深入研究這些 API，介紹它們是什麼以及您可能錯過的很酷的東西。從基礎知識到更高級的東西，您將一路學到新的技巧。

對 JavaScript API 感到不知所措嗎？或者也許您只是來這裡學習新事物？無論哪種方式，這個系列都適合您。

今天，我們從一個一直默默幫助您調試的 API 開始：控制台 API。當然，您以前使用過 console.log()，但它還有更多的功能。讓我們來揭開它的一些隱藏技巧吧！

什麼是控制台 API？

控制台 API 是超級有用的方法的集合，可以使偵錯、記錄和視覺化資料變得更加容易。

但讓我們面對現實吧——你可能一直堅持使用 console.log() 來處理所有事情。是時候改掉這個習慣了，因為這個 API 的功能還有很多。

這裡有一些你錯過的很酷的東西：

使用控制台 API 可以做的很酷的事情

1. 在表格中顯示資料

是否曾經感覺您的日誌只是一堆無法理解的文字？ console.table() 為您提供支援。

這是您的日誌現在可能的樣子：

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

結果：

現在讓我們來清理一下：

console.table(fruits);

結果：

好多了，對吧？它更容易閱讀，現在您的數據實際上一目了然。

2. 停止使用 console.assert() 寫出冗餘的 If 語句

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

而不是這個：

const isLoggedIn = false;

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

試試這個：

const isLoggedIn = false;

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

如果條件為假，訊息將被記錄。就這麼簡單吧？

3. 衡量程式碼效能

想知道一段程式碼需要多久才能執行？向 console.time() 和 console.timeEnd() 打個招呼。

以下是衡量表現的方法：

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

結果：

現在您可以找出是什麼拖慢了您的應用程式！

4. 計算一個區塊運行了幾次

有沒有想過一段程式碼的執行頻率是多少？手動追蹤可能很棘手，尤其是當您的程式碼變得越來越複雜時。這就是 console.count() 派上用場的地方。

想像一下這個場景：

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

乍一看，可能很容易算出以「A」開頭的名字的問候語運行了多少次。但隨著你的邏輯擴展，你可能會迷失方向。

現在讓我們用 console.count() 來簡化事情：

console.table(fruits);

這是發生的事情：

• 每次問候以「A」開頭的名字時，console.count() 都會增加計數並將其標記為「問候以 A 開頭的用戶」。
• 使用console.countReset()重置後，計數重新開始。

不再需要在程式碼中猜測或加入列印語句。只需一行，即可完成！

5. 使用 CSS 設定日誌樣式

有時，您需要彈出日誌。使用 %c 透過 CSS 設定日誌樣式並使其脫穎而出。

範例：

const isLoggedIn = false;

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

結果：

突出顯示錯誤、警告，或只是享受日誌帶來的樂趣。

6. 將相關日誌分組在一起

厭倦了滾動瀏覽無盡的日誌？使用 console.group() 將相關日誌分組在一起。

這是一個例子：

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() 讓群組預設為折疊狀態。

總結

控制台 API 比您想像的要強大得多。從表格到效能測量、計數器、樣式和分組，幾乎所有偵錯場景都有一個工具。

這只是我們JavaScript API 30 天系列的第一天。如果您發現這對您有幫助，請為本文添加書籤以供日後使用，並且一定要堅持下去——還有很多東西需要學習！

嘿，如果您有任何疑問，請隨時在 Twitter 上給我發訊息：@sprucekhalifa。不要忘記關注我以獲取更多見解和更新。快樂編碼！

以上是日間學習 JavaScript API：控制台 API的詳細內容。更多資訊請關注PHP中文網其他相關文章！