前端console log之坑。。。

版权声明:本文为 Codeagles 原创文章,可以随意转载,但必须在明确位置注明出处!!!


####背景 之前一直没接触过前端,现在工作接触了好多前端代码,身为前端小白的我,调试的时候还在用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对象才打印,这样即可。

最后,感谢我肥而不腻的猪哥告诉我这个坑,还提供所有的测试素材。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值