使用 Java Script 中的 Onclick 按钮事件检查数组中是否存在值答案

【问题标题】：Check Whether a value is present in Array or not using Onclick button event in Java Script使用 Java Script 中的 Onclick 按钮事件检查数组中是否存在值
【发布时间】：2019-09-05 13:00:48
【问题描述】：

我尝试使用 for 循环比较值，在将文本框的值与数组元素进行比较后，它必须打印存在或不存在，如果存在，它必须显示警报消息并且无法添加值如果数组是唯一的，则必须将值添加到数组中

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>
<input type="text" id="text1"></input>
<input type="button" id="button1" value="Add Email" onclick="add_element_to_array();"> </input>
<p id="Result"></p>
<p id="r"></p>
<script>
var x = 0;
var array = Array();



function add_element_to_array()
{


function checkValue(value,array){
  var status = 'Not exist';

  for(var i=0; i<array.length; i++){
    var name = array[i];

    if(name == value){
      status = 'Exist';

    }
     document.getElementById("r").value = "status";
  }
}

 array[x] = document.getElementById("text1").value;
 alert("Element: " + array[x] + " Added at index " + x);
 x++;
 document.getElementById("text1").value = "";


 var e = "<hr/>";  

   for (var y=0; y<array.length; y++)
   {

   }
   document.getElementById("Result").innerHTML = e;
}

</script>

</body>
</html>

【问题讨论】：

我认为可以在下面找到类似的答案。检查这个link

标签： javascript arrays

【解决方案1】：

您不需要使用循环，但可以使用includes() 来检查数组是否包含某个值。

代码示例：

function checkValue(value, array) {
    var status = array.includes(value) ? 'Exist' : 'Not exist' ;
    document.getElementById("r").value = status;
}

注意： IE 浏览器不支持includes()。在这种情况下，您可以使用indexOf()

var status = array.indexOf(value) !== -1 ? 'Exist' : 'Not exist';

indexOf() 如果存在则返回索引号，如果不存在则返回-1。

也可以试试Array.prototype.find()。

【讨论】：

【解决方案2】：

<h2>JavaScript Arrays</h2>
<input type="text" id="text1"></input>
<input type="button" id="button1" value="Add Email" onclick="add_element_to_array();"> </input>
<p id="Result"></p>
<p id="r"></p>
<script>
    var x = 0;
    var array = Array();



    function add_element_to_array() {


        function isValueInArrayAlready(value, array) {

            return array.indexOf(value) !== -1 ? true : false;
        }

        if(isValueInArrayAlready(document.getElementById("text1").value, array)) {
            alert("Element: " + document.getElementById("text1").value + " already exists, can't be added");
        } else {
            array[x] = document.getElementById("text1").value;
            alert("Element: " + array[x] + " Added at index " + x);
            x++;
        }

        document.getElementById("text1").value = "";


        var e = "<hr/>";

        for (var y = 0; y < array.length; y++) {

        }
        document.getElementById("Result").innerHTML = e;
    }

</script>

【讨论】：

【解决方案3】：

您可以使用findIndex() 方法实现此目的

 const isPresent = !!(array.findIndex((f) => { return f.name === 'Neel' }) > -1);
 console.log(isPresent);

检查下面的sn-p

 const array = [{ name: 'Neel'}, { name: 'Veer'}];
 const isPresent = !!(array.findIndex((f) => { return f.name === 'Neel' }) > -1);
 console.log(isPresent);

你可以通过制作一个函数来让它更加动态

const isPresent = (array, key, value) => {
const isPresent = !!(array.findIndex((f) => { return f[key] === value }) > -1);
if(!isPresent){
   array.push({ [key]: value });
}
return { array, isPresent };
}

const array = [{ name: 'Neel'}, { name: 'Veer'}];

console.log(isPresent(array, 'name', 'Neel'));
console.log(isPresent(array, 'name', 'Neel2'));
console.log(isPresent(array, 'name', 'Neel3'));

【讨论】：