如何在不使用 else 语句的情况下为整个 For 循环执行运行 if 语句？

Question

从似乎的问题继续 即使 if 语句为真，我的代码也总是输出 else 语句，我认为这是因为 for 循环在被拒绝之前没有完全执行，input.value 在data[i].s 中不可用，因此输出始终为“我不明白”即使input.value = "hi"

如何解决？

function senda() {

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

  send.innerText = input.value;
  document.body.appendChild(send);
  for (var i = 0; i < data.length; i++) {
    if (input.value == data[i].s) {
      recv.innerText = data[i].r;
      document.body.appendChild(recv);
    } else {
      recv.innerText = "I don't understand";
      document.body.appendChild(recv);
    }
  }
}

<input>
<button onclick="senda()">-></button>

Answer 1

您的问题是您的for 循环将继续为您的data 数组中的所有条目运行。这意味着即使找到匹配项，循环也会继续运行，这会导致 innerText 被替换，直到最后一项。

有一种简单的方法可以做到这一点：您只需检查用户输入是否与对象数组中嵌套的s 键中的 any 值匹配。您可以使用Array.prototype.findIndex 检索符合您要求的索引。

如果索引大于-1，那么你知道你有一个匹配。否则你可以只返回回退语句，例如：

const foundIndex = data.findIndex(d => d.s === input.value);
if (foundIndex > -1) {
  recv.innerText = data[foundIndex].r;
} else {
  recv.innerText = "I don't understand";
}
      
document.body.appendChild(recv);

为简单起见，您可以将其浓缩为单行：

const foundIndex = data.findIndex(d => d.s === input.value);
recv.innerText = foundIndex > -1 ? data[foundIndex].r : "I don't understand";

当然，只有当嵌套的 s 值在您的数组中是唯一的时，此解决方案才有效。否则，您将始终获得第一个出现的匹配实例。

还有一些额外的提示：

• 不要使用内联 JS 绑定。请改用addEventListener
• 您可能希望将input.value 转换为小写，以便我们可以执行不区分大小写的匹配
• 将data 存储在函数之外：它是一个常量，不必在每次调用函数时都重新声明

请参阅下面的概念验证并应用其他提示：

const data = [{
  "s": "hi",
  "r": "hello"
}, {
  "s": "whats up",
  "r": "alright"
}];

function senda() {
  const input = document.querySelector('input');
  const send = document.createElement('p');
  const recv = send.cloneNode(true);

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

  const foundIndex = data.findIndex(d => d.s.toLowerCase() === input.value.toLowerCase());
  recv.innerText = foundIndex > -1 ? data[foundIndex].r : "I don't understand";

  document.body.appendChild(recv);
}

document.querySelector('button').addEventListener('click', senda);

<input>
<button>-></button>

Answer 2

请添加一行代码。

当输入值等于data[i].s时请加上“i = data.length;”

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

    send.innerText = input.value;
    document.body.appendChild(send);
    for (var i = 0; i < data.length; i++) {
        if (input.value === data[i].s) {
            recv.innerText = data[i].r;
            document.body.appendChild(recv);
            i = data.length;
        } else {
            recv.innerText = "I don't understand";
            document.body.appendChild(recv);
        }
    }
}

<input>
<button onclick="senda()">-></button>

Answer 3

您的代码运行良好。

但它并没有像你想象的那样工作。

数据有2 obejct： 第一个循环

如果它等于hi 并打印hello 不起作用else 语句

第二个循环不等于hi 所以这次else statement 有效

所以如果找到相等的值，你必须打破

如下图

    function senda() {

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

      send.innerText = input.value;
      document.body.appendChild(send);
      var isInputInData = false;
      for (var i = 0; i < data.length; i++) {
        if (input.value == data[i].s) {
          recv.innerText = data[i].r;
          isInputInData = true;
          break;
        }
      }
      if(!isInputInData) recv.innerText = "I don't understand";

      document.body.appendChild(recv);
    }

  <input>
  <button onclick="senda()">-></button>