共计 3261 个字符，预计需要花费 9 分钟才能阅读完成。
● 看到题目
● 噗 ~ 噗 ~, 一股嗤笑油然而生
● 在前端岗位叱咤风云这么多年了, console 这个玩意用你讲
● 然而, 明天我将带你看到不一样的 console, 能够带来更多的帮忙
理解 console
● 什么是 console ?
console 其实是 JavaScript 内的一个原生对象
外部存储的办法大部分都是在浏览器控制台输入一些内容
并且还提供了很多的辅助办法
● 最常见的 console
咱们在开发中, 其实很多时候还是用到 console 的
尤其是在学习的过程中
然而咱们大多只是应用一个 console.log()
其余的大家可能理解的比拟少
● 全副的 console
○ 你可曾想过, console 真的只有一个 log 吗 ?
● 接下来咱们就具体介绍一些 cosnole 外面的内容
下面的不重要, 看看得了
console.log
● 这个不必多说了, 只有你还是一个程序员
● 或者你是个准备程序员, 你都不可能不晓得 log 这个办法
● 语法: console.log(‘ 内容 ’)
● 作用: 在浏览器控制台输入一段内容
console.log(‘hello world’)
你真的理解全副的 console.log 吗 ?
- 多个参数
● 首先, console.log() 这个办法能够传递多个参数
● 并且会把这些个参数在一起输入
- 占位符
● 在输入的内容中, 是能够增加占位符的
● 来不及解释了, 间接上车吧
● 例子 :
● 这是个什么玩意 ? 为什么会这样呢 ?
● 既然你披肝沥胆的提问了, 那可恶又迷人的我就大发慈悲的通知你
○ 当第一个参数内有 占位符 的时候
○ 那么前面的参数会依照程序顺次填充占位符
○ 多进去的才会间接输入
不就是一个占位符吗, 太鸡肋了
● 谁说咱们只能增加一个占位符
● 咱们命名能够增加很多个占位符的, 前面依照程序顺次插入内容
我是说不就一个吗, 太鸡肋了
● 谁说咱们就一个占位符的, 咱们有好多个占位符的
○ %s : 字符串
○ %d : 整数
○ %f : 浮点数
○ %o : 对象的连贯
○ %c : css 格局字符串
● 留神哦 : 当你须要应用的时候, 要把数据和占位符对应哦, 不然解析会呈现问题的
依照规定规规矩矩的填充才是最好的
你看好不好玩, 能够设置各种各样的 css 款式这个并不重要, 理解一下就行
console.info
● 这个办法根本和 log 是一样的, 就是打印信息
● 并且占位符的用法也是一样的
console.debug
● 道歉, 这个用法和 log 也是一样的
● 换句话说, 你能够吧 log , info , debug 当做成一个货色来应用
● 因为 log 可能字母更少, 所以用的更多
最简略的话解释, info 和 debug 你不晓得也没事
console.dir
● 这个和 log 很像, 然而又不一样
● PS : 你说了什么, 又如同什么都没说
有些数据, 他的表现形式和对象自身是不一样的
比方 函数 function fn() {}
体现进去就是一个函数的样子, 有个小括号写参数, 有个大括号写代码段
然而自身的对象属性不是这样的, 而是
{
name: ‘fn’,
…
}
因为函数自身也是个对象
再比方 DOM 对象 div
体现进去的是 <div></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.time
● 其实这并不是一个独自的输入内容
● 他们是一套
○ console.time
○ console.timeLog
○ console.timeEnd
● 用于记录时间, 就向小学老师在咱们跑圈的时候应用的计时器一样
● 用法也很简略
○ console.time : 计时开始
○ console.timeLog : 计时日志
○ console.timeEnd : 计时完结
● 留神: 肯定要有标记哦
● 我当初不想听这个, 我就想晓得, 你这玩意到底有用没用, 快点说
额 ~ 的确用途没 ~ 那么~ 大
console.group
● 这个是一个十分有用的货色
● 而且也是一组应用的
○ console.group
○ console.groupCollapsed
○ console.groupEnd
● 当咱们须要打印很多信息的时候
○ 所有的信息都是散乱的在控制台输入的
○ 不晓得哪些和哪些是一套
○ 这个就是把打印信息分成一个一个的小分组
● 咱们应用的时候也须要传递一个标记为参数
○ 其中
○ console.group 和 console.groupCollapsed 是一样的, 都是示意小分组开始
○ console.groupEnd 示意小分组完结
● 没有废话了, 间接上演示就能够了
console.group(‘ 一号小分组 ’)
console.log(1)
console.log(2)
console.log(3)
console.groupEnd()
console.groupCollapsed('一号小分组')
console.log(1)
console.log(2)
console.log(3)
console.groupEnd()● console.group 和 console.groupCollapsed 的区别就一个
○ group 是默认开展的
○ groupCollapsed 是默认收起的
实话实说, 这个还是有用的, 只是不那么大而已 !!
console.warn
● 这个没啥可说的, 也是打印信息
● 只不过是以 正告 的模式呈现打印的信息
console.error
● 和下面的一样, 也是打印信息
● 只不过是以 报错 的模式呈现打印的信息
console.assert
● 这个和下面一个也差不多
● 同样是呈现一个错误信息
● 只不过, 他须要两个参数, 依据第一个参数的对错来决定是否呈现错误信息
● 你 TM 是有病吗 ?
● 是嫌我代码报的错不够多吗 ?
● 是来恶心我的吗 ?
如果你感觉没用, 那就当没看过就好了
不重要, 不重要
console.clear
● 最初一个了
● 这个我就不说了, 你本人去领会一下吧
总结
● 说在最初
● 其实在开发的过程中
● 代码跑起来才是王道, 这些都不重要
● 其实咱们只有晓得一个 log, 就足够咱们应用了
● 记住, 代码的世界外面, 只有一句话, 跑起来就行了
