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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,175评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,674评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,151评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,597评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,505评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,969评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,455评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,118评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,227评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,213评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,214评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,928评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,512评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,616评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,848评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,228评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,772评论 2 339

推荐阅读更多精彩内容

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