通过数组的循环（for）迭代

Question

我做了一个简单的程序，用作电话簿。 当用户在输入字段中输入姓名时，程序会搜索包含姓名和号码的对象数组，如果找到姓名，则输出姓名和电话号码。 如果找不到该名称，它会让用户知道。 但是，当我键入名称时，即使数组包含给定名称，结果仍然是“未找到名称”。 这是代码

const phonebook = [
 {name : `Adam`, number : `001`},
 {name : `Anna`, number : `002`},
]

const input = document.querySelector('input');
const btn = document.querySelector('button');
const para = document.querySelector('p');

btn.addEventListener ('click', function () {
 let searchName = input.value.toLowerCase();
 input.value = '';
 input.focus();

 for (let i = 0; i < phonebook.length; i++) {
     if (searchName === phonebook[i].name) {
         para.textContent = `${phonebook[i].name's number is ${phonebook[i].number}.`;
         break;
     } else {
         para.textContent = `Name not found in phonebook';
     }
}
});

Answer 1

para.textContent = ${phonebook[i].name} (<- missing closing bracket) 's number is ${phonebook[i].number}. ;

• 你在那里错过了一个丢失的花括号。
• 您正在将输入转换为小写，但您的数据源包含大写字母。 然后将两者都转换为更低。

如果不是需要循环和 onClick 事件的特定情况，我建议：

• 使用 keydown 事件监听器
• 使用过滤器

    btn.addEventListener(keydown, function {
            phonebook.filter((x) => x.name === input.value)
             if (phonebook.length === 1) {para.textContent = `${phonebook[0].name}'s number is ${phonebook[0].number}`}
            else if (phonebook.length === 0) {para.textContent = "not found"};
            })

或类似的东西。 因此，您的代码在向用户提供反馈方面更具响应性。