JavaScript循环过滤数组时HTML输出undefined但控制台正常是什么原因？

• 核心错误是你用遍历原始数据集的循环下标i去读取筛选后数组arr的元素，两者下标完全不匹配：
  开启会费筛选后，i=0对应的数据未满足缴费条件，不会被push到arr里。当i=1满足条件时，arr里刚push的元素实际下标是0，你读取arr[1]自然就是undefined，同理i=2时读取arr[2]也拿不到正确值。
• 额外问题：arr定义为全局变量，每次点击执行setup时不会清空，多次点击会导致数据累积，输出结果错乱。

你可以直接用当前遍历到的姓名拼接字符串，不需要额外通过arr中转，还可以把重复的两次循环合并为一次，简化逻辑，修改后的代码参考如下：

var data =[{
        "dues paid": "",
        "name": "john",
        "age": "18",
        "city": "Jamestown"
    },
    {
        "dues paid": "100",
        "name": "marvin",
        "age": "27",
        "city": "Dallas"
    },
       {
        "dues paid": "100",
        "name": "janice",
        "age": "22",
        "city": "Denver"
    }
 ]
let checkbox = document.getElementById("check");

function setup() {
  let strLine = ""; 
  let checked = checkbox.checked;

  for (var i = 0; i < data.length; i++) {
    // 统一判断逻辑，不需要写两遍循环
    if (!checked || data[i]['dues paid'] !== "") {
      console.log(i, data[i]['name']);
      // 直接用当前拿到的name拼接，不要用i去读筛选后的数组
      strLine += data[i]['name'] + "<br>";
    }
  }
  document.getElementById("demo").innerHTML = strLine;
}

document.getElementById("test").onclick=setup;

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