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

Question

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

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

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

此代码不是返回任何东西，它正在执行操作。它可能看起来像个顽固的家伙，但这是一个重要的区别。因为返回将结束函数的执行，但是执行操作将不会。

在不满足'if'条件时，是否会执行'else'下的代码？

的确会！对您而言，这是一个明智的观察。但是，此时的问题不一定是else块是否将完全执行，而是...

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

在这种情况下，else块可以执行与循环迭代一样多的次数，并且什么都不会改变。它一遍又一遍地重复相同的无损操作，什么也没改变。但是，如果曾经执行过if块，则break会导致循环终止。因此，if块将永远不会执行，或者将是要执行的last操作。

因此，循环后的状态将是else块被多次执行，或者if块是最后执行的事情，也是改变状态的最后一件事。

---

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

Answer 2

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

它不返回任何东西，而是将DOM元素的属性设置为某种东西。实际上，它会在每次迭代之前将其设置为Contact not found.，直到（如果）找到要搜索的内容为止，在这种情况下，它将把它设置为找到的字符串，然后退出循环。

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

Answer 3

是的，您是对的，它将在每次para.textContent时设置splitContact[0].toLowerCase() !== searchName，但不会结束，因此它不会break循环，也不会return，因此它将继续到结束