如何对比字母数组与单词数组，找出无对应首词的字母

我有两个数组：一个是单词数组，另一个是字母数组。需要找出字母数组里没有对应首词的字母——也就是单词数组中不存在以该字母开头的单词的那些字母。

举个例子：

• 单词数组 arr1 = ["apple", "bee", "mom", "dog"]
• 字母数组 arr2 = ["a","b","c","d"]
  结果要找出字母c，因为没有单词以它开头。

我做了一组字母按钮，每个按钮对应以此字母开头的内容，现在想高亮那些没有对应内容的字母。试了下面的代码，用===判断时能正常工作，但换成!=就失效了：

for(let i = 0; i < searchItemsTitle.length; i++) {
    for(let e = 0; e < letterButtons.length; e++) {
        if(searchItemsTitle[i].innerText.charAt(0) === letterButtons[e].innerText.charAt(0)) {
            letterButtons[e].classList.add("a-z-grey-letter");
            console.log(letterButtons[e].innerText)
        }
    }
}

为啥用!=会失效？因为你原来的逻辑是遍历每个单词，找到匹配的字母按钮就加灰类，但如果换成!=，同一个按钮会被多次触发——比如单词apple和字母b不匹配，就会给b加类，但之后单词bee又会和b匹配，逻辑直接乱套。

正确的做法应该反过来：

1. 先给所有字母按钮加上高亮类（标记为“无对应内容”）
2. 再遍历所有单词，找到对应的字母按钮，移除高亮类
3. 最后剩下带高亮类的按钮就是你要找的目标

简化版代码（用forEach和find） #

// 第一步：给所有按钮先加上高亮类
letterButtons.forEach(btn => btn.classList.add("a-z-grey-letter"));

// 第二步：遍历单词，移除匹配按钮的高亮类
searchItemsTitle.forEach(item => {
    const firstChar = item.innerText.charAt(0);
    const matchedBtn = Array.from(letterButtons).find(btn => btn.innerText.charAt(0) === firstChar);
    if(matchedBtn) {
        matchedBtn.classList.remove("a-z-grey-letter");
    }
});

兼容你的双层循环写法 #

// 先给所有按钮加上高亮类
for(let e = 0; e < letterButtons.length; e++) {
    letterButtons[e].classList.add("a-z-grey-letter");
}

// 遍历单词，找到匹配按钮就移除高亮类
for(let i = 0; i < searchItemsTitle.length; i++) {
    const wordFirstChar = searchItemsTitle[i].innerText.charAt(0);
    for(let e = 0; e < letterButtons.length; e++) {
        if(wordFirstChar === letterButtons[e].innerText.charAt(0)) {
            letterButtons[e].classList.remove("a-z-grey-letter");
            break; // 找到匹配就跳出内层循环，避免重复操作
        }
    }
}

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