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

dupha

已于 2023-06-01 10:13:52 修改

阅读量2.8k

点赞数 14

分类专栏： js 个人日志文章标签： javascript 前端开发语言

于 2023-05-31 16:06:16 首次发布

本文链接：https://blog.youkuaiyun.com/mingketao/article/details/130965573

版权

个人日志同时被 2 个专栏收录

38 篇文章

订阅专栏

15 篇文章

订阅专栏

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有时候可能会出现不准确的情况，这通常是由于以下原因之一：

对象引用：如果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也是最快的方法。

异步代码：如果console.log语句位于异步代码中，例如回调函数或定时器中，那么它可能不会按照预期的顺序执行。这可能导致console.log输出的顺序与代码实际执行的顺序不同，从而导致输出不准确的情况。
异常：如果代码中存在异常，并且该异常在console.log语句之前或之后抛出，那么console.log可能不会输出预期的结果，因为它可能不会执行到该语句。
浏览器控制台：有时浏览器控制台本身可能存在问题，例如缓存或其他错误，这可能会导致console.log输出不准确的情况。此外，浏览器在处理的时候对于读取 i/o 的操作一般会放到比较靠后的位置去处理。所以有些时候打印出来的值不符合预期。在这些情况下，可以尝试使用不同的浏览器或更新浏览器版本来解决问题。

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

在输出对象或数组时，可以使用JSON.stringify方法将其转换为字符串，以避免输出引用。(已在例子中讲解)
最好用浏览器断点调试或者开发代码debugger打断点调试，执行完全停止，可以检查每个点的当前值。发现数据错误和bug也是最快的方法。(已在上述提示)
尽可能避免在异步代码中使用console.log，或者确保在异步代码中正确处理console.log的执行顺序。
确保代码不会抛出异常，并在必要时使用try-catch语句处理异常。
确保浏览器控制台没有任何问题，并尝试使用其他浏览器或更新浏览器版本来解决问题。