使用Fetch API获取双数组后循环逻辑异常求助

核心问题梳理 #

你的代码存在4个关键错误，导致循环匹配逻辑完全失效：

1. 数组嵌套错误
   你用arrayProfanity.push(data.badwords)将整个违禁词数组塞进了空数组，最终arrayProfanity变成了二维数组（比如[["a","b","c"]]），同理白名单数组也是嵌套结构。循环时profanity1[i]取到的是整个子数组，和用户输入的字符串永远不相等，自然只会走else分支。

2. 循环变量混用
   白名单循环里错误使用了第一个循环的变量i，第一个循环结束后i的值等于违禁词数组的长度（比如1），此时whiteList1[i]是undefined，必然和用户输入不匹配，直接触发拒绝提示。

3. 白名单逻辑错误
   白名单循环只要第一个元素不匹配就直接返回false，导致只要输入不在白名单第一个位置就被拒绝，完全失去了遍历判断的意义。

4. 全局循环变量
   循环里的i和j未用let声明，会成为全局变量，可能引发其他代码的意外问题。

修正后的完整代码 #

const wordsData = './profanity.json';
let nickname = document.getElementById("nickname");

function filter1() {
    fetch(wordsData)
        .then((data) => data.json())
        .then((data) => {
            // 直接赋值数组，避免嵌套
            const arrayProfanity = data.badwords;
            const arrayWhiteList = data.whitelist;
            console.log(arrayProfanity);
            console.log(arrayWhiteList);
            
            const userInput = nickname.value.trim(); // 去除输入首尾空格，避免匹配误差
            let isProfanity = false;

            // 遍历违禁词数组
            for (let i = 0; i < arrayProfanity.length; i++) {
                if (arrayProfanity[i] === userInput) {
                    console.log("匹配到违禁词");
                    alert("Sorry not allowed, why not try a different nickname?");
                    isProfanity = true;
                    break; // 找到匹配立即终止循环
                }
            }

            if (isProfanity) return false;

            // 遍历白名单数组
            let isWhitelisted = false;
            for (let j = 0; j < arrayWhiteList.length; j++) {
                if (arrayWhiteList[j] === userInput) {
                    console.log("匹配到白名单");
                    alert("that's a good nickname!");
                    isWhitelisted = true;
                    break;
                }
            }

            if (isWhitelisted) return true;

            // 既非违禁词也不在白名单的情况
            alert("Sorry not allowed, why not try a different nickname?");
            return false;
        })
        .catch((error) => {
            console.error("数据加载失败:", error);
            alert("验证服务暂时不可用，请稍后再试");
        });
};

额外优化说明 #

• 用trim()处理用户输入，避免空格导致的匹配失败
• 用变量标记匹配状态，替代循环内直接return，逻辑更清晰易维护
• 增加catch块处理fetch请求失败的情况（比如JSON文件路径错误）
• 使用严格相等运算符===替代==，避免类型转换引发的意外匹配

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