如何用JS构造函数/类创建Student对象？现有代码问题求助

不需要先恢复旧代码，直接在现有代码基础上改造即可——现有逻辑已经能正确拆分学生数据，只需要把普通对象替换成Student类/构造函数的实例，再调整写入textarea的逻辑即可。

改造步骤及代码实现 #

1. 定义Student类

先在JavaScript中定义Student类，用来创建学生实例：

class Student {
  constructor(name, address, number, course) {
    this.Name = name;
    this.Address = address;
    this.Number = number;
    this.Course = course;
  }

  // 可选：添加方法格式化输出内容
  getFormattedInfo() {
    return `姓名: ${this.Name}\n地址: ${this.Address}\n学号: ${this.Number}\n课程: ${this.Course}\n\n`;
  }
}

2. 修改数据处理与写入逻辑

调整原代码中的数据处理函数，创建Student实例而非普通对象；同时修复原代码中在textarea内嵌套textarea的错误，改为直接向目标textarea写入文本内容。

完整修改后的JavaScript代码：

let button = document.getElementById("get-text-btn");
let textArea = document.getElementById("my-text-area");
let loader = document.getElementById("loader");

// 定义Student类
class Student {
  constructor(name, address, number, course) {
    this.Name = name;
    this.Address = address;
    this.Number = number;
    this.Course = course;
  }

  getFormattedInfo() {
    return `姓名: ${this.Name}\n地址: ${this.Address}\n学号: ${this.Number}\n课程: ${this.Course}\n\n`;
  }
}

button.addEventListener("click", function() {
    getData();
});

async function getData() {
  try {
    loader.style.display = "inline-block"; // 请求开始时显示加载动画
    textArea.value = ""; // 清空textarea原有内容
    let response = await fetch('https://v-dresevic.github.io/Advanced-JavaScript-Programming/data/students.txt');
    if (response.status !== 200) {
      throw new Error("读取文件失败。");
    }
    let text = await response.text();
    const template = ['Name', 'Address', 'Number', 'Course'];

    const students = text.split("\n")
      .filter(line => line.trim() !== "") // 过滤文本中的空行
      .reduce(makeStudentObj, []);
 
    function makeStudentObj(prev, itm, idx) {
      const groupIndex = Math.floor(idx / 4);
      if (!prev[groupIndex]) {
        // 每4条数据创建一个Student实例
        prev.push(new Student(itm));
      } else {
        // 为实例补充对应属性
        prev[groupIndex][template[idx % 4]] = itm;
      }
      return prev;
    }

    // 将所有学生实例的信息拼接后写入textarea
    let content = "";
    students.forEach(student => {
      content += student.getFormattedInfo();
    });
    textArea.value = content.trim();
    } catch (err) {
        textArea.value = "获取数据失败: " + err.message;
    } 
    finally {
        loader.style.display = "none";
    }
};

3. 关键修改说明

• 修复了原代码中在textarea内嵌套textarea元素的错误，改为直接修改textarea的value属性写入内容
• 用Student类创建实例，完全满足使用new关键字创建对象的需求
• 添加空行过滤逻辑，避免因文本末尾空行生成无效对象
• 优化了加载动画的显示时机，提升交互体验

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