不靠谱的 console

前言

作为一名前端， console 估计会时时刻刻陪伴我们，其实各个端都会有输出变量的值的方法，以便调试，这里我指的 console 单纯指的是前端中的 console。不得不说，它是一个调试的好方法，但它也是不可信的。

一个例子

先上代码：

1. var obj = {
2. name: {
3. age: '1'
4. }
5. }
6. console.log(obj);
7. obj.name.age = 2;
8. console.log(obj);

大家猜测下结果，我们预期的肯定是不一样的，毕竟中间有修改

但是事实上却是出乎我们意料的

是的，两个都是一样的， console 真的是一个吃里扒外的东西，那到底是为什么呢？

原因

实际上我们输出非对象类型的值的时候，是完全没问题的，比如

所以，我们可以知道，在使用 console 打印一个 JavaScript 对象的时候，由于对象是引用类型，那么它会一直引用内存中的值，当你输出的时候，对象中的值已经发生了改变，所以才会出现这种打印结果不正确的情况

另外，从上面可以看出，在浏览器环境中,console.log() 实际上也是一种异步的方法

对此，《你不知道的javascript中卷》第二部分异步和性能1.1节异步控制台部分有提及：

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

node 环境中的 console

上面我们分析是在浏览器环境中，那么在 node 环境中会出现上面的情况么？

从上面可以看出， node 环境中是不存在情况的

解决方法

方法一

使用 JSON.stringify，原理是将它转换成字符串输出，这样就不会在引用原有的对象的内存，如下所示

方法二

打断点，这种方法是最合适的，也是我们前端最正确的打开方式

题外话

看到网上有这样一个问题，觉得有点意思

参考

https://blog.csdn.net/extendworld/article/details/82709777

https://cnodejs.org/topic/59142d12ba8670562a40ef4d