還在console.log一把梭嗎?console還有其他騷操作

語言: CN / TW / HK

theme: fancy highlight: atom-one-light


持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第3天,點選檢視活動詳情

Hi~,我是一碗周,如果寫的文章有幸可以得到你的青睞,萬分有幸~

🍈 寫在前面

相信很多童鞋在開發中都是使用console.log()進行除錯,本篇文章介紹一下console物件中的一些其他方法,這裡並不是介紹console.info()console.warn()console.error這幾個方法,而是一些比較有意思的方法。

🫐 打印表格

console物件中有一個table()方法,作用是將資料以表格的形式顯示,該方法接受一個必選引數data,這個引數可以是一個數組或者物件,以及一個可選引數cloums,表示一個包含列的名稱的陣列。

如下程式碼展示了console.table()的用法:

javascript var arr = [ { name: '張三', age: 18, sex: '男' }, { name: '李四', age: 19, sex: '男' }, { name: '王五', age: 20, sex: '男' }, ] console.table(arr)

程式碼執行結果如下所示:

image_Gk3AS5OkPO.png

🍒 分組顯示

當我們需要列印特別多的資訊時,可能頁面的資料過多無法快速準確的定位我們想要的資訊。console物件中提供了兩組方法可以幫助我們來完成這個分組操作,具體如下:

  • console.group()console.groudEnd()

  • console.groupCollapsed()console.groudEnd()

這兩者的區別就是前者分組是預設展開的,後者預設摺疊。

console.group()console.groupCollapsed()接受一個引數,表示分組名稱;console.groudEnd()表示當前分組結束。

如下展示展示了分組的用法:

javascript // 預設展開 console.group('person') console.log('name: 張三') console.log('age: 18') console.groupEnd() // 預設摺疊 console.groupCollapsed('person') console.log('name: 張三') console.log('age: 18') console.groupEnd()

程式碼執行結果如下所示:

image_yMtfOWv5mA.png

🍑 計數操作

console物件中的count()方法可以用來完成計數的操作,該方法接受一個可選的引數,即輸出的內容,預設為default;該方法還可以根據不同的引數來分別計數。

如下程式碼展示了console.count()的用法:

javascript // 預設引數 console.count() console.count() console.count() // 根據不同引數分別進行計數 console.count('一碗周') console.count('happy coding') console.count('一碗周') console.count('happy coding') console.count('一碗周') console.count('happy coding')

程式碼執行結果如下所示:

image_nluJLWovs2.png

🍐 樣式美化

我們還可以為console.log()輸出的樣式進行美化,對輸入的樣式美化主要是通過%c來完成的。

我們先來看一下掘金瀏覽器外掛中的console面板:

image__w8ImmkD-Z.png

我們可以看到這個樣式就與預設的有所不同,實際上實現這種效果的程式碼是下面這樣的:

javascript console.log('%cHi! 我是掘金外掛的產品經理,\n作為一名曾經的開發者,很高興能以這樣的方式與你認識,\n如果你對外掛有什麼要吐槽的或者好的想法分享', 'line-height: 30px') console.log('歡迎給我傳送郵件交流: %[email protected]', 'line-height: 30px; color: red')

我們現在就對這個語法進行解析,如下圖所示:

console樣式詳解_3FhSkN8Htg.png

在遇到%c後,會將後面的樣式作為%c後文字的樣式,遇到下一個%c會結束,下一個%c還可以在下一個引數的位置寫CSS樣式,依次類推。

如下程式碼展示了一句話中多個%c,具體程式碼如下:

javascript console.log('%c紅色%c藍色%c綠色', 'color: red;', 'color: blue;', 'color: green;')

程式碼執行結果如下所示:

image_ZJlP7mCiR-.png

console中允許的CSS屬性有限,具體可以參考MDN

如果想要設定多個屬性,直接使用字串的方式寫出來的效果不易讀,可以使用陣列的方式將每一項寫出,在通過join()方法拼接,示例程式碼如下所示:

javascript // 將 CSS 屬性放置陣列內,通過 join 拼接為一個字串 const styles = [ 'color: red', 'background: yellow', 'font-size: 24px', ].join(';') console.log('%cHello 一碗周', styles)

🍓 寫在最後

本篇文章到這裡就結束了,如果覺得本文有用,可以點贊支援一下啊\~