還在console.log()嗎质帅？？留攒？
在前端開發(fā)中煤惩，相信有不少小伙伴調(diào)試代碼的時候用得最多的就是console.log()了，但是如果面對復(fù)雜數(shù)據(jù)時炼邀，是不是就有些雞肋呢魄揉？其實console為我們提供了很多方法，但小伙伴們用到的又有幾個呢
下面讓我?guī)Т蠹襾硪黄鹂纯碿onsole的花式調(diào)用拭宁。
console.log()
console.log(console)
語法
-
console.log(js常見數(shù)據(jù))
console.log(123) //123 -
占位符寫法
字符串： %s;
整數(shù)：%d;
浮點數(shù)：%f
對象：%o或%O洛退；
-
css： %c;
微信截圖_20220816111709.png
let name = '小胖學(xué)前端'
let age = 18
console.log('My name is %s, My age is %d',name,age)
//My name is 小胖學(xué)前端, My age is 18?
- 模板語法
let name = '小胖學(xué)前端'
let age = 18
console.log(`My name is ${name}, My age is ${age}`)
//My name is 小胖學(xué)前端, My age is 18?
console.clear()
該方法用于清楚控制臺信息
console.debug()
輸出調(diào)試級別消息瓣俯，在瀏覽器中配置debug后才可以顯示，比如在Firefox瀏覽器中兵怯，沒有勾選調(diào)試是無法顯示的,只有勾選以后才會顯示彩匕。
console.error()
向web控制臺輸出一條錯誤消息。
console.info()
向控制臺輸出一條通知消息
console.warn()
向 Web 控制臺輸出一條警告信息
上面基礎(chǔ)部分完了媒区，接下來看重頭戲
打印表格
console對象中有一個console.table()方法驼仪，作用是將數(shù)據(jù)以表格形式展現(xiàn)，該方法必須接收的一個必選參數(shù)data,這個對象可以是一個數(shù)組或者對象袜漩，以及一個可選參數(shù)cloums绪爸，表示一個包含列的名稱的數(shù)組。
let arr = [
{ name: '張三', age: 18, sex: '男' },
{ name: '李四', age: 19, sex: '男' },
{ name: '王五', age: 20, sex: '男' },
]
console.table(arr)
運行效果如下圖所示
用來統(tǒng)計
console對象中的count()方法可以用來完成計數(shù)的操作噪服，該方法接受一個可選的參數(shù)毡泻，即輸出的內(nèi)容，默認(rèn)為default粘优；該方法還可以根據(jù)不同的參數(shù)來分別計數(shù)仇味。
console.count('我是');
console.count('小胖');
console.count('我是');
console.count('小胖');
console.count('我是');
console.count('小胖');
運行效果如圖：
console對象中還存在一個countReset()方法,這個方法是用來重啟計數(shù)器的，我就不一一展示了雹顺，感興趣的同學(xué)可以自己試一下丹墨。
console.dir()
console.dir()我自己的理解是相當(dāng)于打印數(shù)據(jù)結(jié)構(gòu)樹
let student = {
name: '張三',
age:18,
sex: '男',
sutdentInfo: {
grade: '高三年級',
class: '335班'
}
}
console.log(student)
console.dir(student)
運行效果是這樣
分組顯示
console 的分組顯示涉及到group()、groupCollapsed()和groupEnd()三個方法來將不同的控制臺輸出組合在一起以顯示它們之間的一種關(guān)系形式嬉愧。通常是組合在一起使用的贩挣。
group接收一個參數(shù)，表示組名没酣，如果不設(shè)置王财，在不同瀏覽器表現(xiàn)不一致，瀏覽器默認(rèn)展開組裕便。
groupCollapsed()與group的不同在于groupCollapsed會自動折疊組绒净。
-
groupEnd()表示組的結(jié)束。
//默認(rèn)展開 console.group('person') console.log('name: 張三') console.log('age: 19') console.groupEnd() //默認(rèn)折疊 console.groupCollapsed('person') console.log('name: 張三') console.log('age: 19') console.groupEnd()
運行效果：
寫在最后
本片文章到這里就結(jié)束了偿衰，這是小編第一次寫挂疆，如有錯誤，請多多見諒下翎；如果覺得有用缤言，可以點贊支持一下~
