JavaScript数组同一位置打印数组与元素时值不一致问题

开发中遇到异常：打印整个polygon数组和单个元素时，数组同一位置的值显示不同。

相关代码 #

class tetrispiece {
  pezzo;
  elm;
  dimensioni;
  gradi;
  posizione;
  polygon = [];
//other code and the constructor (tell me if for u is relevant)
updatePolygon (x, y) {
    console.log(this.polygon, y)
    for (var i = 0; i < this.polygon.length; i++){
      console.log(this.polygon[i])
      this.polygon[i][0] += x
      console.log(this.polygon[i][1], this.polygon)
      this.polygon[i][1] += y
      console.log(this.polygon[i][1], this.polygon)
    }
  }
}
pezzoattivo = new tetrispiece(tetris.lastElementChild, pezzi[i], degrees[Math.floor(Math.random()*4)], {left : tetris.lastElementChild.getBoundingClientRect().left, top : 0});
pezzoattivo.updatePolygon(0, 1);

异常截图 #

排查思路与解决方法 #

排查思路 #

• 控制台特性问题：浏览器控制台打印引用类型（数组、对象）时，显示的是内存引用的实时值，而非打印瞬间的快照。你先打印整个polygon数组，后续修改了数组元素，展开数组查看时会加载最新值，导致和单个元素的打印结果产生差异。
• 代码执行顺序影响：updatePolygon方法中，先打印数组再执行修改操作，控制台未展开的数组可能保留旧值的预览，展开后却显示修改后的新值，造成视觉上的不一致。
• 引用类型修改特性：polygon的元素是子数组（引用类型），修改子数组的元素会直接改变原数组的内存值，控制台的实时引用机制会放大这个差异。

解决方法 #

1. 打印快照而非引用：打印数组时生成快照，确保显示的是执行时刻的真实值，比如用深拷贝：

   // 替换原console.log(this.polygon, y)
   console.log(JSON.parse(JSON.stringify(this.polygon)), y);
   

   若为一维数组，也可用浅拷贝：

   console.log([...this.polygon], y);
   

2. 调整打印顺序：先打印单个元素，执行修改后再打印整个数组，避免控制台延迟渲染的干扰。
3. 用断点调试：在浏览器开发者工具的Sources面板设置断点，直接查看每一步polygon数组的真实值，比console.log更准确。

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