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")
    }
 }
}

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

Answer 1

您可以使用indexOf方法简化

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

<强>样本

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 2

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

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（在较旧的JavaScript引擎上））：

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;

在评论中你问：

我想知道你是否也可以使用＆＃34;返回＆＃34;来停止我的代码中的循环？

是的，这是在特定情况下执行此操作的另一种方法，因为退出该函数（使用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 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
    }
}

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

5 个答案: