使用filter和map筛选员工数据并渲染HTML时遇TypeError求助

问题说明 #

需要从emp数组中，使用filter和map方法筛选出年龄小于26的人员，将其姓名和年龄以「name : age」的格式渲染到HTML的#app元素中。要求仅通过JavaScript实现、不修改HTML文件，但目前使用app.innerHTML时出现TypeError，无法完成需求。

示例数据：

let emp = [
  {
    name: "abc",
    age: 30
  },
  {
    name: "xyz",
    age: 25
  },
  {
    name: "cde",
    age: 20
  },
  {
    name: "fgh",
    age: 28
  }
];

预期输出：

xyz : 25
cde : 20

现有HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q1</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="app"></div>

    <!-- JavaScript -->
    <script src="./script.js"></script>
</body>
</html>

现有JavaScript代码：

let emp = [
  {
    name: "abc",
    age: 30
  },
  {
    name: "xyz",
    age: 25
  },
  {
    name: "cde",
    age: 20
  },
  {
    name: "fgh",
    age: 28
  }
];


const result = emp.filter((val) => {
    return val.age < 26;
});

console.log(result);

let app = document.getElementById("app");

result.forEach((val) => {
  const newInfo = `${val.name} : ${val.age}`;
  console.log("Data -> ", newInfo);
  const prevInfo = app.innerHTML;
  app.innerHTML = prevInfo + newInfo;
});

错误原因 #

出现TypeError通常是因为document.getElementById("app")返回了null——也就是代码执行时#app元素还未被浏览器解析加载完成。虽然script标签放在了body底部，但极端情况下可能存在DOM未就绪的情况；另外原代码多次拼接innerHTML的方式效率较低，也可能引发不必要的问题。

修复后的JavaScript代码 #

let emp = [
  {
    name: "abc",
    age: 30
  },
  {
    name: "xyz",
    age: 25
  },
  {
    name: "cde",
    age: 20
  },
  {
    name: "fgh",
    age: 28
  }
];

// 确保DOM加载完成后再执行代码
document.addEventListener('DOMContentLoaded', () => {
  // 先筛选年龄小于26的员工，再转换为指定格式的字符串数组
  const formattedEmpList = emp
    .filter(val => val.age < 26)
    .map(val => `${val.name} : ${val.age}`);

  // 将数组转为换行分隔的字符串，渲染到#app中
  const app = document.getElementById("app");
  app.innerHTML = formattedEmpList.join('<br>');
});

说明 #

1. 使用DOMContentLoaded事件确保代码在DOM完全加载后执行，彻底避免获取不到元素的问题。
2. 结合filter和map方法，一步完成筛选和格式转换，代码更简洁高效。
3. 使用join('<br>')将字符串数组转为带换行的HTML内容，符合页面展示的换行需求。

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