JS中for循环内if匹配成功仍触发else输出的问题如何解决？

问题根源 #

你的代码逻辑存在两个核心问题：

• 循环逻辑设计错误：每遍历一条匹配规则就执行一次判断输出，而非先全局查找是否存在匹配项。比如输入hi时，第一条规则匹配成功输出hello，第二条规则匹配失败又会输出I don't understand，最终你看到的就是后者的输出结果
• 重复操作同一个DOM节点：你只提前创建了一个recv节点，多次调用appendChild只会把同一个节点移动位置，并不会新增多个节点

修复方案 #

调整逻辑：先遍历所有匹配规则，记录匹配到的回复内容，遍历完成后再统一判断是否有匹配项、输出对应内容。
修正后的JS代码如下：

function senda() {
  var input = document.querySelector('input'),
    send = document.createElement('p'),
    data = [{
      "s": "hi",
      "r": "hello"
    }, {
      "s": "whats up",
      "r": "alright"
    }];

  send.innerText = input.value;
  document.body.appendChild(send);

  // 先查找匹配的回复
  let reply = "I don't understand";
  for (var i = 0; i < data.length; i++) {
    if (input.value === data[i].s) {
      reply = data[i].r;
      // 匹配到就可以提前退出循环
      break;
    }
  }

  // 最后统一创建回复节点输出
  const recv = document.createElement('p');
  recv.innerText = reply;
  document.body.appendChild(recv);
}

HTML代码无需修改即可正常运行。

内容的提问来源于stack exchange，提问作者Enceladus