javascript - 这是从带有对象的数组创建列表的正确方法吗？

Question

我最近一直在学习一些 ES6。我正在学习 Wes Bos 的“ES6 for everyone”类(class)，并想自己编写一些脚本来测试我吸收了多少有值(value)的信息。

在这段代码中，我试图从给定的变量创建 HTML 列表，该变量是包含对象的数组。所以最终我使这段代码可以工作，但我不确定这是否是正确的方法，你们可以看看它并告诉我可以修复和更改哪些内容以获得更好的解决方案吗？谢谢

const list = document.createElement('ul');
const students = [{
    name: 'Tom',
    gpa: 4.2,
    course: 'MKDf-16/1',
    gender: 'male'
  },
  {
    name: 'Artiom',
    gpa: 2.2,
    course: 'MKDf-16/1',
    gender: 'male'
  },
  {
    name: 'Alison',
    gpa: 4.8,
    course: 'MKDf-16/2',
    gender: 'female'
  },
  {
    name: 'John',
    gpa: 4.1,
    course: 'MKDf-16/5',
    gender: 'male'
  }
];

const output = students.map(student => {
  return `
            ${student.name}'s GPA is ${student.gpa}
        `
});

output.forEach((x, index) => {
  console.log(output[index]);
  let listItem = document.createElement('li');
  listItem.innerHTML = output[index];
  list.appendChild(listItem);
});

document.body.appendChild(list);

Answer 1

const students = [{
    name: 'Tom',
    gpa: 4.2,
    course: 'MKDf-16/1',
    gender: 'male'
  },
  {
    name: 'Artiom',
    gpa: 2.2,
    course: 'MKDf-16/1',
    gender: 'male'
  },
  {
    name: 'Alison',
    gpa: 4.8,
    course: 'MKDf-16/2',
    gender: 'female'
  },
  {
    name: 'John',
    gpa: 4.1,
    course: 'MKDf-16/5',
    gender: 'male'
  }
];

const list = document.createElement('ul');
list.innerHTML = students.map(ob => `<li>${ob.name}'s GPA is ${ob.gpa}</li>`).join("");
document.body.appendChild(list);