Here I will share with you some of the knowledge I have summarized on the Internet, I hope it will be helpful to everyone
understand console
● What is a console?
The console is actually a native object in JavaScript
Most of the methods of internal storage are to output some content in the browser console
And also provides a lot of helper methods
● The most common console
In our development, in fact, we still use the console many times
especially when learning
But we mostly just use a console.log()
Others may know less
● All consoles
○ Have you ever thought about it, does the console really only have one log?
● Next, let’s introduce some contents of cosnole in detail
The above is not important, take a look
console.log
● Needless to say, as long as you are still a programmer
● Or if you are a probationary programmer, it is impossible for you not to know the method of log
● Syntax: console.log('content')
● Function: output a piece of content in the browser console
console.log('hello world')
Do you really know all about console.log?
1. Multiple parameters
● First, the console.log() method can pass multiple parameters
● And these parameters will be output together
2. Placeholders
● In the output content, placeholders can be added
● It’s too late to explain, just get in the car
● Example:
● What is this thing? Why is it like this?
● Since you have asked the question sincerely, I will tell you that I am so cute and charming
○ When there is a placeholder in the first parameter
○ Then the following parameters will be filled with placeholders in order
○ The extra ones will be output directly
Isn't it just a placeholder, it's too tasteless
● Who said we can only add one placeholder
● We name the ones that can add many placeholders, and then insert the content in order
I mean it's just one, it's too tasteless
I mean it's just one, it's too tasteless
● Who said we only have one placeholder, we have many placeholders
○ %s : String
○ %d : integer
○ %f : floating point number
○ %o : the connection of the object
○ %c : css format string
● 注意哦 : 当你需要使用的时候, 要把数据和占位符对应哦, 不然解析会出现问题的
按照规则规规矩矩的填充才是最好的
● 你看好不好玩, 可以设置各种各样的 css 样式
这个并不重要, 了解一下就行
console.info
● 这个方法基本和 log 是一样的, 就是打印信息
● 并且占位符的用法也是一样的
console.debug
● 抱歉, 这个用法和 log 也是一样的
● 换句话说, 你可以吧 log , info , debug 当做成一个东西来使用
● 因为 log 可能字母更少, 所以用的更多
最简单的话解释, info 和 debug 你不知道也没事
console.dir
● 这个和 log 很像, 但是又不一样
● PS : 你说了什么, 又好像什么都没说
有些数据, 他的表现形式和对象本身是不一样的
比如 函数function fn() {}
表现出来就是一个函数的样子, 有个小括号写参数, 有个大括号写代码段
但是本身的对象属性不是这样的, 而是
{
name: 'fn',
...
}
因为函数本身也是个对象
再比如 DOM对象 div
表现出来的是
但是本身的对象属性不是这样的, 而是
{
tagName: 'div',
...
}
● 所以, 这个时候, log 和 dir 的区别就出现了
○ log : 是为了在控制台打印出一些信息, 主要用作提示作用
○ dir : 是为了在控制台打印该对象的所有属性和方法
● 最简单的说
○ 如果你想看到一个内容的表现形式, 那么你就使用 log
○ 如果你想看到一个内容最详细的所有信息, 那么你就使用 dir
这个也不重要, 不知道也没事
console.table
● 我们有时候经常会打印一些对象数据类型, 这时候就会出现问题了
● 因为浏览器解析引擎的执行顺序问题
○ 先打印对象, 后添加内容
○ 但是你打印出来看到的内容会有后添加的内容
○ 你看, 我们明明是后添加的 age 属性, 但是在前置打印的 obj 对象内依旧看到了
○ 这就会导致一个问题, 有的时候我们在打印的时候, 明明看到了内容
○ 但是一旦我去获取, 拿到的就是 undefined
○ 导致我的代码出现问题
● 那可怎么办呢 ?
○ 不如改用 table 试试看
○ 他其实就是用表格的形式显示你对象内的所有内容, 并且是实时显示
● 这样的话, 不光看的清楚, 而且不会出现错乱的情况
不过话说回来, 这个并不重要
console.count
● 这是个非常有意思的东西
● 看名字就知道, 这是一个类似计数器一样的打印
● 没错, 就是一个计数器打印
用法一 : 基础使用
● 语法: console.count()
● 作用: 会依次叠加你的输出次数, 默认标记叫做 default
console.info
● 这个方法基本和 log 是一样的, 就是打印信息
● 并且占位符的用法也是一样的
console.debug
● 抱歉, 这个用法和 log 也是一样的
● 换句话说, 你可以吧 log , info , debug 当做成一个东西来使用
● 因为 log 可能字母更少, 所以用的更多
最简单的话解释, info 和 debug 你不知道也没事
console.dir
● 这个和 log 很像, 但是又不一样
● PS : 你说了什么, 又好像什么都没说
有些数据, 他的表现形式和对象本身是不一样的
比如 函数function fn() {}
表现出来就是一个函数的样子, 有个小括号写参数, 有个大括号写代码段
但是本身的对象属性不是这样的, 而是
{
name: 'fn',
...
}
因为函数本身也是个对象
再比如 DOM对象 div
表现出来的是
但是本身的对象属性不是这样的, 而是
{
tagName: 'div',
...
}
● 所以, 这个时候, log 和 dir 的区别就出现了
○ log : 是为了在控制台打印出一些信息, 主要用作提示作用
○ dir : 是为了在控制台打印该对象的所有属性和方法
● 最简单的说
○ 如果你想看到一个内容的表现形式, 那么你就使用 log
○ 如果你想看到一个内容最详细的所有信息, 那么你就使用 dir
这个也不重要, 不知道也没事
console.table
● 我们有时候经常会打印一些对象数据类型, 这时候就会出现问题了
● 因为浏览器解析引擎的执行顺序问题
○ 先打印对象, 后添加内容
○ 但是你打印出来看到的内容会有后添加的内容
○ 你看, 我们明明是后添加的 age 属性, 但是在前置打印的 obj 对象内依旧看到了
○ 这就会导致一个问题, 有的时候我们在打印的时候, 明明看到了内容
○ 但是一旦我去获取, 拿到的就是 undefined
○ 导致我的代码出现问题
● 那可怎么办呢 ?
○ 不如改用 table 试试看
○ 他其实就是用表格的形式显示你对象内的所有内容, 并且是实时显示
● 这样的话, 不光看的清楚, 而且不会出现错乱的情况
不过话说回来, 这个并不重要
console.count
● 这是个非常有意思的东西
● 看名字就知道, 这是一个类似计数器一样的打印
● 没错, 就是一个计数器打印
用法一 : 基础使用
● 语法: console.count()
● 作用: 会依次叠加你的输出次数, 默认标记叫做 default
用法二 : 传递标记参数
● 语法: console.count('标记')
● 你也可以传递一个参数来做标记
○ 不同的标记会产生新的计数起点
○ 并且互相并不干扰
● 看到了没, 以后在想用计数器, 就不需要自己去定义变量了, 直接用这个就可以了
不过这个也没那么重要, 用不用无所谓
console.countReset
● 这个就不用解释了吧
● 不不不, 你还是解释一下吧
● 你确定吗 ? 这不仅是侮辱我, 还是在侮辱我的智商
● 你 TM 侮辱我半天了
● 其实很简单的, 就是把刚才 console.count 的计数归零而已
○ 毕竟 reset 翻译过来叫做重置
● 老子知道, 能不能快到上演示, 别逼我动手
● 直接看演示吧
● 顺便和你说一下, 不光默认的计数器可以清除, 带标记的也可以哦
● 不用你说, 老子知道, 这个又不重要了是吧
● 没有没有, 不过实话实说, 只不过用处没那么大而已
用法一 : 基础使用
● 语法: console.count()
● 作用: 会依次叠加你的输出次数, 默认标记叫做 default
用法二 : 传递标记参数
● 语法: console.count('标记')
● 你也可以传递一个参数来做标记
○ 不同的标记会产生新的计数起点
○ 并且互相并不干扰
● 看到了没, 以后在想用计数器, 就不需要自己去定义变量了, 直接用这个就可以了
不过这个也没那么重要, 用不用无所谓
console.countReset
● 这个就不用解释了吧
● 不不不, 你还是解释一下吧
● 你确定吗 ? 这不仅是侮辱我, 还是在侮辱我的智商
● 你 TM 侮辱我半天了
● 其实很简单的, 就是把刚才 console.count 的计数归零而已
○ 毕竟 reset 翻译过来叫做重置
● 老子知道, 能不能快到上演示, 别逼我动手
● 直接看演示吧
● 顺便和你说一下, 不光默认的计数器可以清除, 带标记的也可以哦
● 不用你说, 老子知道, 这个又不重要了是吧
● 没有没有, 不过实话实说, 只不过用处没那么大而已
console.warn
● 这个没啥可说的, 也是打印信息
● 只不过是以 警告 的形式出现打印的信息
console.error
● 和上面的一样, 也是打印信息
● 只不过是以 报错 的形式出现打印的信息
console.assert
● 这个和上面一个也差不多
● 同样是出现一个错误信息
● 只不过, 他需要两个参数, 根据第一个参数的对错来决定是否出现错误信息
● 你 TM 是有病吗 ?
● 是嫌我代码报的错不够多吗 ?
● 是来恶心我的吗 ?
如果你觉得没用, 那就当没看过就好了
不重要, 不重要
console.clear
● 最后一个了
● 这个我就不说了, 你自己去体会一下吧
本文转载于:
https://juejin.cn/post/7218032493656064061
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
