还在console.log一把梭吗？console还有其他骚操作

Hi~，我是一碗周，如果写的文章有幸可以得到你的青睐，万分有幸~

🍈 写在前面

相信很多童鞋在开发中都是使用console.log()进行调试，本篇文章介绍一下console对象中的一些其他方法，这里并不是介绍console.info()、console.warn()和console.error这几个方法，而是一些比较有意思的方法。

🫐 打印表格

console对象中有一个table()方法，作用是将数据以表格的形式显示，该方法接受一个必选参数data，这个参数可以是一个数组或者对象，以及一个可选参数cloums，表示一个包含列的名称的数组。

如下代码展示了console.table()的用法：

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()表示当前分组结束。

如下展示展示了分组的用法：

// 默认展开
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()的用法：

// 默认参数
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面板：

我们可以看到这个样式就与默认的有所不同，实际上实现这种效果的代码是下面这样的：

console.log('%cHi! 我是掘金插件的产品经理，\n作为一名曾经的开发者，很高兴能以这样的方式与你认识，\n如果你对插件有什么要吐槽的或者好的想法分享', 'line-height: 30px')
console.log('欢迎给我发送邮件交流: %czhangshaozhuang@bytedance.com', 'line-height: 30px; color: red')

我们现在就对这个语法进行解析，如下图所示：

console样式详解_3FhSkN8Htg.png

在遇到%c后，会将后面的样式作为%c后文字的样式，遇到下一个%c会结束，下一个%c还可以在下一个参数的位置写CSS样式，依次类推。

如下代码展示了一句话中多个%c，具体代码如下：

console.log('%c红色%c蓝色%c绿色', 'color: red;', 'color: blue;', 'color: green;')

代码运行结果如下所示：

console中允许的CSS属性有限，具体可以参考MDN

如果想要设置多个属性，直接使用字符串的方式写出来的效果不易读，可以使用数组的方式将每一项写出，在通过join()方法拼接，示例代码如下所示：

// 将 CSS 属性放置数组内，通过 join 拼接为一个字符串
const styles = [
    'color: red',
    'background: yellow',
    'font-size: 24px',
].join(';')
console.log('%cHello 一碗周', styles)

🍓 写在最后

本篇文章到这里就结束了，如果觉得本文有用，可以点赞支持一下啊~