Chrome浏览器console.log()是异步的？

浅浅的花香味﹌ 2022-10-23 08:06 237阅读 0赞

# 问题 #

最近在调试项目时，用console.log()打印一些数据，但打印出的数据却和期望值不太符合，导致找原因找了半天。

我做了个小例子，如下：

在Chrome控制台执行以下代码，发现，打印出来的a的值都为3。  
为何会这样？难道console.log()是异步执行的？

let arr = [];
    let obj = {a:1};
    arr.push(obj);
    console.log(arr);
    obj.a=2;
    console.log(arr);
    let obj1 = obj;
    obj1.a=3;
    console.log(arr);
    //[{"a":3}]
    //[{"a":3}]
    //[{"a":3}]

![在这里插入图片描述][20210309154443801.png]

在node环境执行同样的代码，输出却是：

[ { a: 1 } ]
    [ { a: 2 } ]
    [ { a: 3 } ]

# 分析 #

首先可以确定的是console.log 是**同步**的  
出现这种情况的原因是：

**WebKit的console.log并没有立即拍摄对象快照，相反，它只存储了一个指向对象的引用，然后在代码返回事件队列时才去拍摄快照。 —《JavaScript异步编程》**

也就是说，WebKit内核的Chrome浏览器 的控制台对应引用类型的数据读取是默认值读取一层数据，当你点击展开时，会再去堆内存中读取属性值和下一层的数据。

这种出于性能优先的考虑有时候会给我们一种console.log 是异步的错觉。

# 解决 #

我们可以利用 JSON.stringify(object) 将对象序列化到一个字符串中，以强制执行一次“快照”：

let arr = []; 
    let obj = {a:1}; 
    arr.push(obj); 
    console.log(JSON.stringify(arr)); 
    obj.a=2; 
    console.log(JSON.stringify(arr)); 
    let obj1 = obj; 
    obj1.a=3; 
    console.log(JSON.stringify(arr));
    //[{"a":1}]
    //[{"a":2}]
    //[{"a":3}]

# 总结 #

*  Chrome浏览器console.log()是同步的；
 *  利用console.log()进行代码打印调试不可信。

[20210309154443801.png]: /images/20221023/270ff4edf8b5420cb4db8c2abea085c3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关【Chrome】Google Chrome浏览器下载安装教程

【Chrome】Google Chrome浏览器下载安装教程 1. 下载 Chrome 官网：[https://www.google.cn/intl/zh-CN/c

ゞ浴缸里的玫瑰/ 2024年03月16日 09:27/ 0 赞/ 229 阅读

相关 Chrome浏览器快捷键

1.ctrl+n 打开新窗口 2.ctrl+shift+n 隐身模式下打开新窗口 3.ctrl+t 打开新的标签页，并跳转 4.ctrl+shift+

缺乏、安全感/ 2023年10月18日 09:24/ 0 赞/ 259 阅读

相关快换浏览器吧！Google Chrome是最烂的浏览器

一起分 > 全文共2316字，预计学习时长6分钟 ![快换浏览器吧！Google Chrome是最烂的浏览器][Google Chrome] 图源：Google

红太狼/ 2023年01月02日 01:30/ 0 赞/ 301 阅读

相关 Chrome浏览器console.log()是异步的？

问题最近在调试项目时，用console.log()打印一些数据，但打印出的数据却和期望值不太符合，导致找原因找了半天。我做了个小例子，如下：在Chrome控制台

浅浅的花香味﹌/ 2022年10月23日 08:06/ 0 赞/ 238 阅读

相关 chrome浏览器文件上传老是卡死

今天在开发测试中遇到一个很纳闷的问题，有个上传文件的功能之前是好好的，可是偏偏这一次我只要把上传文件选中，然后浏览器就卡死不动，试了好几次一直都是这样，很纳闷，最后的最后终于尼

Bertha 。/ 2022年05月15日 04:30/ 0 赞/ 903 阅读

相关常用的chrome浏览器快捷键

Ctrl+T 打开新空白标签页 Ctrl+Shift+T 重新打开刚关闭的标签页。谷歌浏览器可以记住10 个标签页。 Ctrl+Shift+N 在隐身模式下打开新窗口

末蓝、/ 2022年05月13日 12:28/ 0 赞/ 368 阅读

相关 chrome浏览器自动下载文件(只限于chrome浏览器)

downloadFile: function(fileName, content){ var aLink = document.createEl

你的名字/ 2022年04月12日 14:12/ 0 赞/ 600 阅读

相关 Chrome浏览器扩展开发系列之三：Google Chrome浏览器扩展的架构

1) 不可视的background页面 Google Chrome扩展往往包含一个不可见的background页面，Google Chrome扩展的主要业务逻辑都位于此。有两

素颜马尾好姑娘i/ 2022年03月28日 14:12/ 0 赞/ 717 阅读

相关 Google Chrome浏览器调试

[作为Web开发人员，我为什么喜欢Google Chrome浏览器][Web_Google Chrome] 【原文地址：[http://www.cnblog

心已赠人/ 2022年02月22日 12:44/ 0 赞/ 625 阅读

相关 chrome浏览器的调试工具

1.直接打开控制台 Fn+F12 2.Elements标签页这个就是查看、编辑页面上的元素，包括HTML和CSS： 3.Resources标签页 Res

末蓝、/ 2021年09月13日 15:46/ 0 赞/ 640 阅读