設置屬性后刪除對象

Question

我有一個名為“學校” witch的類，該類包含對“學生”對象執行操作的方法，該對象是該類的屬性。

我還具有三種HTML表單，這些表單允許您添加瞳孔，刪除瞳孔以及為瞳孔設置特定的屬性。

除此條件外，它們都起作用：如果我設置了一個瞳孔屬性，然后嘗試刪除同一瞳孔，則它不起作用。 此錯誤記錄到控制台：

未被捕獲的TypeError：無法讀取HTMLFormElement.delPupil（（index）：195）上School.findPupilProperty（（index）：59）處未定義的屬性'id'

 class School { constructor(name, level, pupils) { this.name = name; this.level = level; this.pupils = pupils; } getPupil(name) { name = this.nameUpperCase(name); let pupil = this.pupils.find(function(obj) { return obj.name === name; }); return pupil; } getPupilsByProperty(property, value) { let pupilArray = this.pupils.filter(function(obj) { return obj.property === value; }); return pupilArray; } findPupilProperty(property, value, find) { if (property === 'name') { value = this.nameUpperCase(value); } let desired_pupil = this.pupils.find(function(obj) { return obj[property] === value; }); return desired_pupil[find]; } generateNewPupilID() { for (let i = 0; i < this.pupils.length; i++) { if (i === this.pupils.length - 1) { return this.pupils[i].id + 1; } } } addPupil(name, age, grades = [], attendance = 0) { // name = this.nameUpperCase(name); let id = this.generateNewPupilID(); this.pupils.push({ id: id, name: name, age: age, grades: grades, attendance: attendance }); } deletePupil(name) { name = this.nameUpperCase(name); let pupil = this.pupils.find(function(obj) { return obj.name === name; }); let index = this.pupils.findIndex(function(obj) { return obj.name === name; }); this.pupils.splice(index, 1); } nameUpperCase(name) { name = name.split(' '); let first_name_arr = name[0].split(''); let last_name_arr = name[1].split(''); for(let i = 0; i < first_name_arr.length; i++) { if(i === 0) { first_name_arr[0] = first_name_arr[0].toUpperCase(); } else { first_name_arr[i] = first_name_arr[i].toLowerCase(); } } for(let x = 0; x < last_name_arr.length; x++) { if(x === 0) { last_name_arr[0] = last_name_arr[0].toUpperCase(); } else { last_name_arr[x] = last_name_arr[x].toLowerCase(); } } let strname = first_name_arr.join('') + ' ' + last_name_arr.join(''); return strname; } setPupilProperty(name, property, value) { name = this.nameUpperCase(name); let pupil = this.pupils.find(function(obj) { return obj.name === name; }); property = property.toLowerCase(); pupil[property] = value; } getGradesByPupil(name, subject) { this.pupils.forEach(function(obj) { if (obj.name === name) { if (!subject) { return obj.grades; } else { return obj.grades.subject; } } }); } } let pupils = [{ id: 1, name: 'John Doe', age: 17, grades: { 'English': 9, 'Maths': 9, 'Sociology': 'A*' }, attendance: 12 }, { id: 2, name: 'Jane Doe', age: 17, grades: { 'English': 7, 'Maths': 6, 'Sociology': 'B' }, attendance: 92 } ]; const school = new School('somethingschool', 'high', pupils); function displayPupil(obj) { document.getElementById('pupils').innerHTML += ` <div id=pupil-${obj.id}> <h3>${obj.name}</h3> <p>ID: ${obj.id}</p> <p>Age: ${obj.age}</p> <p>Attendance: ${obj.attendance}</p> </div> `; } school.pupils.forEach(function(obj) { displayPupil(obj); }); document.getElementById('addpupil').addEventListener('submit', addPupil); document.getElementById('delpupil').addEventListener('submit', delPupil); document.getElementById('setprop').addEventListener('submit', setProp); function addPupil(e) { e.preventDefault(); var form = document.getElementById('addpupil'); var name = school.nameUpperCase(form.name.value); var age = form.age.value; school.addPupil(name, age); var pupil = school.getPupil(name); displayPupil(pupil); } function delPupil(e) { e.preventDefault(); var form = document.getElementById('delpupil'); var name = form.name.value; console.log(name); var id = school.findPupilProperty('name', name, 'id'); school.deletePupil(name); document.getElementById('pupil-' + id).innerHTML = ''; } function setProp(e) { e.preventDefault(); var form = document.getElementById('setprop'); var name = form.name.value; var prop = form.prop.value; var value = form.value.value; var id = school.findPupilProperty('name', name, 'id'); school.setPupilProperty(name, prop, value); document.getElementById('pupil-' + id).innerHTML = ''; displayPupil(school.getPupil(name)); } 

 <div id='pupils'> </div> <h2> Functions </h2> <h3> Add Pupil </h3> <form id='addpupil'> Name: <input type='text' name='name'><br/> Age: <input type='text' name='age'> <input type='submit' name='submit'> </form> <h3> Delete Pupil </h3> <form id='delpupil'> Name: <input type='text' name='name'> <input type='submit' name='submit'> </form> <h3> Set Pupil Property </h3> <form id='setprop'> Name: <input type='text' name='name'><br/> Property: <input type='text' name='prop'><br/> Value: <input type='text' name='value'><br/> <input type='submit' name='submit'> </form> 

有人能找出問題所在嗎？

Answer 1

因為return desired_pupil[find]; 在findPupilProperty ，

當.find()找不到瞳孔時，它返回undefined而您基本上是在返回undefined['id']從而導致錯誤，

您應該添加一張支票，例如替換

return desired_pupil[find];

同

return desired_pupil ? desired_pupil[find] : null;

null只是一個建議，之后返回您需要的正確值。