仅适用于第一个数组，而不适用于第二个数组。有人可以解释为什么它不起作用并提供适当的解决方案吗？

Question

我有两个数组，每个数组都被映射过来，如果数组与“apiSuggestion”不匹配，则元素会得到黑色的背景色和红色文本。这适用于：let sentenceOne = ["somthing", "life", "nothing"];let sentenceTwo = ["nummber", "seven", everythng"];let apiSuggestion = ["something", "life", "nothing", "number", "seven", "everything"];let matchMakerOne = sentenceOne.map(function(word,index){   if( word !== apiSuggestion[index]){        return `               <span style="background-color:black; color:red">                     ${word}               </span>       } else {               return word              }          })document.getElementById("sentenceOne").innerHTML = machMakerOne.join(' ')//in the HTML i see "somthing" highlighted in black background-color with red text, as it doesnt match to api suggesstion即使逻辑相同，这也不起作用，我在哪里犯了错误？let matchMakerTwo = sentenceTwo.map(function(word,index){   if( word !== apiSuggestion[index]){        return `               <span style="background-color:black; color:red">                     ${word}               </span>       } else {               return word              }          })document.getElementById("sentenceTwo").innerHTML = machMakerTwo.join(' ')// "nummber", "seven", everythng" all get black background and red text// nummber and everythng should get black background and red text我试图“连接”句子一个和句子两个，它只捕获第一个数组的拼写错误，而不是第二个数组。如何突出显示这两个数组中的拼写错误并将其呈现在 HTML 中？任何帮助是值得赞赏的。提前感谢您。我创建了JS小提琴

Answer 1

在这两种情况下，您只检查数组的前三个元素。apiSuggestion

取代

if (word !== apiSuggestion[index]) {...}

跟

if (apiSuggestion.indexOf(word) === -1) {...}

Array.indexOf(arg)如果 不是目标数组的元素，则返回。-1arg

参考： MDN： 数组.prototype.索引的（）

Answer 2

代码工作正常。如果数组中的每个项目的值与 apiSuggestion 中同一索引中的项目不匹配，则循环访问该数组中的每个项目，以返回彩色文本。

第一句：

sentenceOne[0] (somthing) | apiSuggestion[0] (something) - NOT

sentenceOne[1] (life) | apiSuggestion[1] (life) - MATCH

sentenceOne[2] (nothing) | apiSuggestion[2] (nothing) - MATCH

第二句：

sentenceTwo[0] (nummber) | apiSuggestion[0] (something) - NOT

sentenceTwo[1] (seven) | apiSuggestion[1] (life) - NOT

sentenceTwo[2] (everythng) | apiSuggestion[2] (nothing) - NOT

我相信您要实现的是，如果迭代中的当前项不在 apiSuggestion 数组中，则返回彩色文本。您可以使用该方法实现该方法。您的函数应为：includes

let matchMakerTwo = sentenceTwo.map(function(word) {

    if (!apiSuggestion.includes(word)) {

        return `

            <span style="background-color:black; color:red">

                ${word}

            </span>

        `

    } else {

        return word

    }

})

PS：您可以在问题中嵌入代码片段。通过这种方式，您的问题变得更加清晰，并具有工作模型。