VS Code调试JS数组：为何可变方法未执行就被调试器应用？

问题描述 #

尽管数组在可变方法执行前就已通过console.log输出，但调试器中查看该数组时，却显示可变方法已被应用；不过单独调用数组元素及属性时，返回结果仍正确。若在可变方法前添加断点，调试显示则正常，继续执行后结果无变化。已查阅MDN上关于复制方法与可变方法的文档，但仍不明白该现象的原因。这是VS Code的Bug吗？

代码示例 #

const array = ["cat","dog","mouse"]
console.log('array', array);
console.log('array[0] :>> ', array[0]);
console.log('array.length :>> ', array.length);

array.splice(0, 1)
// array.push('bat')

问题解释 #

这不是VS Code的Bug，核心原因是JavaScript引用类型的特性以及控制台的输出机制：

• 数组属于引用类型，当你调用console.log(array)时，控制台并没有立刻生成数组的完整快照，而是只保存了指向该数组内存地址的引用。
• 当后续代码执行array.splice(0, 1)修改数组时，数组的实际内容已经改变。此时你在调试器中展开数组查看细节，控制台才会去读取该引用指向的当前数组状态，所以看到的是修改后的结果。
• 而单独打印array[0]和array.length时，这些操作是即时读取对应的值或属性，打印的是代码执行到该行时数组的状态，因此结果是修改前的正确值。
• 如果在可变方法前添加断点，此时数组还未被修改，调试器查看的是断点时刻的数组状态，所以显示正常；继续执行后数组被修改，但之前单独打印的元素和长度已经是读取完成的结果，不会再变化。

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