在調試 JS 代碼時，很多人傾向于使用 alert() 或者 console.log() 方法來輸出信息，正如某些 Java 程序員喜歡在調試代碼時使用System.out.println() 輸出信息一樣。但與 Java 輸出不一樣的是， console 對象擁有多種方法可以更好的呈現信息，從而給代碼調試帶來方便。根據常用程度，列出以下幾種 console 對象的方法：

• console.log()

• console.debug()、console.info()、console.warn() 與 console.error()

• console.table()

• console.time() 與 console.timeEnd()

• console.assert()

• console.count()

• console.group、console.groupEnd() 與 console.groupCollapsed()

• console.dir()

以下示例的運行環境是 Chrome 53。

console.log()

先來談談我們最熟悉也最常用的 console.log() 方法。

我們最常用的做法是通過它來輸出一個變量或者輸出一個字符串。比如下面：

console.log("Hello China!"); const str = "Hello world!"; console.log(str);

運行結果如下：

Hello China! Hello world!

但我們也可以這樣用 console.log() ：

// 代碼段 1 const str1 = "hello"; const str2 = "world"; console.log(str1, str2);// 代碼段 2 console.log("%d年%d月%d日", 2015, 09, 22);

控制臺會輸出：

hello world 2015年9月22日

代碼片段 1 顯示，console.log() 的參數可以有多個，輸出的結果以一個空格隔開。

代碼片段 2 顯示，console.log() 可以使用 C 語言 printf() 風格的占位符，不過其支持的占位符種類較少，只支持字符串（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）。

console.debug()、console.info()、 console.warn() 與 console.error()

這四個方法的使用方法跟 console.log() 一模一樣，差別在于輸出的顏色與圖標不同。下面是示例：

console.log("log"); console.debug("debug"); console.info("info"); console.warn("warn"); console.error("error");

運行結果如下：

console.table()

我們看下面一個變量：

const people = {"person1": {"fname": "san", "lname": "zhang"}, "person2": {"fname": "si", "lname": "li"}, "person3": {"fname": "wu", "lname": "wang"} };

我們用 console.log() 將之在 Chrome 的控制臺中輸出：

再用 console.table() 輸出：

?

所以從上面兩種輸出我們可以看出，當輸出類似于這種兩層嵌套的對象時，我們可以選擇 console.table() 以表格的形式輸出。當然，嵌套三層及以上的也會以表格形式輸出，但限于表格只能顯示二維信息的特點，其會在嵌套三層或以上的地方會顯示 "Object" 字符串。

console.time() 與 console.timeEnd()

在調試時，我們經常需要知道一段代碼執行時間，我們可以使用這兩行代碼來實現。看下面一段代碼：

console.time("for-test"); const arr = []; for(let i = 0; i < 100000; i++) {arr.push({"key": i}); } console.timeEnd("for-test");

輸出為：

for-test: 16.030ms // Chrome 這優化做的，版本 43 中的時間是：176.152ms

從上面的例子可以看出，我們用 console.time() 和 console.timeEnd() 包圍要測試運行時間的代碼，這兩個方法的參數保持一致，以便正確識別和匹配代碼開始和結束的位置。

console.assert()

console.assert() 類似于單元測試中的斷言，當表達式為 false 時，輸出錯誤信息。示例如下：

const arr = [1, 2, 3]; console.assert(arr.length === 4);

輸出結果如下：

console.count()

調試代碼時，我們經常需要知道一段代碼被執行了多少次，我們可以使用 console.count() 來方便的達到我們的目的。示例如下：

function func() {console.count("label"); }for(let i = 0; i < 3; i++) {func(); }

運行結果為：

label: 1 label: 2 label: 3

console.group()、 console.groupEnd() 與 console.groupCollapsed()

一般的 console.log() 方法的輸出沒有層級關系，在需要一些顯示層級關系的輸出中顯得蒼白無力，使用 console.group() 可以達到我們的目的。示例代碼如下：

console.group("1"); console.log("1-1"); console.log("1-2"); console.log("1-3"); console.groupEnd(); console.group("2"); console.log("2-1"); console.log("2-2"); console.log("2-3"); console.groupEnd();

運行結果為：

把 "group" 換成 "groupCollapsed"，則默認為折疊運行結果。

console.dir()

console.dir() 是干嘛的？MDN?上說這個方法是為了將特定的 JS 對象顯示為可以交互的列表，而列表是折疊起來的。這么說有點抽象，看我在 Chrome 控制臺輸出的效果：

?

從上圖可以看到，用 console.dir() 輸出的結果是完全折疊的，所以大家能夠理解我為什么不會用 console.dir() 方法了。然后我又用 Firefox 測試了一下：

?

怪不得有小伙伴喜歡用這個方法，原來在 Firefox 的控制臺中，console.dir() 能夠將一個折疊的對象顯示為一個清晰的導航樹。

?

再看一個對比：

?

寫到這里可以說，如果在 Chrome 環境下進行開發，如果輸出一般的對象，推薦使用 console.log()，而在 Firefox 環境下，想要清晰地顯示一個對象，console.dir() 還是比較推薦的。

對于 Chrome 用戶來講，console.dir() 是不是就沒用了呢？然而并不是：

?

在 Chrome 中打印 DOM 元素時，兩個方法輸出的結果大不一樣。console.log() 會將 DOM 元素以 HTML 的形式輸出，而 console.dir() 則會以 JSON 對象的形式輸出。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Java工程师该如何编写高效代码？的全部內容，希望文章能夠幫你解決所遇到的問題。

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