console用法

關於Console

在寫 JavaSrcipt的時候，要檢查運作流程或是檢查變數的狀態的時候，都會用到console.log來檢視程式或是參數的值，
但是console還有很多不同的用法

• console.log()
• console.info()
• console.warn()
• console.error()
• console.dir()
• console.count()
• console.assert()
• console.table()

console.log()

這是最常使用到，最基本的用法。

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

這幾個的用法也是一樣

以下為使用方法 :

const str = 'Hello World';

console.log(str);
console.info(str);
console.warn(str);
console.error(str);

輸出結果如下

`console.log()` 輸出的是標籤

console.dir() 輸出的卻是物件

console.dir()

console.dir()是一種在控制台中查看指定JavaScript物件的所有屬性的方法，開發人員可以通過這種方式輕鬆獲取物件的屬性。

以下為程式碼 :

<p id="pp">hello</p>

// 取得html標籤
const pp = document.getElementById('pp')

console.log('---log---')
console.log(pp) // log
console.log('---dir---')
console.dir(pp) // dir

輸出結果

console.count()

測試程式運行邏輯時，我們需要知道一段程式執行了多少次，我們可以使用console.count()來達到我們的目的

function func() {
    console.count("label");
}

for(let i = 0; i < 3; i++) {
    func();
}

輸出結果為 :

label: 1
label: 2
label: 3

console.assert()

類似測試 條件判斷，當判斷為false 會出現錯誤訊息

以下為程式碼 :

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

輸出結果為

console.table()

可以將物件 轉換成 table的方式顯示

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

輸出結果

只是這個轉換時間會比較久