前端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对象才打印,这样即可。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,931评论 2 17
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,107评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,002评论 25 709
  • 日精近打卡第29天 姓名:耿洪力 单位:宁波慈星股份有限公司 组名:六项精进277期谦虚三组 【知~学习】 【六项...
    耿洪力阅读 181评论 0 0
  • 时间是什么? 这是一个很难回答的问题。 时间是一种无形的东西,看不见摸不着。你很难用一个特定的词语去定义它。你感受...
    得一明阅读 286评论 0 0