p5.js中数组length属性与实际长度不符的问题求助

问题现象 #

在p5.js程序中调用print(packet.visitedNodes, packet.visitedNodes.length)输出时，控制台自动标注的数组长度（括号内数值）和length属性返回值不一致，示例日志：

(2) [2, 0]    1
(2) [2, 1]    1
(3) [2, 1, 0] 2

简化测试代码：

let a = [1, 2];

function setup() {
  print(a, a.length);
  a.push(3);
  print(a, a.length);
}

对应的输出：

(3) [1, 2, 3] 2
(3) [1, 2, 3] 3

原因分析 #

这是p5.js的print()函数结合浏览器控制台特性导致的：控制台显示的数组是实时引用，而length是调用print()瞬间的快照值。当print()执行后数组被修改，控制台会更新数组的显示内容，但已经输出的length还是修改前的数值，最终出现显示长度和输出值不匹配的情况。

比如简化例子里，第一次调用print(a, a.length)时，a.length确实是2，但随后a.push(3)修改了数组，控制台的数组引用会自动刷新成最新的[1,2,3]，但之前输出的length已经固定为2，就造成了显示矛盾。

解决办法 #

有三种可行的处理方式：

• 输出数组快照副本：创建数组的浅拷贝，确保控制台显示的是调用print()时的固定状态，而非实时引用：

  // 使用展开运算符拷贝
  print([...packet.visitedNodes], packet.visitedNodes.length);
  // 或者用slice()方法拷贝
  print(packet.visitedNodes.slice(), packet.visitedNodes.length);
  

• 输出JSON字符串：将数组转为JSON字符串，控制台显示的是固定文本，不会被后续修改影响：

  print(JSON.stringify(packet.visitedNodes), packet.visitedNodes.length);
  

• 替换为原生console.log()：浏览器原生的console.log()默认会记录调用时的数组快照（部分浏览器可在控制台设置中开启「Preserve log」强化这个特性），也可以配合副本使用：

  console.log([...packet.visitedNodes], packet.visitedNodes.length);
  

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