在HTML的ul中展示JSON数组：代码报错排查求助

你的代码核心问题出在数组遍历的方式上，还有一处可以优化的点，我来帮你拆解清楚：

1. 循环语句的致命错误 #

你写的 for (var i in employee.length) 完全不符合数组遍历的逻辑：

• for...in 是用来遍历对象的可枚举属性的，而 employee.length 是一个数字（这里是3），遍历数字根本拿不到数组的索引；
• 就算改成 for (var i in employee)，这种方式也不推荐用于数组——它会意外遍历到数组原型链上的额外属性，导致不可预期的问题。

正确的数组遍历方式（任选其一） #

方式一：普通索引循环（最经典稳定）

var list = function(employee) {
  for (var i = 0; i < employee.length; i++) {
    document.getElementById("demo").innerHTML += '<li>' + employee[i].firstName + '</li>';
  }
};

方式二：forEach方法（更简洁的数组专属遍历）

var list = function(employee) {
  employee.forEach(function(person) {
    document.getElementById("demo").innerHTML += '<li>' + person.firstName + '</li>';
  });
};

方式三：for...of循环（ES6+语法，直接遍历元素）

var list = function(employee) {
  for (const person of employee) {
    document.getElementById("demo").innerHTML += '<li>' + person.firstName + '</li>';
  }
};

2. 性能优化建议 #

每次循环都修改 innerHTML 会触发浏览器频繁重绘，效率很低。建议先把所有列表项拼接成一个完整字符串，最后一次性赋值：

var list = function(employee) {
  let items = '';
  employee.forEach(function(person) {
    items += '<li>' + person.firstName + '</li>';
  });
  document.getElementById("demo").innerHTML = items;
};

完整修复后的代码 #

JavaScript 部分 #

var text = '[' + 
  '{ "firstName" : "John", "lastName": "Doe"},' + 
  '{ "firstName" : "Ann", "lastName": "Smith"},' + 
  '{ "firstName" : "Peter", "lastName": "Jones"}]';
var arr = JSON.parse(text);
var list = function(employee) {
  let items = '';
  employee.forEach(person => {
    items += `<li>${person.firstName}</li>`;
  });
  document.getElementById("demo").innerHTML = items;
};
list(arr);

HTML 部分 #

<ul id="demo"></ul>

这样就能正常把所有firstName渲染到UL列表中了。

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