Question

我正在参加Team Treehouse挑战赛。

我的挑战是创建一个包含学生信息的对象数组，为它创建一个搜索数据库，这样当你搜索学生时，学生就会出现。

如果有2名同名学生，另外的挑战是打印出这两名学生。如果用户输入“list”，我还尝试添加另一个小挑战来列出所有学生。

我的代码：

var message = '';
var student;
var search;
var list;

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

function getStudentInfo (student) {
  var report = '<h2>Student: ' + student.name + '</h2>';
  report += '<p>Track: ' + student.track + '</p>';
  report += '<p>Points: ' + student.points + '</p>';
  report += '<p>Achievements: ' + student.achievements + '</p>';
  return report;
}

while (true) { 
  search = prompt("Search Student records: Type a name [Martin] or [quit] to exit");

  if (search === null || search.toLowerCase() === "quit") {
    break;
  }
 for (var i = 0; i < students.length; i += 1) {
    student = students [i];
    if (search.toLowerCase() === student.name.toLowerCase()) {
      message = getStudentInfo(student);
      print(message);
      break;
    } else if (search.toLowerCase() === "list") {

        list = '<h2>Student: ' + student.name + '</h2>';
        list += '<p>Track: ' + student.track + '</p>';
        list += '<p>Points: ' + student.points + '</p>';
        list += '<p>Achievements: ' + student.achievements + '</p>';
        print (list);
  }
    }
      }

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: 'Jordan',
    track: 'Rails Development',
    achievements: '5',
    points: '350'
  }
];

Answer 1

一些值得注意的事情：

这是while循环使用不当，使用while (true)往往容易出错，导致无限循环。在循环中使用prompt的意义在于不断期望来自用户的额外输入，但由于您在每个循环中break;，我不相信这是您的目标。实际上，您根本不需要while构造。
您不需要这么多变量来跟踪程序的状态。可以重复students[i]两次而不是为它创建一个新变量，并且您可以立即将用户的输入存储为toLowerCase()，因为这是您将要检查的全部内容。
除非您的代码中有多个位置需要输出到UI，否则您不需要单独的函数来输出消息。您可以构建消息并在脚本末尾输出消息。我的预感是，最终输出的这种积累是你最大的困惑点，额外的函数调用会增加它。

总的来说，看起来你非常接近 - 下面的代码实际上比你的代码短，主要是改变output消息的构建方式。

(function() {

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: 'Jordan',
    track: 'Rails Development',
    achievements: '5',
    points: '350'
  }
];

var i = 0;
var input = '';
var output = '';

function getStudentInfo (student) {
  var report = '<h2>Student: ' + student.name + '</h2>';
  report += '<p>Track: ' + student.track + '</p>';
  report += '<p>Points: ' + student.points + '</p>';
  report += '<p>Achievements: ' + student.achievements + '</p>';
  return report;
}

input = prompt("Search Student records: Type a name [Martin] or [quit] to exit").toLowerCase();

if (input === 'quit' || input.length === 0) {
  return; // or display some message to 'output'
}

for (i = 0; i < students.length; i++) {
  if (input === 'list') {
    output += getStudentInfo(students[i]);
  } else if (input === students[i].name.toLowerCase()) {
    output += getStudentInfo(students[i]);
  }
}

document.getElementById('output').innerHTML = output;

})();

@import url('http://necolas.github.io/normalize.css/3.0.2/normalize.css');

/*General*/
body {
  background: #fff;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  font: Helvetica Neue, Helvectica, Arial, serif;
  font-weight: 300;
  font-size: 1em;
  line-height: 1.5em;
  color: #8d9aa5;
}

a {
  color: #3f8aBf;
  text-decoration: none;
}

a:hover {
  color: #3079ab;
}

a:visited {
  color: #5a6772;
}

h1, h2, h3 {
  font-weight: 500;
  color: #384047;
}

h1 {
  font-size: 1.8em;
  margin: 60px 0 40px;
}

h2 {
    font-size: 1em;
    font-weight: 300;
    margin: 0;
    padding: 30px 0 10px 0;
}

#home h2 {
  margin: -40px 0 0;
}

h3 {
  font-size: .9em;
  font-weight: 300;
  margin: 0;
  padding: 0;
}

h3 em {
  font-style: normal;
  font-weight: 300;
  margin: 0 0 10px 5px;
  padding: 0;
  color: #8d9aa5;
}

ol {
  margin: 0 0 20px 32px;
  padding: 0;
}

#home ol {
  list-style-type: none;
  margin: 0 0 40px 0;
}

li {
  padding: 8px 0;
  display: list-item;
  width: 100%;
  margin: 0;
  counter-increment: step-counter;
}

#home li::before {
    content: counter(step-counter);
    font-size: .65em;
    color: #fff;
    font-weight: 300;
    padding: 2px 6px;
    margin:  0 18px 0 0;
    border-radius: 3px;
    background:#8d9aa5;
    line-height: 1em;
}

.lens {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #8d9aa5;
  border-radius: 5px;
  position: absolute;
  margin: 5px 0 0 -19px;
}

#color div {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  margin: 5px;
}

span {
  color: red;
}

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

循环遍历一组对象以显示信息

1 个答案: