前端console log之坑。。。

Codeagles發表於2018-07-10

版權宣告:本文為 Codeagles 原創文章,可以隨意轉載,但必須在明確位置註明出處!!!


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


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

前端console log之坑。。。
發現問題了吧,第一個a應該是空的,第二個才是列印結果,但是第一個就已經有值了,討論了很長時間又做了下面的測試。
前端console log之坑。。。
接下來看一下陣列形式,發現依舊如此,通過其他資料發現也有人遇到過這種情況。然後又讓豬哥幫我做了最後一個測試,我說不用json物件、陣列這類的,直接把a讓它成為一個整型的資料在測試一遍,有了如下結果:
前端console log之坑。。。
這就說明問題了,當是陣列和物件的時候,console是不準的,而是整型這類的基本資料型別是準確的,由此結果推斷,chrome會記錄物件的引用,從而log出來的物件引用應該是都是最新的,那麼意味著console.log只是對不可變型別是有效的,而對於引用型別如果連續列印可能不是當時的結果 ####開始填坑 只能挖坑,不能填坑,那才是真坑。。這個問題也有很多資料可以解決了,不過還是要測試一下。

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

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

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

相關文章