還在console.log一把梭嗎?console還有其他騷操作
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)
代碼運行結果如下所示:
🍒 分組顯示
當我們需要打印特別多的信息時,可能頁面的數據過多無法快速準確的定位我們想要的信息。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()
代碼運行結果如下所示:
🍑 計數操作
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')
代碼運行結果如下所示:
🍐 樣式美化
我們還可以為console.log()
輸出的樣式進行美化,對輸入的樣式美化主要是通過%c
來完成的。
我們先來看一下掘金瀏覽器插件中的console面板:
我們可以看到這個樣式就與默認的有所不同,實際上實現這種效果的代碼是下面這樣的:
javascript
console.log('%cHi! 我是掘金插件的產品經理,\n作為一名曾經的開發者,很高興能以這樣的方式與你認識,\n如果你對插件有什麼要吐槽的或者好的想法分享', 'line-height: 30px')
console.log('歡迎給我發送郵件交流: %c[email protected]', 'line-height: 30px; color: red')
我們現在就對這個語法進行解析,如下圖所示:
在遇到%c
後,會將後面的樣式作為%c
後文字的樣式,遇到下一個%c
會結束,下一個%c
還可以在下一個參數的位置寫CSS樣式,依次類推。
如下代碼展示了一句話中多個%c
,具體代碼如下:
javascript
console.log('%c紅色%c藍色%c綠色', 'color: red;', 'color: blue;', 'color: green;')
代碼運行結果如下所示:
console
中允許的CSS屬性有限,具體可以參考MDN
如果想要設置多個屬性,直接使用字符串的方式寫出來的效果不易讀,可以使用數組的方式將每一項寫出,在通過join()
方法拼接,示例代碼如下所示:
javascript
// 將 CSS 屬性放置數組內,通過 join 拼接為一個字符串
const styles = [
'color: red',
'background: yellow',
'font-size: 24px',
].join(';')
console.log('%cHello 一碗周', styles)
🍓 寫在最後
本篇文章到這裏就結束了,如果覺得本文有用,可以點贊支持一下啊\~
- 用ChatGPT學Nginx是一種什麼體驗
- 【好物分享】分享給前端開發的28個資源(網站、軟件、插件),簡直是提高效率必備
- Vite3.0都來了,你還捲動嗎?(Vite3.0新特性一覽)
- 【好物分享】在命令行讀Markdown,這個感覺太舒服了
- 從0開始使用pnpm構建一個Monorepo方式管理的demo
- 我畫了5張腦圖可以讓你快速入門TypeScript
- 我看着MDN文檔,手寫了幾個數組實例方法
- 淺談JavaScript中的特殊函數
- 如何通過SSH配合VSCode收穫超舒適的遠程開發體驗
- CSS的calc函數不會還有人沒有用吧
- 【戲玩算法】12-圖
- 誰説前端不能搞紅黑樹,用這55張圖拿JS一起手撕紅黑樹
- 簡單總結了10個JavaScript代碼優化小tips
- NaiveUI中看起來沒啥用的組件(文字漸變)實現原來這麼簡單
- 面試官讓我用Flex寫色子佈局,我直接給寫了6個
- Vue3 TS Vite NaiveUI搭建一個項目骨架
- 用一萬多字從頭到尾介紹【函數式編程】
- 這8張腦圖幾乎概括了所有的佈局方案,確定不看看嗎?
- 【戲玩算法】07-字典
- 還在console.log一把梭嗎?console還有其他騷操作