console.log打印對象時屬性缺失的解決方法

1. 序

在編寫代碼時，咱們經常用console.log()的方式將信息在控制檯中打印出來以幫助咱們進行前端調試。通常狀況下，咱們打印普通值都沒有問題，但在打印對象類型時，咱們就須要注意點了，要否則可能會出現不符合指望的結果。

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

• 首先，定義了一個cat對象，其擁有name, age, color, birthday四個屬性。
• 接着，咱們又定義了一個函數test，它接收一個對象做爲參數。調用test函數時，咱們想知道傳入test函數的參數是怎樣的，會先調用console.log(obj)將傳入的對象打印出來，最後在函數內的某處刪除傳入對象的name屬性。

那麼，此時將cat對象做爲參數調用test函數，控制檯打印出來的信息將會是什麼呢？會是咱們預想的傳入時參數的樣子嗎？

const cat = {
    name: '喵喵',
    age: '2',
    color: 'white',
    birthday: '1月1號'
}

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

test(cat)
複製代碼

控制檯輸出信息：

咋一看，沒問題，輸出的結果的確是咱們傳入時的樣子。但實際中，傳入的對象可能具備不少屬性，那麼咱們想要看完整的信息就必須將輸出結果展開。以下：

展開的信息中，咱們能夠看到結果少了 name屬性，細心的小夥伴能夠發現還多了一個感嘆號的標誌（鼠標懸浮的文字：Value below was evaluated just now.）。咦，奇怪了，咱們不是在test函數內的第一行代碼就輸出參數的信息的嗎，怎麼會少了 name屬性？ 其實感嘆號的內容已經說明了，咱們展開的信息實際上是剛剛獲取到的結果，也就是代碼執行後的結果，test函數中有一段 delete obj.name的代碼，執行完後，obj對象固然就沒有 name屬性啦。在複雜的項目中，對象屬性會不少，代碼中的不知哪一處也可能會刪除了對象的某些屬性，這時咱們打印出來的結果可能就會跟傳入時的不同，這種狀況下咱們可能就會一頭霧水了。那麼如何獲取正確的結果呢？

3. 獲取正確的結果

因爲展開console.log()的結果並非咱們代碼所處位置那個時間點的對象的拷貝，故咱們想要在代碼執行到那個位置時的那個時間點對應的對象狀態，只要在那時輸出對象的副本便可。

3.1 方法1：對象展開

const cat = {
    name: '喵喵',
    age: '2',
    color: 'white',
    birthday: '1月1號'
}

function test(obj) {
    console.log({...obj})  //使用ES6的對象展開符操做，獲取到obj的副本。
    //這裏有段很長的代碼...
    delete obj.name
}

test(cat)
複製代碼

這時，咱們獲得的就是console.log()執行時間點時obj的狀態啦。

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

const cat = {
    name: '喵喵',
    age: '2',
    color: 'white',
    birthday: '1月1號'
}

function test(obj) {
    console.log(JSON.stringify(obj))  //調用JSON.stringify()方法將對象轉化爲字符串
    //這裏有段很長的代碼...
    delete obj.name
}

test(cat)
複製代碼

一樣，此時咱們也能夠獲得代碼運行時間點時的obj對象狀態。

總結： 以上兩種方法均可以獲取代碼運行時的對象狀態，可是比較 推薦第一種方法，由於當內容很是多時，第一種方法能夠展開數據，有利於咱們更快捷清晰地獲取目標信息。