Может кто-нибудь объяснить, как это работает, пожалуйста

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, то функция отчета об ученике выполняется с аргументом студента.Но как получить индекс для аргумента студента?например, как он узнает, какое имя / где начинать с объекта массива выше, это передается из оператора if, если да, то как?Я просто очень запутался в этой части.* /

Спасибо всем за помощь

Answer 1

Таким образом, основной раздел, представляющий интерес для ваших кодов, - это все в цикле 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 2

Если код был правильно отформатирован, если его было бы намного сложнее для чтения.

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
}

Но было бы намного проще читать в современном функциональном стиле для циклов.

ИспользованиеПодобный цикл while означает, что поток пользовательского интерфейса заблокирован, и вы не увидите никаких результатов, пока не наберете quit.Используйте обработчики событий, и поток пользовательского интерфейса можно обновлять бесплатно.Наличие кнопки поиска, которая запускает ваш код в событии щелчка, означает, что не существует постоянно запущенного цикла блокировки кода.

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>

Answer 3

Нет, на самом деле он циклически перебирает всех студентов в массиве:

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

i используется в качестве индекса.Мы проверяем students.length, чтобы определить, сколько итераций и i+=1 увеличивает i в каждом цикле итерации.Дает нам возможность students[i] доступа к каждому элементу.Это помогает?