Console高級用法總結(jié)
00 延伸科普
Console 對象所提供的 console.*(...) 這樣的方法，其實(shí)是宿主環(huán)境（比如：瀏覽器、NodeJS 等）提供的用于控制臺調(diào)試的，它并不是 JavaScript 正式語法的一部分。
它本質(zhì)上是一個 I/O 操作，但是又不是簡單意義上的宏任務(wù)，宿主環(huán)境的區(qū)別會導(dǎo)致 console.*(...) 方法有一定細(xì)微的差別，在某些條件下，某些瀏覽器并不會把傳入的內(nèi)容立即輸出。至于到底什么時候控制臺 I/O 會延遲，這是一個不確定的問題。
所以調(diào)試時，不要盲目相信 console 的輸出，特別是打印引用類型時。比如以下代碼：
const obj = { a: 1 }
console.log(obj)
obj.b = 2輸出如下：
看著好像沒問題，但是這里的 {a: 1}，其實(shí)是 obj 對象的快照。把它展開，就會發(fā)現(xiàn)問題所在，在打印 obj 的那一刻，理應(yīng)不存在屬性 b：
如果非要用 console.*(...) 方法做一些細(xì)致的調(diào)試，可以在打印引用對象或數(shù)組時進(jìn)行序列化+反序列化，防止疑問產(chǎn)生：
const obj = { a: 1 }
console.log(JSON.parse(JSON.stringify(obj)))
obj.b = 201 不同級別的基礎(chǔ)信息打印
// 打印內(nèi)容的通用方法
console.log('普通信息')
// 打印一條資訊類說明信息
console.info('資訊類說明信息')
// 打印一條警告信息
console.warn('警告信息')
// 打印一條錯誤信息
console.error('錯誤信息')
// 打印一條 debug 級別的消息?？刂婆_配置為顯示調(diào)試輸出時才顯示該消息
console.debug('調(diào)試信息')不同級別的信息在控制臺會被標(biāo)記為不同的顏色，其中 log 和 info 表現(xiàn)相同。
02 列表型的數(shù)據(jù)打印成表格
console.table() 可以將列表型的數(shù)據(jù)打印成表格，這里的列表型數(shù)據(jù)指的是數(shù)組或者對象。
表格的第一列是 index。如果數(shù)據(jù) data 是一個數(shù)組，那么這一列的單元格的值就是數(shù)組的索引。如果數(shù)據(jù)是一個對象，那么它們的值就是各對象的屬性名稱。
語法：
console.table(data [, columns])
data必須，且必須是一個數(shù)組或者是一個對象columns可選，需要顯示的列的名稱的數(shù)組。如果沒有columns參數(shù)，則會打印所有列。
點(diǎn)擊每列的頂部標(biāo)簽，可以讓表格排序。
2.1 打印單一數(shù)據(jù)類型
- 打印一個由字符串組成的數(shù)組
console.table(['哈哈', '嘿嘿', '嘻嘻'])
- 打印一個屬性值是字符串的對象
function Person(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
const me = new Person('小錯', '王')
console.table(me)
2.2 打印復(fù)合的參數(shù)類型
如果需要打印的元素在一個數(shù)組中，或者需要打印的屬性在一個對象，并且他們本身就是一個數(shù)組或者對象，則將會把這個元素顯示在同一行，每個元素占一列。
- 打印一個二元數(shù)組
const people = [ ['張三', '李四'], ['張龍', '趙虎'], ['王二', '麻子'] ] console.table(people)
- 打印一個包含對象的數(shù)組
function Person(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
const zhangsan = new Person('三', '張')
const lisi = new Person('四', '李')
const wanger = new Person('二', '王')
console.table([zhangsan, lisi, wanger])如果數(shù)組包含對象，則列標(biāo)簽是對象的屬性名。
- 打印一個屬性名是對象的對象
function Person(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
const family = {}
family.mother = new Person('羊', '劉')
family.father = new Person('龍', '張')
family.daughter = new Person('三', '張')
console.table(family)如果對象的屬性為對象，打印出來的 index 是外層對象的屬性名。
2.3 控制顯示的列
function Person(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
const liuyang = new Person('羊', '劉')
const zhanglong = new Person('龍', '張')
const zhangsan = new Person('三', '張')
const family = {}
family.mother = liuyang
family.father = zhanglong
family.daughter = zhangsan
console.table([liuyang, zhanglong, zhangsan], ['firstName'])
console.table(family, ['lastName'])
03 打印某個操作的時長
可以通過 console.time 啟動一個計時器來跟蹤某一個操作的占用時長。
語法：
console.time(timerName)
timerName每一個計時器必須填寫的唯一的名字
通過 console.timeEnd 結(jié)束特定的計時器，并打印其從開始到結(jié)束所用的毫秒時間。
語法：
console.timeLog(timerName)
示例：
console.time('answer time')
alert('點(diǎn)擊繼續(xù)')
console.timeLog('answer time')
alert('做一堆其他的事情......')
console.timeEnd('answer time')
04 給打印編組
可以使用嵌套組來把一組關(guān)聯(lián)的打印合并。用 console.group() 可以創(chuàng)建新的嵌套塊，用 console.groupCollapsed() 創(chuàng)建默認(rèn)折疊的塊。嵌套組需要通過 console.groupEnd() 閉合。
示例：
// 為了方便觀察，我用縮進(jìn)表示了層級
console.log('A1')
console.group()
console.log('B1')
console.info('B2')
console.group()
console.warn('C1')
console.warn('C2')
console.groupCollapsed()
console.error('D1')
console.error('D2')
console.groupEnd()
console.warn('C3')
console.groupEnd()
console.debug('B3')
console.info('B4')
console.groupEnd()
console.debug('A2')
05 堆棧跟蹤
通過 console.trace 可以追蹤函數(shù)的調(diào)用路徑。這么說起來很抽象，簡單來講就是，把 console.trace() 放在一個方法中，一旦 console.trace() 被調(diào)用了，那么就會輸出從一開始到 console.trace() 的所有方法的執(zhí)行路徑。
通過例子或許能很好的理解。
5.1 示例一：
function outer() {
function inner() {
console.trace()
}
inner()
}
outer()
由于是堆棧信息，所以得倒著看，執(zhí)行到 console.trace() 的時候，是調(diào)用了 outer 和 inner 這兩個方法。
5.2 示例二：
function add(a, b) {
console.trace()
return a + b
}
function add1(a, b) {
return add(a, b)
}
function add2(a, b) {
return add1(a, b)
}
function add3(a, b) {
return add2(a, b)
}
const result = add3(1, 1)
同理，執(zhí)行到 console.trace() 的時候，是調(diào)用了 add1、 add2、add3 和 add 這四個方法。
console.trace() 有時候?qū)τ诮邮謩e人寫的復(fù)雜模塊的時候，還是挺有用的。
06 打印花里胡哨
6.1 樣式占位符
很多編程語言的打印方法，都有占位符這樣的東西。比如 C 語言的 printf("%d ", 10)，其中的 %d 表示十進(jìn)制整型數(shù)據(jù)，這里輸出 10。
JavaScript 也有占位符，不過用的比較少。但是通過占位符可以實(shí)現(xiàn)一些花里胡哨的信息。
JavaScript 支持的占位符：
%s：字符串%d：整數(shù)%i：整數(shù)%f：浮點(diǎn)數(shù)%o：DOM 對象%O：JavaScript 對象%c：CSS 樣式
其中的 %c 是 JavaScript 特有的，可以標(biāo)記從該 %c 開始后續(xù)行的樣式。
例如：
console.log(`歡迎加入我們的%c大家庭`, `font-size: 30px; font-weight: bold; color: #ef475d`)
也可以標(biāo)記多個樣式，只需要 %c和樣式對應(yīng)上。例如：
console.log(
`歡迎加入我們的%c大家庭
%c啦啦啦
`,
`font-size: 30px; font-weight: bold; color: #ef475d`,
`font-size: 24px; font-weight: bold; color: cornflowerblue`
)
學(xué)會了 %c 的用法，就能玩出很多花樣。
比如這樣：
console.log(`%c
%c FBI WARNING %c
%c Federal Law provides severe civil and criminal penalties for
the unauthorized reproduction,distribution, or exhibition of
copyrighted motion pictures (Title 17, United States Code,
Sections 501 and 508). The Federal Bureau of Investigation
investigates allegations of criminal copyright infringement
(Title 17, United States Code, Section 506).
`,
'background: #000; font-size: 18px; font-family: monospace',
'background: #f33; font-size: 18px; font-family: monospace; color: #eee; text-shadow:0 0 1px #fff',
'background: #000; font-size: 18px; font-family: monospace',
'background: #000; font-size: 18px; font-family: monospace; color: #ddd; text-shadow:0 0 2px #fff'
)
6.2 ASCII Art
ASCII Art，是指用一串或一片字符，去構(gòu)成圖案。它是早期互聯(lián)網(wǎng)上，帶寬小、流量少、部分終端不能顯示圖片的背景下，產(chǎn)出一種表達(dá)形式。文字表情（顏文字）其實(shí)就是 ASCII Art 的一種。
聽起來比較抽象，直接上才藝：
- 文字表情（顏文字）
╮(￣▽ ￣)╭
__ ___ _____ \ \ / (_) / ____| \ V / _ __ _ ___ | | _ _ ___ > < | |/ _` |/ _ | | | | | |/ _ \ / . | | (_| | (_) | |___| |_| | (_) | /_/ __|__,_|___/ _______,_|___/
/** * * _ooOoo_ * o8888888o * 88" . "88 * (| -_- |) * O\ = /O * ____/`---'____ * .' \| |// `. * / \||| : |||// \ * / _||||| -:- |||||- \ * | | \\ - /// | | * | _| ''---/'' | | * \ .-__ `-` ___/-. / * ___`. .' /--.--\ `. . __ * ."" '< `.____<|>_/___.' >'"". * | | : `- `.;`\ _ /`;.`/ - ` : | | * \ \ `-. _ __\ /__ _/ .-` / / * ======`-.____`-.________/___.-`____.-'====== * `=---=' * ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ * 佛祖保佑 永無BUG * */
ASCII Art 這個概念或許你很陌生，但是以上的例子，你應(yīng)該很熟悉。
以上就是Console高級用法總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于Console用法的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了解決Antd Table組件表頭不對齊的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了使用vue-i18n?入口文件配置控制臺報警問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
electron-vue開發(fā)環(huán)境內(nèi)存泄漏問題匯總
這篇文章主要介紹了electron-vue開發(fā)環(huán)境內(nèi)存泄漏問題匯總，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了如何使用vue-router插件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
VUE v-for循環(huán)中每個item節(jié)點(diǎn)動態(tài)綁定不同函數(shù)的實(shí)例
今天小編就為大家分享一篇VUE v-for循環(huán)中每個item節(jié)點(diǎn)動態(tài)綁定不同函數(shù)的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
VUE2.0+Element-UI+Echarts封裝的組件實(shí)例
下面小編就為大家分享一篇VUE2.0+Element-UI+Echarts封裝的組件實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue+springboot實(shí)現(xiàn)登錄驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue+springboot實(shí)現(xiàn)登錄驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
本文主要介紹了vue 防止多次點(diǎn)擊，可以有效防止惡意點(diǎn)擊，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
用vue實(shí)現(xiàn)注冊頁效果?vue實(shí)現(xiàn)短信驗(yàn)證碼登錄
這篇文章主要為大家詳細(xì)介紹了用vue實(shí)現(xiàn)注冊頁，短信驗(yàn)證碼登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
element多級菜單動態(tài)顯示的實(shí)現(xiàn)
通常在后臺管理系統(tǒng)中,需要根據(jù)每個用戶不同的權(quán)限來動態(tài)展示菜單,本文主要介紹了element多級菜單動態(tài)顯示的實(shí)現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-11-11