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

【问题标题】：Learning loops, can't figure out how this one works学习循环，无法弄清楚这个是如何工作的
【发布时间】：2020-08-28 18:33:07
【问题描述】：

我在这里的第一个问题：我正在从 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，只有在数组中找不到名称时才会这样做。难道'else'下的代码每次不满足'if'条件时都会执行吗？

如果我错过了一些 StackOverflow 礼仪，我们深表歉意。

【问题讨论】：

它正在做你认为的，认为它不是“返回”那个值。该函数从不返回任何内容。它确实如此，但是一旦找到联系人时更新文本，它就会退出循环。
@Pointy 我实际上没有包含负责在名称不匹配时显示“未找到联系人”的 HTML 代码。你可以在这里尝试运行它：mdn.github.io/learning-area/javascript/building-blocks/loops/…
更新 HTML 与“返回”某些东西不同。
@Pointy 啊我的坏
这段代码让人想起许多初学者在搜索某些东西时常犯的错误，我在this question 中对此进行了描述。但它有一个显着的区别，特定于错误消息在 DOM 中的显示方式。它仍然是一种令人困惑的编写方式。

标签： javascript loops for-loop if-statement break

【解决方案1】：

是的，你是对的，每次splitContact[0].toLowerCase() !== searchName都会设置para.textContent，但是不会结束，所以不会break循环或者不会return，所以一直到结束

【讨论】：

哦，它依赖于在找到后更改值，而不是最后将其设置为“未找到联系人”。我应该早点想出来的。谢谢！

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

我无法理解这段代码如何没有返回“未找到联系人”。

这段代码没有返回任何东西，它正在执行一个操作。它可能看起来像一个挑剔，但它是一个重要的区别。因为返回会结束函数的执行，但执行操作不会。

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

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

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

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

因此，循环之后的状态将是 else 块执行了多次，或者 if 块是最后执行且最后更改状态的事情。

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

【讨论】：