检查值是否与 JS ES6 中数组中的任何其他值匹配答案

【问题标题】：Check if value matches any of the other values in array in JS ES6检查值是否与 JS ES6 中数组中的任何其他值匹配
【发布时间】：2019-10-29 09:49:48
【问题描述】：

我已经尝试了一些东西。不知道哪里出错了。

我有一个表格，用户需要在其中输入所有参加的人：

第 1 个人
名称
出生日期
电子邮件

第二个人
名称
出生日期
电子邮件

等

我需要确定任何“电子邮件”值是否相同。

所以我原本想得到所有的输入：

let checkEmails = document.querySelectorAll("[data-email='email']");

当每一个更新时，运行一个函数来检查并传递值：

for (const inputs of Array.from(checkEmails)) {
    inputs.onchange = function(){
        const value = this.value;
        checkMatchingEmails(value);
    };
}

首先我尝试使用“includes”方法，但它总是返回“不匹配”，不知道如何调试，所以我尝试了不同的方法。

function checkMatchingEmails(value){

    if (Array.from(checkEmails).includes(({ value }) == value)) {
        console.log("matches");
    } else {
        console.log("doesnt match");
    }
}
checkMatchingEmails();

如果您可以在这里看到我的问题，请停止阅读，因为我只是提到了我尝试过的其他方法：

另一种方法：

function checkMatchingEmails(value){

    let checkEmailValues = document.querySelectorAll("[data-pnr-field='passportNumber'].value");

    for (const inputValues of Array.from(checkEmailValues)) {

        if(inputValues == value) {
            console.log("matches");
        } else {
            console.log("doesnt match");
        }
    }

}
checkMatchingEmails();

希望你能帮助我。

【问题讨论】：

标签： javascript ecmascript-6 include

【解决方案1】：

解决了：

let checkEmails = [];

const checkEmailValues = document.querySelectorAll("[data-pnr-field='passportNumber']");

checkEmailValues.forEach(item => item.addEventListener('change', checkMatchingEmailValues));

function checkMatchingEmailValues(e) {
    const email = e.target.value;
    if(checkEmails.includes(email)){
        console.log("email matches");
        console.log(e);
    } else {
        console.log("email doesnt match");
        checkEmails.push(email);
    }
    console.log(checkEmails);
}

【讨论】：

【解决方案2】：

您的代码中有几个错误。

错误 1

document.querySelectorAll("[data-email='email']") 返回一个NodeList。

您无法检查 includes 是否为 string 值，并且将始终返回 false。

您应该查看Array.includes 上的文档

错误 2

inputs.onchange = function(){

这不是我们添加事件监听器的方式。

使用inputs.addEventListener("change", function)

请参阅此处的文档?Event handlers

可能的解决方案

您应该基本上创建一个字符串值的Array 并在其上创建一个includes。此外，您可能需要跟踪每个元素的索引。

粗略的实现可能如下所示。您可以运行 sn-p 并查看验证错误。

let checkEmails = document.querySelectorAll("[data-email='email']");
let emailsEntered = [];
for (let i = 0; i < checkEmails.length; i++) {
  checkEmails[i].addEventListener("change", (e) => {
    const value = e.target.value;
    if (!checkMatchingEmails(value)) {
      emailsEntered[i] = value;
      e.target.nextElementSibling.innerHTML = "";
    } else {
      e.target.nextElementSibling.innerHTML =
        `This value is already entered at index ${emailsEntered.indexOf(value)}`
    }
    console.log(emailsEntered);
  });
}

function checkMatchingEmails(value) {
  return emailsEntered.includes(value);
}

<input type="text" placeholder="Enter a value" data-email="email" />
<div id="error" style="color:red"></div>
<input type="text" placeholder="Enter a value" data-email="email" />
<div id="error" style="color:red"></div>
<input type="text" placeholder="Enter a value" data-email="email" />
<div id="error" style="color:red"></div>
<input type="text" placeholder="Enter a value" data-email="email" />
<div id="error" style="color:red"></div>

请注意，这只是一个粗略的草案，并不是所有的边缘情况都可以处理。

【讨论】：