JS - Error: "Cannot read property of undefined"

Question

我正在尝试使用 P5.JS 库在 JavaScript 中进行遗传算法模拟，但我遇到了一些问题。这是我目前所拥有的：

//var popS = 2;
var popu;
//var balls = [];
var target;

function setup() {
  createCanvas(800, 300);
  popu = new Population();
  target = createVector(width - 15, height / 2);
}

function draw() {
  background(50);
  popu.run();

  var ballsC = 0;
  for (var a = 0; a < popu.balls.length; a++) {
    if (popu.balls[a].done == true){ 
      ballsC ++;
    }
  }
  if (ballsC >= popu.popS) {
    //popu = new Population();
    popu.evaluate();
    //popu.selection();
  }

  fill(255, 0, 30);
  noStroke();
  ellipse(target.x, target.y, 20, 20);
}

function DNA() {
  this.genes = [];
  this.changes = 7;//random(2, 50);

  for (var a = 0; a < this.changes; a++) {
    this.genes[a] = random(0, 15);
  }

  this.crossover = function (pB) {
    var newdna = new DNA();
    var mid = floor(random(0, this.genes.length));
    for (var a = 0; a < this.genes.length; a++) {
      if (a < mid) {
        newdna.genes[a] = this.genes[a];
      }else {
        newdna.genes[a] = pB.genes[a];
      }
    }
    return newdna;
  }
}

function Population() {
  this.balls = [];
  this.popS = 50;
  this.maxfit = 0;
  this.matingpool = [];

  for (var a = 0; a < this.popS; a++) {
    this.balls[a] = new Ball();
  }

  this.evaluate = function() {
    for (var a = 0; a < this.balls.length; a++) {
      this.balls[a].calcF();
      if (this.balls[a].fitness > this.maxfit) {
        this.maxfit = this.balls[a].fitness;
      }
    }
    this.matingpool = [];
    for (var b = 0; b < this.balls.length; b++) {
      var n = this.balls[b].fitness * 100;
      for (var c = 0; c < n; c++) {
        this.matingpool.push(this.balls[c]);
      }
    }

    this.selection();
  }

  this.selection = function () {
    var newBalls = [];
    for (var a = 0; a < this.balls.length; a++) {
      var parentA = this.matingpool[floor(random(0, this.matingpool.length))];
      var parentB = this.matingpool[floor(random(0, this.matingpool.length))];
      var child = parentA.dna.crossover(parentB.dna);
      newBalls[a] = new Ball(child);
    }
    this.balls = newBalls;
  }

  this.run = function() {
    for (var a = 0; a < this.balls.length; a++) {
      this.balls[a].update();
      this.balls[a].checkCol();
      this.balls[a].show();
    }
  }
}

function Ball(dna) {
  this.pos = createVector(10, height / 2);
  this.speed = createVector(2, 2.5);
  this.mul = -1;
  this.time = 0;
  this.a = 0;
  if (dna) {
    this.dna = dna;
  } else {
    this.dna = new DNA();
  }
  this.done = false;
  this.fitness = 0;
  this.reached;

  this.update = function() {
    if (this.done == false) {
      if (this.time >= this.dna.genes[this.a]) {
        this.a++;
        this.time = 0;
        this.mul *= -1;
      }
      this.speed.set(2, 2.5 * this.mul);
      this.pos.add(this.speed);
    }
  }

  this.show = function() {
    this.time += 0.1;
    fill(255, 70);
    noStroke();
    ellipse(this.pos.x, this.pos.y, 10, 10);
  }

  this.checkCol = function() {
    if (this.pos.y > height || this.pos.y < 0 || this.pos.x > width) {
      //print("col");
      this.done = true;
    }
    if (dist(this.pos.x, this.pos.y, target.x, target.y) <= (10 / 2) + (20 / 2)) {
      //print("done!");
      this.done = true;
      this.reached = true;
    }
  }

  this.calcF = function() {
    var a = dist(this.pos.x, this.pos.y, target.x, target.y);
    var b = this.dna.genes.length;
    var c = 0;
    if (this.reached){
      c = 1;
    }

    this.fitness = map(map(a, 0, width, 1, 0) + map(b, 2, 50, 1, 0) + c, 0, 3, 0, 1);
  }
}

这是代码中最重要的部分：

var popu;

function setup() {
  createCanvas(800, 300);
  popu = new Population();
}

function draw() {
  background(50);
  //popu = new Population();
  popu.evaluate();
  //popu.selection();
}

function DNA() {
  this.genes = [];
  this.changes = 7; //random(2, 50);

  for (var a = 0; a < this.changes; a++) {
    this.genes[a] = random(0, 15);
  }

  this.crossover = function(pB) {
    var newdna = new DNA();
    var mid = floor(random(0, this.genes.length));
    for (var a = 0; a < this.genes.length; a++) {
      if (a < mid) {
        newdna.genes[a] = this.genes[a];
      } else {
        newdna.genes[a] = pB.genes[a];
      }
    }
    return newdna;
  }
}

function Population() {
  this.balls = [];
  this.popS = 50;
  this.maxfit = 0;
  this.matingpool = [];

  for (var a = 0; a < this.popS; a++) {
    this.balls[a] = new Ball();
  }

  this.evaluate = function() {
    this.matingpool = [];
    for (var b = 0; b < this.balls.length; b++) {
      var n = this.balls[b].fitness * 100;
      for (var c = 0; c < n; c++) {
        this.matingpool.push(this.balls[c]);
      }
    }

    this.selection();
  }

  this.selection = function() {
    var newBalls = [];
    for (var a = 0; a < this.balls.length; a++) {
      var parentA = this.matingpool[floor(random(0, this.matingpool.length))];
      var parentB = this.matingpool[floor(random(0, this.matingpool.length))];
      var child = parentA.dna.crossover(parentB.dna);
      newBalls[a] = new Ball(child);
    }
    this.balls = newBalls;
  }
}

function Ball(dna) {
  this.pos = createVector(10, height / 2);
  this.speed = createVector(2, 2.5);
  this.mul = -1;
  this.time = 0;
  this.a = 0;
  if (dna) {
    this.dna = dna;
  } else {
    this.dna = new DNA();
  }
  this.done = false;
  this.fitness = 0;
  this.reached;

}

所以无论何时到达这里：

this.selection = function () {
    var newBalls = [];
    for (var a = 0; a < this.balls.length; a++) {
      var parentA = random(this.matingpool);
      var parentB = random(this.matingpool);
      var child = parentA.dna.crossover(parentB.dna);
      newBalls[a] = new Ball(child);
    }
    this.balls = newBalls;
  }

我收到错误："Cannot read property 'dna' of undefined"，到底为什么会这样？？当我在 chrome 中使用调试器时，我可以清楚地看到 matingpool 有 2000 个元素，但是当我尝试随机获取一个元素时，它 returns "undefined".

var parentA = random(this.matingpool);
var parentB = random(this.matingpool);

奇怪的是 parentB 有效，但 parentA 无效。

非常感谢任何帮助。完整代码运行在这里：http://codepen.io/felipe_mare/pen/bgOYMN

如果有帮助，我有时会收到错误："Cannot read property '0' of undefined" 而不是第 138 行

this.update = function() {
    if (this.done == false) {
      //line 138
      if (this.time >= this.dna.genes[this.a]) {
      //line 138
        this.a++;
        this.time = 0;
        this.mul *= -1;
      }
      this.speed.set(2, 2.5 * this.mul);
      this.pos.add(this.speed);
    }
  }

Answer 1

以后请尽量将您的问题缩小到MCVE。我知道这是一个调试起来很复杂的问题，但是如果您尝试将问题缩小到 minimal（20 行以下）示例，您的运气会好得多。大多数时候，您最终会在创建 MCVE 的过程中发现错误。

但您的问题实际上是在您创建 matingpool 数组时，此处：

this.matingpool = [];
for (var b = 0; b < this.balls.length; b++) {
  var n = this.balls[b].fitness * 100;
  for (var c = 0; c < n; c++) {
    this.matingpool.push(this.balls[c]);
  }
}

如果我在内部 for 循环中添加打印语句，如下所示：

this.matingpool = [];
for (var b = 0; b < this.balls.length; b++) {
  var n = this.balls[b].fitness * 100;
  for (var c = 0; c < n; c++) {
    console.log("pushing: " + this.balls[c]);
    this.matingpool.push(this.balls[c]);
  }
}

然后我看到你多次将 undefined 推入数组：

(1178) pushing: [object Object]
(3) pushing: undefined
(482) pushing: [object Object]
(3) pushing: undefined
(216) pushing: [object Object]

然后你从这个数组中随机选择，这就是你的错误出现在代码中随机位置的原因。

您将不得不进一步调试以找出发生这种情况的原因 - 您根据适应度而不是数组长度进行循环似乎很奇怪，但我不太了解代码足以确定。无论如何，希望这能让你走上正轨。

JS - Error: "Cannot read property of undefined"

JS - Error: "Cannot read property of undefined"

javascript

genetic-algorithm

p5.js

codepen