Question

var message = '';
var user;
var student;

function print(message) {
  var outputd = document.getElementById('output');
  outputd.innerHTML = message;
}


var students = [ 
  { 
   name: 'Dave', track: 'Front End Development', achievements: 158, points: 14730 },
  { name: 'Jody', track: 'iOS Development with Swift', achievements: '175',  points: '16375'
  },
  { name: 'Jordan', track: 'PHP Development', achievements: '55', points: '2025'
  },
  {  name: 'John', track: 'Learn WordPress', achievements: '40', points: '1950'
  },
  { name: 'Trish', track: 'Rails Development', achievements: '5', points: '350'
  }
];


function studentreport( studen ){

  var report = '<h2>student: ' + studen.name + '</h2>';
  report += '<br>'+ 'track: ' + studen.track + '</br>';
  report += '<br>' + 'achivements: ' + studen.achivements + '</br>';
  report += '<br>' + 'points: ' + studen.points + '</br>';
  return report
};

while (true){
  user = prompt("what student are you looking for?");
   if (user === 'quit'){
    break;
   }

   for (var i = 0; i< students.length; i += 1){
    student = students[i];
     if (student.name === user){

   message = studentreport(student);
    print(message);
  }   else if (student.name !== user){
      alert('no student with that name, try again');
  }

   }



}

所以我理解所有代码，但最后如果student.name ===用户，则从此处开始，如果它是/ true，则学生报告功能将使用student参数运行。但是如何它获取学生参数的索引？就像它怎么知道从上面的数组对象开始的名称/位置如果声明，那么如何？我对这部分真的很困惑。 * /

谢谢大家的帮助

Answer 1

不，它实际上是遍历数组中的每个学生：

for (var i = 0; i< students.length; i += 1){ /CODE GOES HERE/ }

i用作索引。我们测试students.length，以确定每个迭代循环有多少次迭代，i+=1递增i。使我们能够students[i]访问每个元素。这有帮助吗？

Answer 2

因此，您对代码感兴趣的主要部分是while循环中的所有内容。因此，让我们看一下该循环中隐藏的内容。

// Here we start the while(true) loop so until we break this will keep running
while (true) {
  // Now we ask the user for a students and
  // and save it to a variable called user. 
  user = prompt("what student are you looking for?");

  // Here we check if the user has typed quit and if so break the loop
  if (user === "quit") {
    break;
  }

  // This is the important part:
  // Here we create a for loop and it will keep looping until
  // it no longer less than the length of the student array.
  // This means that the i variable can be used as the current index 
  for (var i = 0; i < students.length; i += 1) {
    // Each iteration of the loop we save the current student ( student[i] )
    // to a variable called student.
    student = students[i];

    // Remember that each student in the array is an object. 
    // Since we saved that object to the student variable we can now access
    // the name property of that object by calling student.name

    // So here we are now just checking if student.name is equal to the 
    // name the user entered.  
    if (student.name === user) {
      // If the the name matches, we have found our student and we can now
      // generate a student report. We save this report to a variable message.
      message = studentreport(student);
      // Finally we print out this message.
      print(message);
    } 

    else if (student.name !== user) {
      // If the current student doesn't match the inputed name then
      // we alert an error message.
      alert("no student with that name, try again");
    }
  }
}

一个小问题是，错误消息将多次发出警报，直到循环中我们正在寻找的当前学生与用户输入匹配为止。为了解决这个问题，我们可以稍微修改一下代码。

while (true) {
  user = prompt("what student are you looking for?");
  if (user === "quit") {
    break;
  }

  for (var i = 0; i < students.length; i += 1) {
    student = students[i];
    if (student.name === user) {
      message = studentreport(student);
      print(message);
      // Once we find the student we are looking for we can break out of the loop
      break;
    }
  }
  // This code will never get reached if we find the student 
  // because we break out of the loop. But if we don't find the
  // student then we can alert the user.
  alert("no student with that name, try again");
}

我希望这会有所帮助！祝您项目顺利！

Answer 3

如果代码格式正确，那么阅读起来就容易得多。

while (true) {
  user = prompt('what student are you looking for?');
  if (user === 'quit') {
    break;
  }

  for (var i = 0; i < students.length; i += 1) {
    student = students[i];
    if (student.name === user) {
      message = studentreport(student);
      print(message);
    } else if (student.name !== user) {
      alert('no student with that name, try again');
    } // It is easy to see where the if and else are
  } // It is easy to see this is the end of the for loop
}

但是通过for循环，以现代的功能样式更容易阅读。

使用类似while的循环意味着UI线程被锁定，并且在您键入quit之前您将看不到任何结果。使用事件处理程序，UI线程可以自由更新。拥有一个在单击事件上运行代码的搜索按钮意味着没有持续运行的阻塞代码循环。

function print(message) {
  var outputd = document.getElementById('output');
  outputd.innerHTML = message;
}

var students = [
  {
    name: 'Dave',
    track: 'Front End Development',
    achievements: 158,
    points: 14730
  },
  { name: 'Jody', track: 'iOS Development with Swift', achievements: '175', points: '16375' },
  { name: 'Jordan', track: 'PHP Development', achievements: '55', points: '2025' },
  { name: 'John', track: 'Learn WordPress', achievements: '40', points: '1950' },
  { name: 'Trish', track: 'Rails Development', achievements: '5', points: '350' }
];

function studentreport(studen) {
  var report = '<h2>student: ' + studen.name + '</h2>';
  report += '<br>' + 'track: ' + studen.track + '</br>';
  report += '<br>' + 'achivements: ' + studen.achivements + '</br>';
  report += '<br>' + 'points: ' + studen.points + '</br>';
  return report;
}

document.getElementById('search').addEventListener('click', function() {
  const user = document.getElementById('user').value;

  const student = students.find(s => s.name === user);
  if (student) {
    const message = studentreport(student);
    print(message);
  } else {
    print('no student with that name, try again');
  }
});

what student are you looking for? <input id="user" type="text"><button id="search">Search</button><br>

<div id="output"></div>

有人可以解释一下它如何工作吗

3 个答案: