不靠谱的 console
前言
作为一名前端, console
估计会时时刻刻陪伴我们,其实各个端都会有输出变量的值的方法,以便调试,这里我指的 console
单纯指的是前端中的 console
。不得不说,它是一个调试的好方法,但它也是不可信的。
一个例子
先上代码:
-
var obj =
{
-
name:
{
-
age:
'1'
-
}
-
}
-
console.log(obj);
-
obj.name.age =
2;
-
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
- 如何实现VM框架中的数据绑定
- Java盲点解析
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 解析JSON
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 处理静态资源
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 视图Nunjucks
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 代码分层
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ HTTP请求
- ubuntu中安装tomcat
- python文件操作
- Owasp测试4.0手册
- 推荐一款Web渗透测试数据库
- 【提莫】一个域名收集及枚举工具
- chmod: changing permissions of `/usr/local/bin/...
- a windows service with the name MYSQL already e...
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法