Question

我知道如何以另一种方式获取网页上的所有信息，但是我正尝试使用forEach（）方法将其获取到网页上以学习新知识。这是我第一次使用forEach（）方法，有人可以告诉我我在做什么错吗？除了值外，所有内容都将打印到网页上。

let students = [
     { name: "Milla Jovovich", track: "Fullstack JavaScript", achievements: 5, points: 50 }
    ,{ name: "Bjon Aarseth", track: "iOS Development", achievements: 7, points: 70 }
    ,{ name: "Varg Oystein", track: "Front End Development", achievements: 12, points: 120 }
    ,{ name: "Wilhelm Striepe", track: "Software Engineering", achievements: 9, points: 90 }
    ,{ name: "Anders Hansen", track: "Data Science", achievements: 22, points: 220 }
] ;

let message = "";
let student;
let search;

function print(message) {
  let outputDiv = document.getElementById("output") ;
  outputDiv.innerHTML = message ;
}

students.forEach(function(myElement) {
  for(let key in myElement) {
          myElement += "<h2>Student: " + myElement[key] + "</h2>" ;
          myElement += "<p>Track: " + myElement[key] + "</p>" ;
          myElement += "<p>Achievements: " + myElement[key] + "</p>" ;
          myElement += "<p>Points: " + myElement[key] + "</p>" ;
  }
  
  print(myElement) ;
}) ;

<div id="output">

Answer 1

您遇到了一些问题：

您的内部for循环是多余的，因为它向每个信息块添加了相同的值。相反，您可以删除它并仅访问每个对象所需的键（使用点符号）。
在执行myElement += "string"时，您试图将字符串与对象连接起来，因为myElement表示数组中的给定对象。取而代之的是，您可以使用空字符串（message）并在循环的每次迭代中添加该空字符串。

完成此操作后，message变量将包含.forEach循环完成后需要打印的标记，因此可以将print()行移至在您的for循环之外。

请参见以下示例：

let students = [{
    name: "Milla Jovovich",
    track: "Fullstack JavaScript",
    achievements: 5,
    points: 50
  },
  {
    name: "Bjon Aarseth",
    track: "iOS Development",
    achievements: 7,
    points: 70
  },
  {
    name: "Varg Oystein",
    track: "Front End Development",
    achievements: 12,
    points: 120
  },
  {
    name: "Wilhelm Striepe",
    track: "Software Engineering",
    achievements: 9,
    points: 90
  },
  {
    name: "Anders Hansen",
    track: "Data Science",
    achievements: 22,
    points: 220
  }
];

let message = "";

function print(message) {
  let outputDiv = document.getElementById("output");
  outputDiv.innerHTML += message;
}

students.forEach(function(myElement) {
    message += "<h2>Student: " + myElement.name + "</h2>";
    message += "<p>Track: " + myElement.track + "</p>";
    message += "<p>Achievements: " + myElement.achievements + "</p>";
    message += "<p>Points: " + myElement.points + "</p>";
});

print(message);

<div id="output"></div>

Answer 2

您不需要使用for...in遍历元素。 forEach就足够了。

let students = [{
    name: "Milla Jovovich",
    track: "Fullstack JavaScript",
    achievements: 5,
    points: 50
  },
  {
    name: "Bjon Aarseth",
    track: "iOS Development",
    achievements: 7,
    points: 70
  },
  {
    name: "Varg Oystein",
    track: "Front End Development",
    achievements: 12,
    points: 120
  },
  {
    name: "Wilhelm Striepe",
    track: "Software Engineering",
    achievements: 9,
    points: 90
  },
  {
    name: "Anders Hansen",
    track: "Data Science",
    achievements: 22,
    points: 220
  }
];

let message = "";
let student;
let search;

function print(message) {
  let outputDiv = document.getElementById("output");
  outputDiv.innerHTML = message;
}

message = ""; //declare your "message" here, the content of output

students.forEach(function(myElement) {
  message += "<h2>Student: " + myElement.name + "</h2>";
  message += "<p>Track: " + myElement.track + "</p>";
  message += "<p>Achievements: " + myElement.achivements + "</p>";
  message += "<p>Points: " + myElement.points + "</p>";
});

print(message); // print "message" when all students have been added to the variable

<div id="output"></div>

在对象数组上使用forEach（）

2 个答案: