●?看到標(biāo)題

●?噗 ~ 噗 ~, 一股嗤笑油然而生

●?在前端崗位叱咤風(fēng)云這么多年了, console 這個(gè)玩意用你講

●?但是, 今天我將帶你看到不一樣的 console, 可以帶來(lái)更多的幫助

了解 console

●?什么是 console ?

console 其實(shí)是 JavaScript 內(nèi)的一個(gè)原生對(duì)象

內(nèi)部存儲(chǔ)的方法大部分都是在瀏覽器控制臺(tái)輸出一些內(nèi)容

并且還提供了很多的輔助方法

●?最常見(jiàn)的 console

我們?cè)陂_(kāi)發(fā)中, 其實(shí)很多時(shí)候還是用到 console 的

尤其是在學(xué)習(xí)的過(guò)程中

但是我們大多只是使用一個(gè) console.log()

其他的大家可能了解的比較少

●? 全部的 console

○?你可曾想過(guò), console 真的只有一個(gè) log 嗎 ?

●?接下來(lái)咱們就詳細(xì)介紹一些 cosnole 里面的內(nèi)容

上面的不重要, 看看得了

console.log

●?這個(gè)不用多說(shuō)了, 只要你還是一個(gè)程序員

●?或者你是個(gè)預(yù)備程序員, 你都不可能不知道 log 這個(gè)方法

●?語(yǔ)法: console.log('內(nèi)容')

●?作用: 在瀏覽器控制臺(tái)輸出一段內(nèi)容

你真的了解全部的 console.log 嗎 ?

1.? 多個(gè)參數(shù)

●?首先, console.log() 這個(gè)方法可以傳遞多個(gè)參數(shù)

●?并且會(huì)把這些個(gè)參數(shù)在一起輸出

2.? 占位符

●?在輸出的內(nèi)容中, 是可以添加占位符的

●?來(lái)不及解釋了, 直接上車吧

●?例子 :

●?這是個(gè)什么玩意 ? 為什么會(huì)這樣呢 ?

●?既然你誠(chéng)心誠(chéng)意的發(fā)問(wèn)了, 那可愛(ài)又迷人的我就大發(fā)慈悲的告訴你

○?當(dāng)?shù)谝粋€(gè)參數(shù)內(nèi)有 占位符 的時(shí)候

○?那么后面的參數(shù)會(huì)按照順序依次填充占位符

○?多出來(lái)的才會(huì)直接輸出

不就是一個(gè)占位符嗎, 太雞肋了

●?誰(shuí)說(shuō)我們只能添加一個(gè)占位符

●?我們命名可以添加很多個(gè)占位符的, 后面按照順序依次插入內(nèi)容

我是說(shuō)不就一個(gè)嗎, 太雞肋了

我是說(shuō)不就一個(gè)嗎, 太雞肋了

●?誰(shuí)說(shuō)我們就一個(gè)占位符的, 我們有好多個(gè)占位符的

○?%s : 字符串

○?%d : 整數(shù)

○?%f : 浮點(diǎn)數(shù)

○?%o : 對(duì)象的連接

○?%c : css 格式字符串

●?注意哦 : 當(dāng)你需要使用的時(shí)候, 要把數(shù)據(jù)和占位符對(duì)應(yīng)哦, 不然解析會(huì)出現(xiàn)問(wèn)題的

●?按照規(guī)則規(guī)規(guī)矩矩的填充才是最好的

●?你看好不好玩, 可以設(shè)置各種各樣的 css 樣式

這個(gè)并不重要, 了解一下就行

console.info

●?這個(gè)方法基本和 log 是一樣的, 就是打印信息

●?并且占位符的用法也是一樣的

console.debug

●?抱歉, 這個(gè)用法和 log 也是一樣的

●?換句話說(shuō), 你可以吧 log , info , debug 當(dāng)做成一個(gè)東西來(lái)使用

●?因?yàn)?log 可能字母更少, 所以用的更多

最簡(jiǎn)單的話解釋, info 和 debug 你不知道也沒(méi)事

console.dir

●?這個(gè)和 log 很像, 但是又不一樣

●?PS : 你說(shuō)了什么, 又好像什么都沒(méi)說(shuō)

有些數(shù)據(jù), 他的表現(xiàn)形式和對(duì)象本身是不一樣的

比如 函數(shù)function fn() {}

表現(xiàn)出來(lái)就是一個(gè)函數(shù)的樣子, 有個(gè)小括號(hào)寫參數(shù), 有個(gè)大括號(hào)寫代碼段

但是本身的對(duì)象屬性不是這樣的, 而是

{

name: 'fn',

...

}

因?yàn)楹瘮?shù)本身也是個(gè)對(duì)象

再比如 DOM對(duì)象 div

表現(xiàn)出來(lái)的是 <div></div> 這樣的標(biāo)簽

但是本身的對(duì)象屬性不是這樣的, 而是

{

tagName: 'div',

...

}

●?所以, 這個(gè)時(shí)候, log 和 dir 的區(qū)別就出現(xiàn)了

○?log : 是為了在控制臺(tái)打印出一些信息, 主要用作提示作用

○?dir : 是為了在控制臺(tái)打印該對(duì)象的所有屬性和方法

●?最簡(jiǎn)單的說(shuō)

○?如果你想看到一個(gè)內(nèi)容的表現(xiàn)形式, 那么你就使用 log

○?如果你想看到一個(gè)內(nèi)容最詳細(xì)的所有信息, 那么你就使用 dir

這個(gè)也不重要, 不知道也沒(méi)事

console.table

●?我們有時(shí)候經(jīng)常會(huì)打印一些對(duì)象數(shù)據(jù)類型, 這時(shí)候就會(huì)出現(xiàn)問(wèn)題了

●?因?yàn)闉g覽器解析引擎的執(zhí)行順序問(wèn)題

○?先打印對(duì)象, 后添加內(nèi)容

○?但是你打印出來(lái)看到的內(nèi)容會(huì)有后添加的內(nèi)容

○?你看, 我們明明是后添加的 age 屬性, 但是在前置打印的 obj 對(duì)象內(nèi)依舊看到了

○?這就會(huì)導(dǎo)致一個(gè)問(wèn)題, 有的時(shí)候我們?cè)诖蛴〉臅r(shí)候, 明明看到了內(nèi)容

○?但是一旦我去獲取, 拿到的就是 undefined

○?導(dǎo)致我的代碼出現(xiàn)問(wèn)題

●?那可怎么辦呢 ?

○?不如改用 table 試試看

○?他其實(shí)就是用表格的形式顯示你對(duì)象內(nèi)的所有內(nèi)容, 并且是實(shí)時(shí)顯示

●?這樣的話, 不光看的清楚, 而且不會(huì)出現(xiàn)錯(cuò)亂的情況

不過(guò)話說(shuō)回來(lái), 這個(gè)并不重要

console.count

●?這是個(gè)非常有意思的東西

●?看名字就知道, 這是一個(gè)類似計(jì)數(shù)器一樣的打印

●?沒(méi)錯(cuò), 就是一個(gè)計(jì)數(shù)器打印

用法一 : 基礎(chǔ)使用

●?語(yǔ)法: console.count()

●?作用: 會(huì)依次疊加你的輸出次數(shù), 默認(rèn)標(biāo)記叫做 default

用法二 : 傳遞標(biāo)記參數(shù)

●?語(yǔ)法: console.count('標(biāo)記')

●?你也可以傳遞一個(gè)參數(shù)來(lái)做標(biāo)記

○?不同的標(biāo)記會(huì)產(chǎn)生新的計(jì)數(shù)起點(diǎn)

○?并且互相并不干擾

●?看到了沒(méi), 以后在想用計(jì)數(shù)器, 就不需要自己去定義變量了, 直接用這個(gè)就可以了

不過(guò)這個(gè)也沒(méi)那么重要, 用不用無(wú)所謂

console.countReset

●?這個(gè)就不用解釋了吧

●?不不不, 你還是解釋一下吧

●?你確定嗎 ? 這不僅是侮辱我, 還是在侮辱我的智商

●?你 TM 侮辱我半天了

●?其實(shí)很簡(jiǎn)單的, 就是把剛才 console.count 的計(jì)數(shù)歸零而已

○?畢竟 reset 翻譯過(guò)來(lái)叫做重置

●?老子知道, 能不能快到上演示, 別逼我動(dòng)手

●?直接看演示吧

●?順便和你說(shuō)一下, 不光默認(rèn)的計(jì)數(shù)器可以清除, 帶標(biāo)記的也可以哦

●?不用你說(shuō), 老子知道, 這個(gè)又不重要了是吧

●?沒(méi)有沒(méi)有, 不過(guò)實(shí)話實(shí)說(shuō), 只不過(guò)用處沒(méi)那么大而已

console.time

●?其實(shí)這并不是一個(gè)單獨(dú)的輸出內(nèi)容

●?他們是一套

○?console.time

○?console.timeLog

○?console.timeEnd

●?用于記錄時(shí)間, 就向小學(xué)老師在我們跑圈的時(shí)候使用的計(jì)時(shí)器一樣

●?用法也很簡(jiǎn)單

○?console.time : 計(jì)時(shí)開(kāi)始

○?console.timeLog : 計(jì)時(shí)日志

○?console.timeEnd : 計(jì)時(shí)結(jié)束

●?注意: 一定要有標(biāo)記哦

●?我現(xiàn)在不想聽(tīng)這個(gè), 我就想知道, 你這玩意到底有用沒(méi)用, 快點(diǎn)說(shuō)

額 ~ 確實(shí)用處沒(méi) ~那么~大

console.group

●?這個(gè)是一個(gè)非常有用的東西

●?而且也是一組使用的

○?console.group

○?console.groupCollapsed

○?console.groupEnd

●?當(dāng)我們需要打印很多信息的時(shí)候

○?所有的信息都是散亂的在控制臺(tái)輸出的

○?不知道哪些和哪些是一套

○?這個(gè)就是把打印信息分成一個(gè)一個(gè)的小分組

●?我們使用的時(shí)候也需要傳遞一個(gè)標(biāo)記為參數(shù)

○?其中

○?console.group 和 console.groupCollapsed 是一樣的, 都是表示小分組開(kāi)始

○?console.groupEnd 表示小分組結(jié)束

●?沒(méi)有廢話了, 直接上演示就可以了

●?console.group 和 console.groupCollapsed 的區(qū)別就一個(gè)

○?group 是默認(rèn)展開(kāi)的

○?groupCollapsed 是默認(rèn)收起的

實(shí)話實(shí)說(shuō), 這個(gè)還是有用的, 只是不那么大而已 !!

console.warn

●?這個(gè)沒(méi)啥可說(shuō)的, 也是打印信息

●?只不過(guò)是以 警告 的形式出現(xiàn)打印的信息

console.error

●?和上面的一樣, 也是打印信息

●?只不過(guò)是以 報(bào)錯(cuò) 的形式出現(xiàn)打印的信息

console.assert

●?這個(gè)和上面一個(gè)也差不多

●?同樣是出現(xiàn)一個(gè)錯(cuò)誤信息

●?只不過(guò), 他需要兩個(gè)參數(shù), 根據(jù)第一個(gè)參數(shù)的對(duì)錯(cuò)來(lái)決定是否出現(xiàn)錯(cuò)誤信息

●?你 TM 是有病嗎 ?

●?是嫌我代碼報(bào)的錯(cuò)不夠多嗎 ?

●?是來(lái)惡心我的嗎 ?

如果你覺(jué)得沒(méi)用, 那就當(dāng)沒(méi)看過(guò)就好了

不重要, 不重要

console.clear

●?最后一個(gè)了

●?這個(gè)我就不說(shuō)了, 你自己去體會(huì)一下吧

總結(jié)

●?說(shuō)在最后

●?其實(shí)在開(kāi)發(fā)的過(guò)程中

●?代碼跑起來(lái)才是王道, 這些都不重要

●?其實(shí)我們只要知道一個(gè) log, 就足夠我們使用了

●?記住, 代碼的世界里面, 只有一句話, 跑起來(lái)就行了