console.log是异步还是同步?为什么console.log有时候不准

console.log是异步还是同步

    在前端开发中,控制台console.log通常是同步的。这意味着,当代码执行到console.log语句时,它会立即写入到控制台中,并且JavaScript代码执行会在console.log完成后继续进行。

    但是,在某些情况下,console.log也可以是异步的。例如,当使用Node.js中的console对象时,console.log实际上是一个异步方法,因为它使用了底层的文件系统API将日志信息写入I/O磁盘。在这种情况下,console.log将不会立即写入控制台,而是会被添加到一个输出缓冲区中,然后在Node.js事件循环的下一个迭代中异步写入I/O磁盘

    总的来说,大多数情况下,在前端代码或者浏览器在控制台输出console.log是同步的,但要根据具体情况确定它是同步还是异步。

        你可能有疑问为什么控制台输出有时候不准,慢慢来,看完就懂了

为什么console.log有时候不准

    在前端开发中,console.log有时候可能会出现不准确的情况,这通常是由于以下原因之一:

  1. 对象引用:如果console.log输出一个对象或数组,那么它实际上输出的是该对象数组引用引用地址)。所以就会存在当打印对象的时候,当引用到对象中的值的时候,对象中的值已经发生变化了的情况,会导致打印结果与预期不一致。
            举个例子
//控制台输出例子:引用地址控制台输出1
let d = {
    
    
    u:{
    
    
        p:1,
        h:2
    }
}
console.log("第一次",d);   //1期望值 d.u.p =1 ; d.u.h =2 ;

d.u.p = 10;
d.u.h = 20;

console.log("第二次",d);   //2期望值 d.u.p =10 ; d.u.h =20 ;

        输出结果如下图(“引用地址控制台输出第一张”):

引用地址控制台输出第一张
        可以看出控制台输出的引用地址对象信息在第一次,第二次的结果一样,和我们想要的期望值不一致

//控制台输出例子:引用地址控制台输出2
let d = {
    
    
    u:{
    
    
        p:1,
        h:2
    }
}
console.log("第一次",JSON.stringify(d));   //1期望值 d.u.p =1 ; d.u.h =2 ;

d.u.p = 10;
d.u.h = 20;

console.log("第二次",JSON.stringify(d));   //2期望值 d.u.p =10 ; d.u.h =20 ;

        输出结果如下图(“引用地址控制台输出第二张”):

引用地址控制台输出第二张
        可以看出控制台输出使用JSON.stringify在第一次,第二次的结果输出和我们想要的期望值一致

        为什么使用JSON.stringify就一致了,因为例子1在控制台显示的还是引用地址,例子2在控制台显示的是string字符串

        console.log没有立即拍摄对象快照,只存储了一个指向对象的引用(引用地址),如下(MDN对console.log的描述)

MDN对console.log的描述
        总结:

        当引用中的值改变了,在控制台也会随即改变,console.log显示就会有出入,解决方法是确保始终记录对象的序列化快照 字符串显示(JSON.stringify),例如使用console.log(JSON.stringify(obj))来解决输出不准问题。
        最佳解决方案是用浏览器断点调试或者开发代码debugger打断点调试,执行完全停止,可以检查每个点的当前值。发现数据错误bug也是最快的方法。

  1. 异步代码:如果console.log语句位于异步代码中,例如回调函数定时器中,那么它可能不会按照预期的顺序执行。这可能导致console.log输出的顺序与代码实际执行的顺序不同,从而导致输出不准确的情况。

  2. 异常:如果代码中存在异常,并且该异常在console.log语句之前或之后抛出,那么console.log可能不会输出预期的结果,因为它可能不会执行到该语句。

  3. 浏览器控制台:有时浏览器控制台本身可能存在问题,例如缓存或其他错误,这可能会导致console.log输出不准确的情况。此外,浏览器在处理的时候对于读取 i/o 的操作一般会放到比较靠后的位置去处理。 所以有些时候打印出来的值不符合预期。在这些情况下,可以尝试使用不同的浏览器或更新浏览器版本来解决问题。

    最后再次总结,为了避免console.log输出不准确的情况,可以采取以下措施:

  1. 在输出对象数组时,可以使用JSON.stringify方法将其转换为字符串,以避免输出引用。(已在例子中讲解)

  2. 最好用浏览器断点调试或者开发代码debugger打断点调试,执行完全停止,可以检查每个点的当前值。发现数据错误bug也是最快的方法。(已在上述提示)

  3. 尽可能避免在异步代码中使用console.log,或者确保在异步代码中正确处理console.log的执行顺序。

  4. 确保代码不会抛出异常,并在必要时使用try-catch语句处理异常。

  5. 确保浏览器控制台没有任何问题,并尝试使用其他浏览器或更新浏览器版本来解决问题。

如果你觉得学到了,可以关注点赞一起学习!


参考文章:
参考①:https://zhuanlan.zhihu.com/p/359906665
参考②:https://developer.mozilla.org/zh-CN/docs/Web/API/console/log
参考③:https://stackoverflow.com/questions/23392111/console-log-async-or-sync


关键词:

console.log 控制台打印不准确,前端控制台打印不一致,console.log 打印的值不准确,console.log是异步还是同步方法?

猜你喜欢

转载自blog.csdn.net/mingketao/article/details/130965573