作者 |?Indrek Lasn 譯者 | 王強 編輯 | 張之棟、王文婧 JavaScript 為我們的代碼調試提供了足夠多的工具，但調試 JavaScript 代碼最好的方法又是什么呢？

調試 JavaScript 代碼的最簡單途徑就是簡單地通過 console.log 方法輸出結果。雖然它能用，但這并不是最理想的處理方式。如果有更好的方法，何不探索一番呢？

“來自控制臺的 Hello”

console 對象提供對瀏覽器調試控制臺的訪問。僅當在瀏覽器上運行 JavaScript 代碼(即客戶端代碼而非服務端代碼)時，才可以使用 console 對象。不同瀏覽器的工作方式各不相同，但是通常都會提供一組常規功能。調試語句最棒的一點是它們兼容所有庫和框架，因為它們是在核心語言中編寫的。

console.log 的最基本使用場景是顯示代碼的輸出。考慮以下代碼：function?sayHello(name) {

它記錄傳遞給 sayHello 函數的名稱。

輸出傳遞給函數的名稱

如果我們想知道必須調用 sayHello 函數多少次，該怎么辦？有一個簡單的方法，稱為 console.count()。

console.count count() 會輸出使用該標簽調用它的次數。如果沒有參數，count() 的行為就像使用默認標簽調用一樣。function?

上面的代碼記錄以下內容：

統計我們調用 sayHello 函數的次數

這樣可以統計出調用函數的次數，但如果要統計調用相同名稱函數的次數怎么辦？一種方法是簡單地將 name 參數傳遞給 count 方法。function?

搞定！該函數跟蹤我們用每個名稱調用這個函數的次數。

統計我們說每個名字的次數

console.warn 以下方法將警告消息輸出到控制臺，在使用開發人員工具或 API 時非常有用。console.warn 是一種理想選擇，用來讓用戶知道某些事情不對勁，例如省略參數或讓開發人員知道 API/ 軟件包版本已過時。function?sayHello(name) {

上面的代碼檢查 name 參數是否傳遞給函數。如果未輸入任何名稱，則會記錄一條警告消息，提示其考慮某些事項。

未傳遞名稱時，向用戶顯示警告消息。

console.table 如果我們要處理數組或對象，則在顯示數據時 console.table 很有用。數組中的每個元素將是表中的一行。以下面的示例為例，其中有一系列水果組成的數組。如果將 fruits 數組傳遞給 console.table 方法，則應該看到一個打印到控制臺的表。const?fruits = [

而且如果我們看一眼控制臺，應該看到一個描述數組的表。

以表格形式顯示數組

你可以想象一下，當我們處理具有數百個(甚至數千個)值的更大數組，這種方法會非常有用。這里有一個例子來說明問題，其中數組有更多的值。const?fruits = [

如果我們用數組調用 console.table，我們應該看到下表。

在表格中顯示所有水果

使用數組很簡單。如果我們要處理的是對象呢？const?pets = {

注意，現在我們有了一個對象而不是一個數組。該對象擁有兩個鍵：寵物的 name 和 type。

該表沒有像之前那樣注銷值，而是顯示值以及鍵和值。如果我們還有一個對象并嘗試將其列出，該怎么辦？const?pets = {

不出所料，兩個單獨的對象顯示在兩個不同的表中。

兩個對象

如果我們想將它們配對在一個表中，則將對象包裝在數組中。const?pets = {

現在我們將對象分組到一個表中。

通過將對象包裝在數組中進行分組

console.group 在使用集合或鏈接數據時，請使用嵌套組來直觀地關聯相關消息，從而讓輸出井井有條。要創建一個新的嵌套塊，請調用 console.group()。console.log(

以下代碼顯示嵌套的塊級控制臺語句——在處理基于關系的數據時很有用。

console.groupCollapsed() 方法也差不多，但是新塊是折疊的，需要單擊顯示按鈕才能讀取它。

概? 要??

請使用語言自身提供的所有工具，能用就用。簡單提一下：由于 debugger 本身就值得單獨寫一篇文章來探討，因此我們暫時跳過了它的內容。

如果你對 debugger 感到好奇，請參閱這篇文章: https://medium.com/@indreklasn/how-to-find-bugs-in-your-code-with-the-debugger-a7f739ea98?

如果你剛入門 JavaScript，想要學習這種語言，我建議你先閱讀相關書籍，同時結合實際的構建來學習。先看一下《更聰明的 JavaScript 學習方式》一書，這里還列出了一些用來構建的有趣應用程序: https://medium.com/better-programming/the-secret-to-being-a-top-developer-is-building-things-heres-a-list-of-fun-apps-to-build-aac61ac0736c

感謝閱讀。

原文鏈接: https://medium.com/better-programming/boost-your-javascript-debugging-skills-with-these-console-tricks-ab984c70298a

總結

以上是生活随笔為你收集整理的JavaScript 数组拼接打印_巧用控制台，提升JavaScript调试性能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。