Question

我最近一直在学习ES6。我正在关注Wes Bos“ES6 for everyone”课程，并希望自己编写一些脚本来测试我对有价值信息的接受程度。

在这段代码中，我试图从给定变量中创建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);

Answer 2

＆＃34;正确＆＃34;方式可能不是使用innerHTML来解析包含外部数据的内容。更好的是实际创建<li>元素并设置他们的textContent，避免消毒和引用的疯狂。

不幸的是Javascript用于创建元素和设置其内容的基本语法非常难看且冗长。在我的代码中，通常我end up with an utility function代码为：

el("ul", {},
   ...(content.map(x =>
       el("li", {textContent: `${x.name} GPA is ${x.gpa}`}))));

可以为ul数组中的每个元素创建一个包含一个li节点的content节点。

不涉及HTML解析，不需要报价或消毒。

这是从包含对象的数组创建列表的正确方法吗？

2 个答案: