JavaScript修改myVersion为2时循环渲染表格首列显示undefined

我是JavaScript零基础初学者，目前正尝试通过循环遍历数据构建表格。当变量myVersion值为"1"时，代码运行符合预期；但一旦将该变量值改为"2"，表格第一列的单元格就不再填充alternatives数组中的对应值，反而显示undefined。

预期实现效果：循环校验数据的Version字段值，仅使用对应版本的数据渲染表格。

目前myVersion = "1"时功能完全正常，其余所有列也都能正确填充，始终无法定位问题原因。
myData中的取值为测试用无实际意义内容，除问题解决方案外，也希望得到代码优化相关的建议。
完整代码如下：

function createDCE() {
  var alternatives = ["Car","Bike","Train"];
  var myVERSION = "2";
  
  var myData = [
    { "Version":"1","Task":"1","Concept":"1","Att1":"Banane","Att2":"5€","Att3":"27,56","Att4":"$$$","Att5":"50°C"},
    { "Version":"1","Task":"1","Concept":"2","Att1":"Karotte","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
    { "Version":"1","Task":"1","Concept":"3","Att1":"Banane + Karotte","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
    { "Version":"2","Task":"1","Concept":"1","Att1":"Banane","Att2":"5€","Att3":"27,56","Att4":"$$$","Att5":"50°C"},
    { "Version":"2","Task":"1","Concept":"2","Att1":"Karotte","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
    { "Version":"2","Task":"1","Concept":"3","Att1":"Banane + Karotte","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"}
  ]
  
  var col = [];
  col.push("Option");
  for (var key in myData[0]) {
    if (key != "Version" && key != "Task" && key != "Concept") {
      col.push(key);
    }
  }
  col.push("Buttons here");
  
  var table = document.createElement("table");
  var tr = table.insertRow(-1);
  
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th");
    th.innerHTML = col[i];
    tr.appendChild(th);
  }
  
  for (var i = 0; i < myData.length; i++) {
    if (myData[i]["Version"] === myVERSION) {
      tr = table.insertRow(-1);
      for (var j = 0; j < col.length; j++) {
        if (j == 0) {
          var createLabel = tr.insertCell(-1);
          createLabel.innerHTML = alternatives[i]; // 版本为非"1"时此处取值异常
        }
        else {
          var tabCell = tr.insertCell(-1);
          tabCell.innerHTML = myData[i][col[j]];
        }
      }
    }
  }
  
  var divContainer = document.getElementById("dce_table");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
}

createDCE();

<table id="dce_table"></table>

取alternatives数组值时复用了遍历全量myData的索引i，索引和实际渲染的行号不匹配：

• 版本为"1"时，匹配到的是myData中索引为0、1、2的三条数据，刚好和alternatives数组的0、1、2索引对应，所以运行正常
• 版本为"2"时，匹配到的是myData中索引为3、4、5的三条数据，但alternatives数组长度只有3，最大有效索引是2，访问alternatives[3]、alternatives[4]、alternatives[5]时自然返回undefined

最简洁的修复方式是先把对应版本的数据过滤出来，再遍历过滤后的数组渲染行，此时遍历的索引天然和alternatives的索引一一对应，不需要额外维护计数器：

1. 用filter方法提前筛选出当前版本的所有数据
2. 直接遍历筛选后的数组生成表格行，第一列直接取alternatives[i]即可

修复后的核心遍历逻辑示例：

// 提前筛选对应版本的数据
const versionData = myData.filter(item => item.Version === myVERSION);
// 遍历筛选后的数据渲染行
for (var i = 0; i < versionData.length; i++) {
  tr = table.insertRow(-1);
  for (var j = 0; j < col.length; j++) {
    if (j == 0) {
      var createLabel = tr.insertCell(-1);
      createLabel.textContent = alternatives[i];
    } else {
      var tabCell = tr.insertCell(-1);
      tabCell.textContent = versionData[i][col[j]];
    }
  }
}

• 变量名保持大小写统一：原代码中版本变量定义为myVERSION，建议和常规命名规范保持一致用小驼峰写法myVersion，避免因大小写拼写错误导致的判断失效
• 遍历对象自有属性时，优先用Object.keys(目标对象)获取键数组再遍历，不要直接用for...in，避免遍历到对象原型上的额外属性导致列生成异常
• 渲染纯文本内容时优先用textContent代替innerHTML，既可以避免内容被误解析为HTML导致的XSS风险，性能也更好
• 做值相等判断时，建议把常量写在===左侧，比如"1" === myVersion，避免因手误把===写成=导致意外赋值的bug

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