Console的这些功能你了解吗？Console的其他骚操作

图怪兽_0c5a98c289398aa43af2b98bc6a86237_75873.png

还在console.log()吗？？？

在前端开发中，相信有不少小伙伴调试代码的时候用得最多的就是console.log()了，但是如果面对复杂数据时，是不是就有些鸡肋呢？其实console为我们提供了很多方法，但小伙伴们用到的又有几个呢

下面让我带大家来一起看看console的花式调用。

console.log()

---

    console.log(console)

微信截图_20220816103608.png

语法

1. console.log(js常见数据)

       console.log(123) //123
   

2. 占位符写法

   • 字符串： %s;

   • 整数：%d;

   • 浮点数：%f

   • 对象：%o或%O；

   • css： %c;

     
     微信截图_20220816111709.png

      let name = '小胖学前端'
      let age = 18
      console.log('My name is %s, My age is %d',name,age)
      //My name is 小胖学前端, My age is 18 

3. 模板语法

     let name = '小胖学前端'
     let age = 18
     console.log(`My name is ${name}, My age is ${age}`) 
     //My name is 小胖学前端, My age is 18 

console.clear()

---

该方法用于清楚控制台信息

微信截图_20220816152034.png

console.debug()

---

输出调试级别消息，在浏览器中配置debug后才可以显示，比如在Firefox浏览器中，没有勾选调试是无法显示的,只有勾选以后才会显示。

微信截图_20220816152538.png

console.error()

---

向web控制台输出一条错误消息。

微信截图_20220816152957.png

console.info()

---

向控制台输出一条通知消息

微信截图_20220816153312.png

console.warn()

---

向 Web 控制台输出一条警告信息

微信截图_20220816153446.png

---

上面基础部分完了，接下来看重头戏

打印表格

---

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

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

运行效果如下图所示

微信截图_20220816160748.png
微信截图_20220816160818.png

用来统计

---

console对象中的count()方法可以用来完成计数的操作，该方法接受一个可选的参数，即输出的内容，默认为default；该方法还可以根据不同的参数来分别计数。

    console.count('我是');
    console.count('小胖');
    console.count('我是');
    console.count('小胖');
    console.count('我是');
    console.count('小胖');

运行效果如图：

微信截图_20220816161644.png

console对象中还存在一个countReset()方法,这个方法是用来重启计数器的，我就不一一展示了，感兴趣的同学可以自己试一下。

console.dir()

---

console.dir()我自己的理解是相当于打印数据结构树

    let student = {
        name: '张三',
        age:18,
        sex: '男',
        sutdentInfo: {
            grade: '高三年级',
            class: '335班'
        }
    }
    console.log(student)
    console.dir(student)

运行效果是这样

微信截图_20220816162523.png

分组显示

---

console 的分组显示涉及到group()、groupCollapsed()和groupEnd()三个方法来将不同的控制台输出组合在一起以显示它们之间的一种关系形式。通常是组合在一起使用的。

• group接收一个参数，表示组名，如果不设置，在不同浏览器表现不一致，浏览器默认展开组。

• groupCollapsed()与group的不同在于groupCollapsed会自动折叠组。

• groupEnd()表示组的结束。

      //默认展开
      console.group('person')
      console.log('name: 张三')
      console.log('age: 19')
      console.groupEnd()
      //默认折叠
      console.groupCollapsed('person')
      console.log('name: 张三')
      console.log('age: 19')
      console.groupEnd()
  

    运行效果：

微信截图_20220816163948.png

---

写在最后

本片文章到这里就结束了，这是小编第一次写，如有错误，请多多见谅；如果觉得有用，可以点赞支持一下~