JavaScript数组操作：学生成绩数据处理作业问题求助

直接用以下代码实现所有要求：

<body>
  <div id="studentList"></div>
  <div id="stats"></div>
  <script>
    var grades = "jim|25, sue|32, mary|34, ann|22, ted|28, frank|15, lisa|19, mike|30, ahn|26, vishaya|27";

    // 分割成单个学生数据
    const studentData = grades.split(", ");
    const studentListEl = document.getElementById("studentList");
    const statsEl = document.getElementById("stats");
    const gradesArray = [];

    // 首字母大写函数
    function capitalizeName(name) {
      return name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
    }

    // 渲染学生列表
    studentData.forEach(item => {
      const [name, gradeStr] = item.split("|");
      const grade = parseInt(gradeStr);
      gradesArray.push(grade);
      const studentItem = document.createElement("p");
      studentItem.innerHTML = `<b>Name:</b> ${capitalizeName(name)} <b>Grade:</b> ${grade}`;
      studentListEl.appendChild(studentItem);
    });

    // 计算统计数据
    const studentCount = studentData.length;
    const lowestGrade = Math.min(...gradesArray);
    const highestGrade = Math.max(...gradesArray);
    const total = gradesArray.reduce((sum, grade) => sum + grade, 0);
    const averageGrade = (total / studentCount).toFixed(1);

    // 渲染统计信息
    statsEl.innerHTML = `
      <p><b>学生总数:</b> ${studentCount}</p>
      <p><b>最低分:</b> ${lowestGrade}</p>
      <p><b>最高分:</b> ${highestGrade}</p>
      <p><b>平均分:</b> ${averageGrade}</p>
    `;
  </script>
</body>

关键功能实现说明 #

1. 姓名首字母大写 #

自定义capitalizeName函数处理格式：

• 用charAt(0).toUpperCase()提取首字母并转为大写
• 用slice(1).toLowerCase()提取剩余字符并转为小写，确保名字格式统一

2. 统计数据计算 #

• 遍历学生数据时，将分数转为数字存入数组gradesArray
• 学生总数直接取分割后数组的长度studentData.length
• 最低分用Math.min(...gradesArray)（展开数组作为参数）
• 最高分用Math.max(...gradesArray)
• 总分通过reduce方法累加，平均分用总分除以学生数，toFixed(1)保留一位小数

3. 规范DOM操作 #

摒弃document.write，改用getElementById获取页面元素，通过createElement和innerHTML插入内容，避免覆盖页面原有内容。

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