如何在JavaScript中透视对象数组并在HTML上显示

在JavaScript中，透视对象数组通常指的是将对象数组转换为另一种格式，以便更容易地在HTML中显示。透视操作可以通过多种方式实现，例如使用Array.prototype.map()、Array.prototype.reduce()等方法。下面是一个示例，展示如何透视一个对象数组并在HTML上显示。

基础概念

对象数组：一个包含多个对象的数组，每个对象都有相同的属性。
透视（Pivot）：将数据从一种格式转换为另一种格式，以便更容易处理或显示。

示例数据

假设我们有一个对象数组，表示一些学生的成绩：

const students = [
  { name: 'Alice', subject: 'Math', score: 90 },
  { name: 'Alice', subject: 'Science', score: 85 },
  { name: 'Bob', subject: 'Math', score: 88 },
  { name: 'Bob', subject: 'Science', score: 92 }
];

透视操作

我们可以使用Array.prototype.reduce()方法将这个数组透视为一个以学生名字为键的对象：

const pivotedData = students.reduce((acc, student) => {
  if (!acc[student.name]) {
    acc[student.name] = {};
  }
  acc[student.name][student.subject] = student.score;
  return acc;
}, {});

console.log(pivotedData);

输出将是：

{
  Alice: { Math: 90, Science: 85 },
  Bob: { Math: 88, Science: 92 }
}

在HTML上显示

我们可以遍历透视后的数据，并将其显示在HTML中。假设我们有一个简单的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Student Scores</title>
</head>
<body>
  <div id="scores"></div>
  <script src="script.js"></script>
</body>
</html>

在script.js中，我们可以编写如下代码来动态生成HTML内容：

const scoresDiv = document.getElementById('scores');

for (const [name, subjects] of Object.entries(pivotedData)) {
  const studentDiv = document.createElement('div');
  studentDiv.innerHTML = `<strong>${name}:</strong><br>`;

  for (const [subject, score] of Object.entries(subjects)) {
    const subjectDiv = document.createElement('div');
    subjectDiv.textContent = `${subject}: ${score}`;
    studentDiv.appendChild(subjectDiv);
  }

  scoresDiv.appendChild(studentDiv);
}