P5.js draw() 函数以错误的顺序执行 For 循环

Question

所以我一直在绞尽脑汁思考为什么这几个小时都不起作用......我想要实现的实际上是 "propagation" 行通过二维数组。基本上，数组的第一行设置为随机值，然后将该行复制到第二行，第一行再次填充随机值 - 重复此操作直到该行到达数组的末尾。这是一个视觉示例：

[0, 0, 0]
[1, 1, 1]
[2, 2, 2]
    |
[3, 7, 2]
[0, 0, 0]
[1, 1, 1]
    |
[5, 6, 8]
[3, 7, 2]
[0, 0, 0]
    |
And so on...

我可以在 Python 中很容易地做到这一点，方法是在将新值注入第 0 行之前创建一个与原始数组相等的临时数组。然后，数组的每一行都设置为临时数组的当前索引 1，有效地将每一行向上移动一位。

但是，在 JavaScript 中，特别是 p5js，我似乎根本无法让它工作。在 draw() 函数中执行 for 循环时，就好像一切都是异步完成的，或者没有按照我期望的顺序执行。这是我的代码：

var arr = [], temp = [];

function setup() {
  noLoop();
  arr[0] = [0,0,0];
  arr[1] = [1,1,1];
  arr[2] = [2,2,2];

}

function draw(){
    for(let k = 0; k < 3; k++){
      temp[k] = arr[k];
    }
    console.table(arr);

    for(let i = 0; i < 3; i++){
       arr[0][i] = random(10)
    }
    console.table(arr);

    arr[1] = temp[0];
    arr[2] = temp[1];
    console.table(arr);
}

我知道我可以使用更多的 for 循环，但是我现在使用了一些单独的索引以使其更基本。

注意 console.table(arr) 语句的位置 - 我的印象是这段代码按照我编写的顺序执行，但是 每个控制台语句都会产生相同的 table，就好像在向控制台写入任何内容之前所有代码都是运行。 此外，即使我在以任何方式修改 arr 之前将 temp 设置为 arr，在设置随机值之后，temp 将被分配 arr 的值。

当连续循环时，这会产生和填充相同随机数的数组，因为它依赖于临时存储 arr 的未修改版本...

也许我遗漏了一些明显的东西，或者我只是不知道 JavaScript/p5.js 是如何工作的，但我们将不胜感激任何帮助！

谢谢 :).

Answer 1

行 temp[k] = arr[k]; 通过引用复制数组对象，这意味着修改其中一个子数组会修改另一个，因此 arr[0][i] = random(10) 修改两个数组中的内容。这可以通过首先执行 arr[0] = []; 来解决。（如果我没记错的话，这和Python中的是一样的）

在常规 JS 中，console.log 与其他日志功能一起，不会立即获取对象的内容，而是获取需要显示的部分，有效地只显示最后的状态的对象。 chrome devtools 应该显示一个关于那个的小注释警告。

完成整个操作的更好、更有效的方法是

let temp = [];
for (let i = 0; i < 3; i++) temp.push(random(10));
arr.unshift(temp);
arr.pop();

P5.js draw() 函数以错误的顺序执行 For 循环

P5.js draw() Function Executing For-Loops in Wrong Order

html

javascript

p5.js