JavaScript对象内数组console.log异常行为原因咨询

我遇到个奇怪的JavaScript问题：先打印一个包含空数组的对象，给数组执行push操作后再打印一次，结果两次日志里的数组都包含push进去的值，按道理第一次应该显示空数组才对？

代码示例：

let myObj = [{key1: 'hello', key2: []}];

console.log(myObj);

myObj[0].key2.push(1);

console.log(myObj); 

两次展开控制台输出的结果均为：

[
{
"key1": "hello",
"key2": [
1
]
}
]

原因分析 #

这是浏览器控制台的惰性求值特性导致的：

• JavaScript里的对象、数组都属于引用类型，当你调用console.log打印它们时，控制台并不会立即把对象的所有内容序列化为固定的字符串展示，而是只保存一个指向该对象的引用。
• 只有当你手动点击展开控制台中的对象条目时，它才会去读取这个对象当前的实际状态。而此时你的代码已经执行完了push操作，对象里的数组已经被修改，所以不管是第一次还是第二次的日志，展开后看到的都是修改后的结果。

解决办法 #

• 要查看console.log执行瞬间的对象状态，可以将对象转为JSON字符串打印，这样会生成当时的快照：

  console.log(JSON.stringify(myObj));
  

• 或者在第一次console.log后添加debugger;语句，让代码暂停执行，此时再展开控制台的对象，就能看到还未被修改的空数组状态。

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