好几天没有素材了，各位有什么奇怪的js现象需要解释清除的，欢迎留言哈。
我们先来看一段代码来介绍今天要将的现象吧
// ...
console.log(obj)
console.log(obj.a)
// ...
展开 obj 对象查看上面是包含 a 属性的且值为 1 ，为何输出 obj.a 的值却是 undefined 呢?
我们来看看全部的代码吧
let obj = {}
console.log(obj)
console.log(obj.a)
obj.a = 1
相信聪明的你已经知道了问题的原因，没错，这就是浏览器控制台输出引用数据类型的特性
- 由于浏览器输出一个引用数据类型时，默认会异常掉其属性和方法详情，由此来节省输出的成本。
- 当点击展开按钮(就是前面的三角形)时，获取其一级属性和方法的部分详情展示再控制台中
你没看错，就是在点击展开时才获取。所以打开展开按钮看到是数据不一定与输出时是一致的，而是与点击展开时的数据一致。
通过 console 调试时这很容易导致我们误判
我们来看看都有哪些情况容易出现这些错误吧
-
在使用 ajax 异步请求时，在赋值请求结果前打印结果。这会让你误认为此时变了已经成功赋值。
-
在动态渲染完子 DOM 元素之前通过父元素获取子元素数组。
还有很多很多情况，但是都是一个原因，那就是在对象或者数组被修改之前输出其值。
那么对于这些错误该如何避免呢？
其实只要避开引用类型调试就行了，例如数组输出其 length 值确定其是否有值，或者通过 JSON.stringify 将其转化为 JSON 字符串输出，也可以通过打断点的方式调试。
