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

2019-11-19 11:29:15

字體：大中小

來源：轉載

供稿：網友

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對象狀態。