学习循环，无法弄清楚这个是如何工作的

Question

我在这里的第一个问题：我正在从 developer.mozzila.org 学习循环，这是“break;”的一个例子用户提供姓名，此代码搜索数组联系人并返回号码。

const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
const para = document.querySelector('p');
const input = document.querySelector('input');
const btn = document.querySelector('button');

btn.addEventListener('click', function() {
  let searchName = input.value.toLowerCase();
  input.value = '';
  input.focus();
  for (let i = 0; i < contacts.length; i++) {
    let splitContact = contacts[i].split(':');
    if (splitContact[0].toLowerCase() === searchName) {
      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
      break;
    } else {
      para.textContent = 'Contact not found.';
    }
  }
});

我无法理解此代码如何不返回“未找到联系人”。 在每次迭代中。 相反，根据 MDN，只有在数组中找不到名称时才会这样做。 难道不是每次不满足'if'条件时都会执行'else'下的代码吗？

如果我错过了一些 StackOverflow 礼节，谢谢并道歉。

Answer 1

我无法理解此代码如何不返回“未找到联系人”。

此代码不返回任何内容，它正在执行操作。 它可能看起来像一个挑剔，但它是一个重要的区别。 因为返回会结束 function 的执行，但执行一个操作不会。

难道不是每次不满足'if'条件时都会执行'else'下的代码吗？

确实会。 这是您的敏锐观察。 但此时的问题不一定是else块是否会被执行，而是......

1. 执行else块时会发生什么？
2. if块有什么不同？
3. 循环结束后系统的 state 会是什么？

在这种情况下， else块可以执行与循环迭代一样多的次数，并且什么都不会改变。 它一遍又一遍地重复相同的非破坏性操作，没有任何改变。 但是如果if块曾经执行过， break会导致循环终止。 因此，要么if块永远不会执行，要么它将是最后一个执行的操作。

因此，循环后的 state 要么是else块执行了多次，要么是if块是最后一个执行的东西，也是最后一个改变 state 的东西。

---

考虑一个简单的思想实验示例，如果将变量设置为0一百次会发生什么？ 它是0 。 如果您将其设置为0一百次然后将其设置为1会发生什么？ 是1 。 多次重复前一个操作对生成的 state 没有影响。 人们可能会争论性能影响，但如果这可以忽略不计（在这里），那么它可能不值得解决。

Answer 2

我无法理解此代码如何不返回“未找到联系人”。 在每次迭代中。 相反，根据 MDN，只有在数组中找不到名称时才会这样做。 难道不是每次不满足'if'条件时都会执行'else'下的代码吗？

它没有返回任何东西，而是将 DOM 元素的属性设置为某种东西。 它确实将其设置为Contact not found. 对于每次迭代，直到（如果）它找到它正在搜索的内容，在这种情况下，它将把它设置为找到的字符串，然后跳出循环。

它效率低下，但最终结果很可能是您所期望的。

Answer 3

是的，你是对的，它会在每次para.textContent splitContact[0].toLowerCase() !== searchName时设置 para.textContent ，但它不会结束，所以它不会break循环或不会return ，所以它会继续到最后