用一分鐘理解console的這個原理,多留幾根黑髮~

浪浪的柺子發表於2018-12-07

引言

問題: console列印出的值與實際值不符的原因。

碰到這個問題是因為某一個值a更改為a1後,然而列印出來的值卻是a1,展開列印的值是a。因為不理解這個現象,導致除錯程式碼走了很多彎路,最後才定位到問題。

先來看現象

用一分鐘理解console的這個原理,多留幾根黑髮~

原因

程式碼

 let a = { name: 'langlang', look: 'handsome'};
 console.log(a);
 a.name = 'shuishui';
 a.look = 'beautiful';
複製程式碼

原因: 列印出的值是執行時的值,點選展開後是最後修改的值。

用一分鐘理解console的這個原理,多留幾根黑髮~

chrome控制檯列印物件是引用的,預設沒有展開,展開後就是最後修改的值,所以會出現展開後的值與之前不同。

之前那個bug是因為a更改為a1後,後面又隱式的將其更改為a。所以列印的時候是a1的值,但後面被隱式更改了,展開後就是隱式更改後的a的值。

如果想看到實時的值,可以直接列印字串:

console.log(JSON.stringify(a));
複製程式碼

結果:

用一分鐘理解console的這個原理,多留幾根黑髮~

相關文章