p5.js Web编辑器数组打印异常：前置输出出现后续修改结果

在p5.js Web编辑器里用数组追踪数值时，出现了普通JS编辑器里不会有的异常：

预期第一次print输出[0, 1, 2, 3]，第二次输出["Hello", 1, 2, 3]，但控制台两次输出全是["Hello", 1, 2, 3]。单个整数测试没问题，只有数组会出现这种后续操作影响之前打印结果的情况。

代码片段：

function setup() {
  createCanvas(400, 400);
  testArray = [0, 1, 2, 3];
  print("Before: ", testArray);
  testArray[0] = "Hello";
  print("After: ", testArray);
}

function draw() {
  background(220);
}

实际输出：

Before:  (4) ["Hello", 1, 2, 3]
After:   (4) ["Hello", 1, 2, 3]

这不是p5.js的bug，而是浏览器控制台和引用类型的特性导致的：

• 数组属于引用类型，p5.js的print函数本质是调用浏览器控制台输出数组的引用，而非打印时刻的数组内容快照。
• 代码执行速度极快，当你打开控制台查看打印结果时，数组已经被后续的testArray[0] = "Hello"修改了，所以控制台显示的是数组的最终状态。
• 普通JS编辑器可能在打印时自动把数组转成了字符串（相当于快照），所以不会出现这个问题。

解决方法很简单，打印时生成数组的快照即可：

1. 转成字符串打印：

print("Before: ", JSON.stringify(testArray));

2. 创建数组副本打印（比如展开运算符）：

print("Before: ", [...testArray]);

这样就能看到打印时刻数组的真实状态了。

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