前端console.log之坑。。。

<big>版權宣告：本文為 Codeagles 原創文章，可以隨意轉載，但必須在明確位置註明出處！！！</big>

---

背景

之前一直沒接觸過前端，現在工作接觸了好多前端程式碼，身為前端小白的我，除錯的時候還在用alert(obj)，但是當括號裡面試obj型別的時候，彈出框只能判斷這個方法在這個位置是否執行，並不能得出obj物件的內容，尷尬中。。。此時我去找到了我肥而不膩的豬哥@沒關係是豬哥啊，他教會我用console.log()列印物件，然後在chrome的開發者模式中除錯能看到結果，我感覺如獲一寶，接下來的幾天瘋狂的使用這個東西，結果問題來了。。。。豬哥告訴我這有個坑，然後有了接下來的討論。。。(測試只在chrome中，其他瀏覽器沒有測試，如果有測試的夥伴，可以留言使用的瀏覽器和處理結果，讓大家都共享一下)

---

問題

接下來看一段網上的程式碼，實際測試發現是一樣的。

發現問題了吧，第一個a應該是空的，第二個才是列印結果，但是第一個就已經有值了，討論了很長時間又做了下面的測試。

接下來看一下陣列形式，發現依舊如此，通過其他資料發現也有人遇到過這種情況。然後又讓豬哥幫我做了最後一個測試，我說不用json物件、陣列這類的，直接把a讓它成為一個整型的資料在測試一遍，有了如下結果：

這就說明問題了，當是陣列和物件的時候，console是不準的，而是整型這類的基本資料型別是準確的，由此結果推斷，chrome會記錄物件的引用，從而log出來的物件引用應該是都是最新的，那麼意味著console.log只是對不可變型別是有效的，而對於引用型別如果連續列印可能不是當時的結果

開始填坑

只能挖坑，不能填坑，那才是真坑。。這個問題也有很多資料可以解決了，不過還是要測試一下。

這樣結果就是準確的，console.log(JSON.parse(JSON.stringify(obj)));加上這句話就可以完美的躲避了。

• JSON.stringify 假如obj是個json物件，則用該方法從obj中解析出一個字串
• JSON.parse 很明顯就是將字串轉換成json物件才列印，這樣即可。

---

最後，感謝我肥而不膩的豬哥告訴我這個坑，還提供所有的測試素材。