1. 序

在編寫代碼時(shí)，我們常常用 console.log() 的方式將信息在控制臺(tái)中打印出來(lái)以幫助我們進(jìn)行前端調(diào)試。一般情況下，我們打印普通值都沒(méi)有問(wèn)題，但在打印對(duì)象類型時(shí)，我們就需要注意點(diǎn)了，要不然可能會(huì)出現(xiàn)不符合期望的結(jié)果。

2. console.log()輸出對(duì)象屬性缺失

• 首先，定義了一個(gè) cat對(duì)象 ，其擁有 name, age, color, birthday 四個(gè)屬性。
• 接著，我們又定義了一個(gè)函數(shù) test ，它接收一個(gè)對(duì)象作為參數(shù)。調(diào)用test函數(shù)時(shí)，我們想知道傳入test函數(shù)的參數(shù)是怎樣的，會(huì)先調(diào)用 console.log(obj) 將傳入的對(duì)象打印出來(lái)，最后在函數(shù)內(nèi)的某處刪除傳入對(duì)象的 name 屬性。

那么，此時(shí)將 cat 對(duì)象作為參數(shù)調(diào)用 test 函數(shù)，控制臺(tái)打印出來(lái)的信息將會(huì)是什么呢？會(huì)是我們預(yù)想的傳入時(shí)參數(shù)的樣子嗎？

const cat = {
 name: '喵喵',
 age: '2',
 color: 'white',
 birthday: '1月1號(hào)'
}

function test(obj) {
 console.log(obj)
 //這里有段很長(zhǎng)的代碼...
 delete obj.name
}

test(cat)

控制臺(tái)輸出信息：

咋一看，沒(méi)問(wèn)題，輸出的結(jié)果的確是我們傳入時(shí)的樣子。但實(shí)際中，傳入的對(duì)象可能具有很多屬性，那么我們想要看完整的信息就必須將輸出結(jié)果展開(kāi)。如下：

展開(kāi)的信息中，我們可以看到結(jié)果少了 name 屬性，細(xì)心的小伙伴可以發(fā)現(xiàn)還多了一個(gè)感嘆號(hào)的標(biāo)志（鼠標(biāo)懸浮的文字：Value below was evaluated just now.）。咦，奇怪了，我們不是在test函數(shù)內(nèi)的第一行代碼就輸出參數(shù)的信息的嗎，怎么會(huì)少了 name 屬性？ 其實(shí)感嘆號(hào)的內(nèi)容已經(jīng)說(shuō)明了，我們展開(kāi)的信息其實(shí)是剛剛獲取到的結(jié)果，也就是代碼執(zhí)行后的結(jié)果，test函數(shù)中有一段 delete obj.name 的代碼，執(zhí)行完后，obj對(duì)象當(dāng)然就沒(méi)有 name

屬性啦。在復(fù)雜的項(xiàng)目中，對(duì)象屬性會(huì)很多，代碼中的不知哪一處也可能會(huì)刪除了對(duì)象的某些屬性，這時(shí)我們打印出來(lái)的結(jié)果可能就會(huì)跟傳入時(shí)的不一樣，這種情況下我們可能就會(huì)一頭霧水了。那么如何獲取正確的結(jié)果呢？

3. 獲取正確的結(jié)果

由于展開(kāi) console.log() 的結(jié)果并不是我們代碼所處位置那個(gè)時(shí)間點(diǎn)的對(duì)象的拷貝，故我們想要在代碼執(zhí)行到那個(gè)位置時(shí)的那個(gè)時(shí)間點(diǎn)對(duì)應(yīng)的對(duì)象狀態(tài)，只要在那時(shí)輸出 對(duì)象的副本 即可。

3.1 方法1：對(duì)象展開(kāi)

const cat = {
 name: '喵喵',
 age: '2',
 color: 'white',
 birthday: '1月1號(hào)'
}

function test(obj) {
 console.log({...obj}) //使用ES6的對(duì)象展開(kāi)符操作，獲取到obj的副本。
 //這里有段很長(zhǎng)的代碼...
 delete obj.name
}

test(cat)

這時(shí)，我們得到的就是 console.log() 執(zhí)行時(shí)間點(diǎn)時(shí)obj的狀態(tài)啦。

3.2 方法2： JSON.stringfy()看字符串

const cat = {
 name: '喵喵',
 age: '2',
 color: 'white',
 birthday: '1月1號(hào)'
}

function test(obj) {
 console.log(JSON.stringify(obj)) //調(diào)用JSON.stringify()方法將對(duì)象轉(zhuǎn)化為字符串
 //這里有段很長(zhǎng)的代碼...
 delete obj.name
}

test(cat)

同樣，此時(shí)我們也可以得到代碼運(yùn)行時(shí)間點(diǎn)時(shí)的obj對(duì)象狀態(tài)。

總結(jié) ： 以上兩種方法都可以獲取代碼運(yùn)行時(shí)的對(duì)象狀態(tài)，但是比較 推薦第一種方法，因?yàn)楫?dāng)內(nèi)容非常多時(shí)，第一種方法可以展開(kāi)數(shù)據(jù)，有利于我們更快捷清晰地獲取目標(biāo)信息。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論