为什么此函数（将对象推送到数组）会崩溃 p5.js？

Question

我正在构建一个进化模拟应用程序，如果某个生物体的健康状况超过 75%，它会进行繁殖，然后健康状况会减半。为此，我创建了对象所属的 class 的新实例，然后将所述对象推送到存储其他生物的数组。由于我不知道的原因，此崩溃 p5.js。

我试图减少生物体的数量 (3) 并将其写为 class 的函数。

var organisms = []; // array where organisms instances go

function reproduce(){
  for (let i = 0; i < organisms.length; i++){
     if(organisms[i].life > 0.75){
        // create a genetically similar size
        let size = organisms[i].size + (random() > 0.5 ? 1 : -1 * random() * 2);   
        // declare instance
        let org = new Organism(width, height, size)
        organisms.push(org);
        // prevent infinite reproduction
        organisms[i].life -= 0.5;
        }
    }
}

我希望这只会创建新的 class 个实例，但它会崩溃 p5.js。

Answer 1

您已经创建了一个可能永远不会结束的循环条件。

for (let i = 0; i < organisms.length; i++){

在第一次迭代中，假设有机体有 5 个元素。如果满足下一行的 if 条件，您将向 organisms 数组添加另一个元素。下一次迭代将更改 organisms 中的下一个元素，但由于您的数组每次都增长一个，因此您永远不会到达数组的末尾！

Answer 2

遍历数组并创建新生物，然后在循环后将新创建的生物数组添加到原始数组。

这是创建最小示例的可运行代码段。问题中的 random 方法调用已替换为对 Math.random() 的调用，并且已声明 width 和 height 以消除对 p5.js 的需要。

    var organisms = []; // array where organisms instances go
    var width = 100;
 var height = 100;
 
 function Organism(w, h, s){
 this.width = w;
 this.height = h;
 this.size = s;
 this.life = .76;
 }
 organisms.push(new Organism(1,1,1));
    console.log("Organisms length before reproduce: " + organisms.length);
 reproduce();
    console.log("Oganisms length after reproduce:  "+organisms.length);

    function reproduce(){
      var organismsToAdd = [];
      for (let i = 0; i < organisms.length; i++){
         if(organisms[i].life > 0.75){
            // create a genetically similar size
            let size = organisms[i].size + (Math.random() > 0.5 ? 1 : -1 * Math.random() * 2);   
            // declare instance
            let org = new Organism(width, height, size)
            organismsToAdd.push(org);
            // prevent infinite reproduction
            organisms[i].life -= 0.5;
            }
        }
      //organisms = organisms.concat(organismsToAdd);
      // or
   organisms.push.apply(organisms, organismsToAdd)
    }

这是一个带有 p5.js

的可运行片段

      var organisms = []; // array where organisms instances go

function setup(){
  createCanvas(100,100);
   organisms.push(new Organism(1,1,1));
  noLoop();
  }
  
  function draw(){
   console.log("Organisms length before reproduce: " + organisms.length);
   reproduce();
    console.log("Organisms length after reproduce: " + organisms.length);
  }
    function reproduce(){
      var organismsToAdd = [];
      for (let i = 0; i < organisms.length; i++){
         if(organisms[i].life > 0.75){
            // create a genetically similar size
            let size = organisms[i].size + (random() > 0.5 ? 1 : -1 * random() * 2);   
            // declare instance
            let org = new Organism(width, height, size)
            organismsToAdd.push(org);
            // prevent infinite reproduction
            organisms[i].life -= 0.5;
            }
        }
  //    organisms = organisms.concat(organismsToAdd);
   organisms.push.apply(organisms, organismsToAdd)
    }
   
 function Organism(w, h, s){
   this.width = w;
   this.height = h;
   this.size = s;
   this.life = .76;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>

为什么此函数（将对象推送到数组）会崩溃 p5.js？

Why does this Function (Which Pushes Objects to an Array) Crash p5.js?

javascript

performance

p5.js