javascript - 遍历对象数组

Question

我需要遍历一组对象，并提示用户输入学生姓名。如果该名称存在，我需要将学生的数据打印到屏幕上，否则继续迭代直到用户键入退出。

我遇到的问题是，如果我键入最后一个对象的学生姓名，则在循环完成之前不会打印学生的记录。

请看下面的代码:

var students = [{
    name: 'hacene',
    track: 'Full Stack JavaScript',
    achievements: 12,
    points: 1226
  },
  {
    name: 'dave',
    track: 'PHP Development',
    achievements: 128,
    points: 14868
  },
  {
    name: 'layla',
    track: 'iOS Development',
    achievements: 8,
    points: 901
  },
  {
    name: 'mika',
    track: 'Front-End Development',
    achievements: 15,
    points: 1666
  },
  {
    name: 'heisenberg',
    track: 'Blue Meth Manufacturing',
    achievements: 99,
    points: 9999
  }
];

var student;
var records = '';
var search;

// Print function to print the content
function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}

// Access each students records in the array / a loop is needed to achieve this
for (var i = 0; i < students.length; i++) {
  student = students[i];
  console.log(student);
  search = prompt('Please enter a student\'s name to see his records: ');
  search = search.toLocaleLowerCase();
  console.log(search);
  if (search === student.name) {
    records += '<h2><strong>Student: ' + student.name + '</strong><h2>';
    records += '<p>Track: ' + student.track + '</p>';
    records += '<p>Points: ' + student.points + '</p>';
    records += '<p>Achievements: ' + student.achievements + '</p>';
    break;
  } else if (search === 'quit') {
    break;
  }
}

// Print the students' name; track, achievments and points
print(records);

我需要的是能够从第一个提示打印学生的记录，即使他是列表中的最后一个。

Answer 1

你所做的更像是一个猜谜游戏:“在 for 循环中找到当前学生的名字”我不知道你是否还需要答案，但在这里你去:

您只需将提示放在 for 循环之前。出现提示后执行循环，如果找到结果则停止。

var students = [{
    name: 'hacene',
    track: 'Full Stack JavaScript',
    achievements: 12,
    points: 1226
  },
  {
    name: 'dave',
    track: 'PHP Development',
    achievements: 128,
    points: 14868
  },
  {
    name: 'layla',
    track: 'iOS Development',
    achievements: 8,
    points: 901
  },
  {
    name: 'mika',
    track: 'Front-End Development',
    achievements: 15,
    points: 1666
  },
  {
    name: 'heisenberg',
    track: 'Blue Meth Manufacturing',
    achievements: 99,
    points: 9999
  }
];

var student;
var records = '';
var search;

// Print function to print the content
function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}
  search = prompt('Please enter a student\'s name to see his records: ');
// Access each students records in the array / a loop is needed to achieve this
for (var i = 0; i < students.length; i++) {
  student = students[i];
  search = search.toLocaleLowerCase();

  if (search === student.name) {
    records += '<h2><strong>Student: ' + student.name + '</strong><h2>';
    records += '<p>Track: ' + student.track + '</p>';
    records += '<p>Points: ' + student.points + '</p>';
    records += '<p>Achievements: ' + student.achievements + '</p>';
    break;
  }
}

// Print the students' name; track, achievments and points
print(records);

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

您可以在循环中添加 if 语句。

if( search != "quit") {
for (var i = 0; i < students.length; i++) {
  student = students[i];
  search = search.toLocaleLowerCase();

  if (search === student.name) {
    records += '<h2><strong>Student: ' + student.name + '</strong><h2>';
    records += '<p>Track: ' + student.track + '</p>';
    records += '<p>Points: ' + student.points + '</p>';
    records += '<p>Achievements: ' + student.achievements + '</p>';
    break;
  }
}
}

有了它，如果您键入 quit，您将不会进入循环。

即使它不能满足您的要求，更好的方法是使用 find 方法。

var students = [{
    name: 'hacene',
    track: 'Full Stack JavaScript',
    achievements: 12,
    points: 1226
  },
  {
    name: 'dave',
    track: 'PHP Development',
    achievements: 128,
    points: 14868
  },
  {
    name: 'layla',
    track: 'iOS Development',
    achievements: 8,
    points: 901
  },
  {
    name: 'mika',
    track: 'Front-End Development',
    achievements: 15,
    points: 1666
  },
  {
    name: 'heisenberg',
    track: 'Blue Meth Manufacturing',
    achievements: 99,
    points: 9999
  }
];

var student;
var records = '';
var search;



// Print function to print the content
function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}
function write(student) {
    records += '<h2><strong>Student: ' + student.name + '</strong><h2>';
    records += '<p>Track: ' + student.track + '</p>';
    records += '<p>Points: ' + student.points + '</p>';
    records += '<p>Achievements: ' + student.achievements + '</p>';
    print(records);
}


search = prompt('Please enter a student\'s name to see his records: ');
student = students.find((element) => {
  if (element.name == search) {
    return true;
  }
})
if (student) {
  write(student);
  
};

// Print the students' name; track, achievments and points

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