console.log()打印对象数据类型的坑

　　运行下面的JavaScript代码：

 

var obj = {
    name: '张三',
    age: 18,
};

var arr = [obj];

console.log(arr);

obj.gender = '男性';
obj.height = 167.1;
obj.weight = 66.2;
obj.occupation = '司机';

 

　　打开控制台查看console.log(arr)的输出内容：


 

　　点击“▶”符号展开查看obj对象的属性，可以看到如下数据：


 

　　这时我们会发现一个问题，在console.log(arr)之前obj对象明明只有name属性和age属性，但是控制台却连后续才追加的gender、height等属性也输出了，这就是console.log()打印对象数据类型的坑。

 

　　造成这个问题的根本原因是在展开对象数据类型时浏览器会去内存重新读取对象的属性值，实际上浏览器也提醒了开发者这个问题，把鼠标指针放到蓝色i标志上会出现一段提示文字：

 

　　This value was evaluated upon first expanding. It may have changed since then.

　　翻译：此值是在第一次展开时评估得出的，之后可能已发生更改。
 

　　所以使用console.log()打印对象数据类型时如果预期值和实际输出值不一致开发者应该意识到不是程序代码出了问题，解决这个问题的办法很简单，只要将对象进行两次转换再打印即可，代码如下：
 

console.log(JSON.parse(JSON.stringify(arr)));