为什么我的javascript代码返回TypeError undefined？ [重复]

This question already has an answer here:

这个问题在这里已有答案:

'Length' Property Undefined while iterating Array 3 answers

'Length'属性在迭代Array 3答案时未定义

class CustomTable
{
 constructor(div_id, headings) {
 this.div = div_id;
 this.header_titles = headings;
 this.item_list = new Array();
 var _this = this;

 this.add_item = function(items)
 {
  _this.item_list.push(items);
  console.log(_this.item_list);
 }

 this.remove_item = function(item_index)
 {
  _this.item_list.splice(item_index, 1);
  console.log(_this.item_list);
 }

 this.drawTable = function()
 {
  var t = "<table class='table' style='width:100%'>";
  t += "<thead>";
  t += " <tr>";
  t += "  <th>#</th>";

  for (var i = 0; i < _this.header_titles.length; i++)
  { t += "<th>" + _this.header_titles[i] + "</th>"; }
  t += "  <th>Add</th>";
  t += " </tr>";
  t += "</thead>";
  t += "<tbody>";

  for (var i = 0; i < _this.item_list.length; i++)
  {
    t += "<tr>";
    t += "<td>" + i + "</td>";
    console.log(i);             

    var subitem_count = _this.item_list[i].length;
    //                  ^^^^^^^^^^^^^^^^^^
    //                  This errors out: TypeError undefined
    for (var j = 0; j < subitem_count; i++)
    {
      t += "<td>" + _this.item_list[i][j] + "</td>"
    }
    t += "</tr>"
  }
  t += "</tbody>";
  t += "</table>";

  document.getElementById(_this.div).innerHTML = t;
  }
 }
}

var ct = new CustomTable("server_list",["Server Name","IP Address", "RAM in GB"]);
ct.add_item(["QMM-TRGEXCH01","192.168.0.225","2GB"]);
ct.add_item(["QMM-SRCEXCH01","192.168.0.226","2GB"]);
ct.add_item(["QMM-TRGAGENT01","192.168.0.227","2GB"]);
ct.add_item(["QMM-SRCAGENT01","192.168.0.228","2GB"]);
ct.add_item(["QMM-MIGCONSOLE","192.168.0.229","2GB"]);

ct.drawTable();

Please view this JSFiddle

请查看这个JSFiddle

I have searched everywhere and can't figure out why Javascript keeps erroring out. The variable is in scope and I have checked it using

我到处搜索,无法弄清楚Javascript为什么会出错。变量在范围内,我已经使用它进行了检查

_this.item_list[i].constructor === Array

_this.item_list [i] .constructor === Array

and it is an Array.

它是一个数组。

I get this error at first iteration.

我在第一次迭代时遇到此错误。

console.log(i); // i = 0 at error

的console.log(ⅰ); //错误时i = 0

So its not that the code is iterating out of bounds. That might be an issue with the code as well but there is something else wrong. Please look at the fiddle, I have updated it and remove the = from all for loops but I still get the same error.

所以它不是代码迭代超出范围。这可能也是代码的问题,但还有其他问题。请看小提琴,我已经更新它并从所有for循环中删除=但我仍然得到相同的错误。

1 个解决方案

#1

It is because you are trying to invoke a method on element at unavailable index.

这是因为您尝试在不可用索引处调用元素上的方法。

for (var i = 0; i <= _this.item_list.length

is supposed to be

应该是

for (var i = 0; i < _this.item_list.length

Array out of bounds issue - You are trying to access the element at index 6 which is undefined

数组超出范围问题 - 您正在尝试访问未定义的索引6处的元素

As per your logic, if they are 5 elements in _this.item_list you are iterating elements at index 0, 1, 2, 3, 4, 5 but you should only be iterating upto 4 as the index starts at 0 and not 1

根据你的逻辑,如果它们是_this.item_list中的5个元素,你在索引0,1,2,3,4,5处迭代元素,但是你应该只迭代到4,因为索引从0开始而不是1

You will have to replace all instances of <= in your for-loop to <

您必须将for循环中<=的所有实例替换为<

Also your inner loop has a bug.

你的内循环也有一个bug。

for (var j = 0; j < subitem_count; i++)

supposed to be

应该是

 for (var j = 0; j < subitem_count; j++)

You should be incrementing j and not i in the inner loop.

你应该在内循环中递增j而不是i。

Check Fiddle

#1