JavaScript中使用console调试程序的坑

上DEMO

a = {key1: [1, 2], 'key2': {'key4': '11'}, 'key3': [1, 2]}
console.info(1,a)
a.key2.key4 = '22'
console.info(2,a)

通过浏览器打开DEMO，看浏览器的终端，发现



第一次console竟然和第二次的console的值一样，都是已修改后的值，22。。。

研究了很久后，发现问题出在浏览器的终端。

由于a的key2是一个对象，所以在浏览器输出到终端的时候，没有把key2的value输出出来，而且给了一个指针N1。这个指针是指向key2的对象{'key4': '11'}的。

随后JS代码修改了key2的对象的值，根据JS的内存管理规则，key4的指针指向一块新的内存（存储‘22’字符串的内存），但是key2的对象的指针N1不会变化。

然后JS程序跑完了，我们去终端查看key2这个对象，尽管我们点击的Object是第一次console的对象，但是指针依然是N1，浏览器的终端通过N1指针，找到内存中key2的对象，由于这时候key2对象已被修改，所以显示的是‘22’。

根本原因是：浏览器输出了对象的指针，而不是对象本身。

这个坑会让我们误以为，第一次console的时候，key4的值是‘22’，其实不是的。

解决方法就是 在console的时候，不要输出过于复杂的数据结构。例如上面的DEMO改为这样，把a改为a.key2,就不会踩到这个坑。

a = {key1: [1, 2], 'key2': {'key4': '11'}, 'key3': [1, 2]}
console.info(1, a.key2)
a.key2.key4 = '22'
console.info(2, a.key2)

终端：

未经许可请不要转载。