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

发布于：2023-01-15 ⋅ 阅读:(270) ⋅ 点赞:(0)

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J0hOLY42-1660642313253)(https://article-lzp.oss-cn-hangzhou.aliyuncs.com/img/%E5%9B%BE%E6%80%AA%E5%85%BD_0c5a98c289398aa43af2b98bc6a86237_75873.png “null”)]

还在console.log()吗？？？

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

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

console.log()

    console.log(console)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TcAZRFRg-1660642313254)(https://article-lzp.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220816103608.png “null”)]

语法

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

  2. 2. 占位符写法

    • • 字符串： %s;

    • • 整数：%d;

    • • 浮点数：%f

    • • 对象：%o或%O；

    • • css： %c;

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f9UIWSL7-1660642313254)(https://article-lzp.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220816111709.png “null”)]

	let name = '小胖学前端'  
    let age = 18  
    console.log('My name is %s, My age is %d',name,age)  
     //My name is 小胖学前端, My age is 18
  1. 模板语法
    let name = '小胖学前端'  
let age = 18  
console.log(`My name is ${name}, My age is ${age}`)   
 //My name is 小胖学前端, My age is 18

console.clear()

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dIzD1u8T-1660642313255)(https://article-lzp.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220816152034.png “null”)]

console.debug()

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0vRkik6r-1660642313255)(https://article-lzp.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220816152538.png “null”)]

console.error()

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N3EIrxBa-1660642313255)(https://article-lzp.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220816152957.png “null”)]

console.info()

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KCK9ll48-1660642313256)(https://article-lzp.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220816153312.png “null”)]

console.warn()

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PNUs3mOr-1660642313256)(https://article-lzp.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220816153446.png “null”)]

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

打印表格

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

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

运行效果如下图所示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0OCPiRkQ-1660642313256)(https://article-lzp.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220816160818.png “null”)]

用来统计

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

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

运行效果如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7RcapZGV-1660642313256)(https://article-lzp.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220816161644.png “null”)]

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

console.dir()

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

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

运行效果是这样

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I76A943l-1660642313257)(https://article-lzp.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220816162523.png “null”)]

分组显示

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()

​ 运行效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mtRQ2mIh-1660642313257)(https://article-lzp.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220816163948.png “null”)]

写在最后

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

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布