學習循環，無法弄清楚這個是如何工作的

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 ，所以它會繼續到最后