在javascript中使用for循环在数组中搜索值

Question

我在javascript中搜索数组中的值，这是我的代码。

HTML

<input type="text" placeholder="enter here" id="textvalue">
<button id="checkbutton">check</button>

使用Javascript

let arr = ["boy", "cat", "dog"];
let txtval = document.querySelector("#textvalue");
let chkbutt = document.querySelector("#checkbutton");

chkbutt.addEventListener("click", arraycheck);

function arraycheck () {
 for(i=0; i<arr.length; i++) {
   if(txtval.value==arr[i]) {
     alert("match found for " + txtval.value)
     }
  else {
   alert("its not there")
    }
 }
}

此刻，当我进入“狗”时，我一直警告说“它不存在”。它打印“它不在那里”两次，然后打印“匹配找到狗”。我希望只有在数组中不存在该单词时才会显示警报。我知道这样做是因为我在for循环中有if语句，每次如果数组的索引不匹配，它就会显示警告。但是我该怎么办呢？

Answer 1

你在循环的每一次传递中都会发出警报。相反，最后使用标志和警报：

function arraycheck () {
    var found = false; // *** The flag
    for (var i=0; !found && i<arr.length; i++) {
//                ^^^^^^^^^---- *** Stop looping if we find it
        if (txtval.value==arr[i]) {
            found = true; // *** Set the flag, it was found
        }
    }
    if (found) {
        alert("match found for " + txtval.value);
    } else {
        alert("its not there");
    }
}

或者我们可以直接使用==的结果：

function arraycheck () {
    var found = false; // *** The flag
    for (var i=0; !found && i<arr.length; i++) {
//                ^^^^^^^^^---- *** Stop looping if we find it
        found = txtval.value==arr[i]; // *** Set the flag if it was found
    }
    if (found) {
        alert("match found for " + txtval.value);
    } else {
        alert("its not there");
    }
}

（旁注：除非你在某个你没有展示的地方宣布i，否则你的代码将成为The Horror of Implicit Globals的牺牲品[这是我贫血的小博客上的帖子]。声明你的变量。我在上面的例子中添加了i的声明。）

---

但是，已经有了一个功能（实际上是两个）：includes（在较新的JavaScript引擎上）和indexOf（在旧版本上）：

function arrayCheck() {
    var found = arr.includes(txtval.value); // <===
    if (found) {
        alert("match found for " + txtval.value)
    } else {
        alert("its not there")
    }
}

或使用found在旧浏览器上的indexOf部分：

var found = arr.indexOf(txtval.value) != -1;

---

在评论中你问：

我想知道你是否也可以使用“return”来停止代码中的循环？

是的，这是在这种特定情况下执行此操作的另一种方法，因为退出函数（使用return）会退出循环：

function arraycheck () {
    for (var i=0; i<arr.length; i++) {
        if (txtval.value==arr[i]) {
            alert("match found for " + txtval.value);
            return;
        }
    }
    alert("its not there");
}

Answer 2

您可以简化使用indexOf方法，

if(arr.indexOf(txtval.value) > -1)

DEMO

let arr = ["boy", "cat", "dog"];
let txtval = document.querySelector("#textvalue");
let chkbutt = document.querySelector("#checkbutton");

chkbutt.addEventListener("click", arraycheck); 

function arraycheck () {
if(arr.indexOf(txtval.value) > -1)
  {
   alert("match found");
  }
  else {
   alert("its not there");
    }
 }

<input type="text" placeholder="enter here" id="textvalue">
<button id="checkbutton">check</button>

Answer 3

使用Array的includes()以更简单，更清晰的方式尝试以下方法：

let arr = ["boy", "cat", "dog"];
let txtval = document.querySelector("#textvalue");
let chkbutt = document.querySelector("#checkbutton");

chkbutt.addEventListener("click", arraycheck);

function arraycheck () {
  if(arr.includes(txtval.value)){
    alert("match found for " + txtval.value)
  }
  else{
    alert("its not there")
  }
}

<input type="text" placeholder="enter here" id="textvalue">
<button id="checkbutton">check</button>

Answer 4

创建一个变量，当找到匹配项时，该变量将变为true。然后，如果在循环之后变量仍然为假，则找不到匹配。

或者更好的是，使用lodash过滤器。它简化了循环过程。

Answer 5

您可以尝试使用JavaScript txtval.value Array方法在数组中找到indexOf()的索引。

如果值存在，它需要输入值并输出Array中该值的索引号。

由于javascript数组索引从0开始，因此如果该值存在，则该方法将返回大于-1的整数（数组中的索引）值。

所以，在你的情况下，

function arraycheck () {
    var index = arr.indexOf(txtval.value);
    if(index > -1){
        //alert for found match
    }else{
        //alert for no match found
    }
}