如何检测邮箱地址是否重复？JavaScript Set空值/未定义值误判问题

问题描述 #

我用JavaScript的Set检测邮箱地址是否重复，逻辑是如果字段数量大于Set的大小，就判定存在重复邮箱。但Set会把空值和undefined当成同一个值，比如当第1、2个字段为空时，Set里只存一个undefined，错误触发重复邮箱提示。

我的代码实现如下：

useEffect(() => {
        let count = 0;
        const uniqueEmails = new Set(emailsAndRoles.map((emailsAndRole) => emailsAndRole.email));
       
        console.log('uniqueEmails', uniqueEmails);

        let alreadyExist = false;
        for (let i = 0; i < emailsAndRoles.length; i++) {
            const email = emailsAndRoles[i].email;
            if (allUsersEmail.includes(email)) {
                alreadyExist = true;
                break;
            }
        }


        if (uniqueEmails.size < emailsAndRoles.length || alreadyExist) {
            setDuplicateEmailMessage('You have entered duplicate email');
            console.log(uniqueEmails.size, emailsAndRoles.length);
        } else {
            setDuplicateEmailMessage('');
            console.log(uniqueEmails.size, emailsAndRoles.length);
        }

        // eslint-disable-next-line
    }, [emailsAndRoles]);

解决方案 #

针对这个问题，提供两种实用的处理方案：

方案1：给空值/undefined添加唯一标识 #

在生成Set时，为空值或undefined的邮箱字段附加当前项的索引作为唯一标记，让每个空输入都被Set识别为不同元素：

const uniqueEmails = new Set(emailsAndRoles.map((item, index) => {
  const email = item.email;
  // 对空值/undefined添加唯一索引后缀
  return email == null ? `empty-${index}` : email;
}));

方案2：拆分统计逻辑，单独处理有效邮箱 #

过滤出非空邮箱后再用Set检测重复，空邮箱不触发重复提示（更贴合多数业务场景），同时保留原有“检查邮箱是否已存在于系统”的逻辑：

useEffect(() => {
    let alreadyExist = false;
    // 仅检查非空邮箱是否已存在于系统用户中
    for (let i = 0; i < emailsAndRoles.length; i++) {
        const email = emailsAndRoles[i].email;
        if (email != null && allUsersEmail.includes(email)) {
            alreadyExist = true;
            break;
        }
    }

    // 统计非空邮箱的重复情况
    const nonEmptyEmails = emailsAndRoles.map(item => item.email).filter(email => email != null);
    const uniqueNonEmptyEmails = new Set(nonEmptyEmails);
    const hasDuplicateNonEmpty = uniqueNonEmptyEmails.size < nonEmptyEmails.length;

    if (hasDuplicateNonEmpty || alreadyExist) {
        setDuplicateEmailMessage('您输入了重复的邮箱地址');
    } else {
        setDuplicateEmailMessage('');
    }

    // eslint-disable-next-line
}, [emailsAndRoles]);

方案说明 #

• 方案1适合需要严格区分每个空输入项的场景，确保空值不会被误判为重复。
• 方案2更符合常规业务逻辑：未填写的空邮箱无需触发重复提示，仅校验已填写邮箱的重复或存在性。

内容的提问来源于stack exchange，提问作者Vivek Joshi