還在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)

🍓 寫在最後

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