专注WEB开发 分享经验,沉淀知识

分析console.log输出和预期的不一致问题

 作者:chenxing  时间:2017-12-15 09:42  阅读:408  评论:

虽然这种情况很少见,对于正常的普通变量的输出不影响。写此文章的目的在意,要提醒自己console.*存在的这种现象,避免在js调试过程中带来困扰。

js调试console.log是再常见不过的命令了,然而就是这样一个命令有时候往往会给我们造成困扰,在遇到输出对象时console.log和我们预期的不一样。

举个例子下面的代码:

    var obj = {a:1};
    console.log(obj);
    obj.a = 2; 
    console.log(obj);

我们所预想的是obj输出应该是{a:1},但是我们看看chrome控制台输出效果:

console.log输出

好像没问题,我们点那个箭头展开看数据:

json对象展开查看

对象obj中a键值发生了变化。我们来看看《你不知道的JavaScript》这本书是如何解释这一现象的。

并没有什么规范或一组需求指定console.* 方法族如何工作——它们并不是JavaScript正式的一部分,而是由宿主环境(请参考本书的“类型和语法”部分)添加到JavaScript中的。因此,不同的浏览器和JavaScript环境可以按照自己的意愿来实现,有时候这会引起混淆。尤其要提出的是,在某些条件下,某些浏览器的console.log(..)并不会把传入的内容立即输出。出现这种情况的主要原因是,在许多程序(不只是JavaScript)中,I/O是非常低速的阻塞部分。所以,(从页面/UI的角度来说)浏览器在后台异步处理控制台I/O能够提高性能,这时用户甚至可能根本意识不到其发生。

当然书中作者也给出了解决意见:

如果遇到这种少见的情况,最好的选择是在JavaScript调试器中使用断点,而不要依赖控制台输出。次优的方案是把对象序列化到一个字符串中,以强制执行一次“快照”,比如通过JSON.stringify(..)。

我自己在实践中的体会在需要输出json对象的时候,在预料到可能后面的代码会修改这个json对象,我会在后面直接跟一个return。

虽然这种情况很少见,对于正常的普通变量的输出不影响。写此文章的目的在意,要提醒自己console.*存在的这种现象,避免在js调试过程中带来困扰。

除特别注明外,本网站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 https://www.qiusuoweb.com/106.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

一年时间又回到这里

 2019-07-27 16:54  88

PHP字符串转数组的三种场景

 2018-05-05 01:32  181

PHP如何遍历字符串?

 2018-05-04 00:56  913

api接口常见的安全问题和解决方案

 2018-05-03 23:20  811

 最新评论

 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里
 花花草草: 10月14日 14:58
tp5不是已经提前开了吗
来源: _SESSION变量未定义?
 疯了: 10月10日 13:40
你好呀,我使用docker构建的 把整个项目给了777 并把runtime的所有者给了nginx php的运行者还是报错
来源: thinkphp5的mkdir() Permission denied问题探讨
 mesecretme: 09月30日 15:30
有个问题,有没有发现用redis保存session的话,session清空redis的key还没过期,会依然保留的,这是值变成空了
来源: php项目redis实现session共享案例
 旧久: 09月20日 07:24
感谢!
来源: 没备案域名如何在阿里云服务器上使用?
 pagenoname: 08月24日 18:51
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里