如何从Chrome console.log()理解JS对象结构？解析相关标识含义

嘿，这个问题问得太实用了！我来帮你把Chrome控制台里对象展示的那些细节掰扯清楚，尤其是和Mobx这类库打交道时，这些知识点能帮你少踩很多坑～

其实Chrome的控制台对对象的展示已经做得非常直观了，你直接用console.log(yourObject)打出对象后：

• 第一次看到的是对象的「快照视图」，但要注意，如果你之后修改了对象的属性，再展开的话会看到最新的属性值（因为控制台是懒加载展开内容的）。
• 如果想更清晰地查看对象的原型链、属性类型，推荐用console.dir(yourObject)，它会专门以树形结构展示对象的完整结构，比普通的log更适合分析复杂对象。

这个(...)是Chrome控制台的特殊标识，它告诉你这个属性是存取器属性（Getter/Setter），而不是普通的「数据属性」。

举个例子，Mobx的observable会把对象属性转换成getter/setter来实现响应式——当你访问这个属性时，其实是在调用背后的getter函数获取值，而不是直接读取内存里的原始值。控制台用(...)标记，就是在提醒你：这个属性不是直接存死的，点击它才会实时执行getter拿到当前的真实值。

控制台里的属性展示分两种情况，很好区分：

• 带下拉箭头的属性：说明这个属性的取值是一个嵌套结构——可能是另一个对象、数组，或者是函数。点击箭头就能展开查看它的内部细节，比如Mobx用action.bound包装后的函数，就会带下拉箭头，展开能看到它的目标函数、绑定上下文等信息。
• 不带下拉箭头的属性：代表这个属性是基本类型值（字符串、数字、布尔值、null、undefined），或者是已经被求值后的简单值，没有嵌套结构可以展开。比如name: "张三"、age: 25这类属性就不会有下拉箭头。

总结一下，控制台的这些小标识都是在帮你快速识别属性的类型和特性，看懂它们之后，不管是分析普通JS对象还是Mobx包装过的响应式对象，都能一目了然～

内容的提问来源于stack exchange，提问作者Ask P