在 Javascript 数组中循环

Question

我有一个简单的问题，我不确定为什么没有正确返回数组内容。我很确定这很简单，但不知何故我没有得到我想要的结果。场景是变量 "compare" 被设置为一个值，例如"apple" 并且我在数组中循环，如果 apple 与索引匹配，则将其打印到文本字段中。它不这样做，它总是说 "not the same" 值。对于有价值的狗，它有效。它似乎到达最后一个数组然后进行比较。请帮忙

下面的代码

<!DOCTYPE html>
<html>
<body>

<script>
function myFunction() {
var text = "";
var i;
var arr = ["apple", "banana", "carrot", "dog"];
var compare = "apple";

for (i = 0; i < arr.length; i++) {

    if (arr[i] == compare) {text = "The value is " + arr[i] + "<br>";  }

    else if (compare == "" || compare == null) { text = "The value is blank"; }

    else if (arr[i] != compare) {text = "not the same"; }

else {text ="some error";}

    }

     document.getElementById("demo").innerHTML = text;
}
</script>
<p>Click the button to do a loop with a break.</p>

 <button onclick="myFunction()">Try it</button>


<p id="demo"></p>

</body>
</html>

Answer 1

It seems like it reaches the last array then does comparisons. Help please.

实际上，是的，因为您永远不会停止循环。因此，您之前对 document.getElementById("demo").innerHTML 所做的所有作业都将被最后一个作业覆盖。

如果您想在找到匹配项时停止，请使用break 跳出循环。

如果您希望该元素具有已发生事件的列表（我认为可能是您想要做的，很难说），构建列表在 text 中向上，然后在末尾赋值：

if (compare == "" || compare == null) {
    // Doesn't make sense to loop in this case, presumably
    text = "The value is blank";
} else {
    text = "";
    for (i = 0; i < arr.length; i++) {

        if (arr[i] == compare) {
            text += "The value matches " + arr[i] + "<br>";
            //   ^--- note the +=
        } else {
            text += "The value doesn't match " + arr[i] + "<br>";
            //   ^--- note the +=
        }
    }
}
document.getElementById("demo").innerHTML = text;

Answer 2

你永远不会打破 for 循环。当满足if条件时，必须使用break;退出循环。

这是您的解决方案：http://jsfiddle.net/urahara/rvLyfsto/

和您的代码：

function myFunction() {
    var text = "";
    var i;
    var arr = ["apple", "banana", "carrot", "dog"];
    var compare = "apple";

    for (i = 0; i < arr.length; i++) {

        if (arr[i] == compare) {
            text = "The value is " + arr[i] + "<br>";
            break;
        } else if (compare == "" || compare == null) {
            text = "The value is blank";
            break;
        } else if (arr[i] != compare) {
            text = "not the same";
            break;
        } else {
            text = "some error";
            break;
        }

    }

    document.getElementById("demo").innerHTML = text;
}

干杯！

Answer 3

function print(msg) {
  document.getElementById("demo").innerHTML += msg + '</br>';
}

function myFunction() {
  var text = "";
  var i;
  var arr = ["apple", "banana", "carrot", "dog"];
  var compare = document.getElementById('compare').value;
  if (!compare) {
    print('Compare is empty');
    return;
  } else {
    print('Comparing with ' + compare);
  }

  for (i = 0; i < arr.length; i++) {
    if (arr[i] == compare) {
      print("The value is at index " + i + " is " + arr[i]);
      return; //results found, break out of the for loop
    } else if (arr[i] != compare) {
      print("not the same");
    } else {
      print("some error");
    }
  }
  print("Could not find " + compare + " in array");
}

<!DOCTYPE html>
<html>

<body>

  <script>
  </script>
  <p>Click the button to do a loop with a break.</p>

  <input type="text" id="compare" placeholder="Compare to" />
  <button onclick="myFunction()">Try it</button>


  <p id="demo"></p>

</body>

</html>

出于性能原因，最好在循环开始之前验证 compare 的值。您可以使用 break、continue 或 return 关键字跳出循环。

在 Javascript 数组中循环

Looping in Javascript array

javascript

arrays

for-loop