JavaScript代码陷入无限循环致页面崩溃，请求排查修复

嘿，我一眼就瞅到问题所在了——你的代码里藏着一个经典的变量混用导致的无限循环，这就是页面崩溃的元凶！

看你标注的崩溃点附近的这段代码：

for (var j = 0; i < word.text.length; j++) {

发现不对劲了吗？内层循环的终止条件用的是外层循环的变量i，而不是内层的j！外层的i在这个内层循环里完全不会被修改，只要一开始i < word.text.length（比如你的例子里word.text是"Hello"，长度为5，外层i从0开始肯定满足条件），这个内层循环就会一直跑下去，永远停不下来，浏览器自然就扛不住崩溃了。

修复步骤 #

1. 修正内层循环条件：把终止条件里的i换成j，让内层循环正常终止：

for (var j = 0; j < word.text.length; j++) {

2. 补全遗漏的代码：你代码里的abc.le...应该是abc.length，不然会触发语法错误：

var element = abc.charAt(Math.floor(Math.random() * abc.length));

3. 可选优化：Gene属性调整：你现在把fitness设为Gene的静态属性，意味着所有Gene实例共享同一个fitness值，如果想让每个基因有自己的适应度，应该把它放到构造函数里作为实例属性：

var Gene = function(text){
  if(text){
    this.text = text;
  }
  this.fitness = 0; // 每个实例独立的适应度
};
Gene.generation = 0; // 世代数作为静态属性没问题

修复后的完整核心代码片段大概是这样：

// Population
var Gene = function(text){
  if(text){
    this.text = text;
  }
  this.fitness = 0;
};
Gene.generation = 0;

var word = new Gene('Hello');

// Make elements
var genArr = [];
var population = 20;
var mutation = 0;

for(var i = 0; i < population; i++){
  var gene = "";
  var abc = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  // 修正后的内层循环
  for (var j = 0; j < word.text.length; j++) {
    var element = abc.charAt(Math.floor(Math.random() * abc.length));
    gene += element;
  }
  genArr.push(new Gene(gene));
}

这样代码就不会无限循环，页面也不会崩溃啦！

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