Javascript 映射函数 - 将单词项传递给函数以返回 html 元素

Question

找到最常用的单词后，我将最常用的单词传递给这个 alterText 函数太改变这个词了

export default function alterText(txtArr, mostUsedWord, firstWord, lastWord) {
    const updatedArr = txtArr.map(word => {
        if (word === mostUsedWord) {
                word = `<span class="foo">${firstWord}</span><span class="word">${word}</span><span class="bar">${lastWord}</span>`
            }
            return word
        })
        return updatedArr
}

但是当我有超过 1 个最常用的单词时，我想知道如何更改并确保这两个单词都得到映射？

这是我的尝试，但没有成功:(

export default function alterText(txtArr, mostUsedWord, firstWord, lastWord) {
    const hasMoreWords = mostUsedWord.length > 1
    const updatedArr = txtArr.map(word => {
        if (word === mostUsedWord) {
            word = `<span class="foo">${firstWord}</span><span class="word">${word}</span><span class="bar">${lastWord}</span>`
            return word
        } else if (hasMoreWords) {
            const word = mostUsedWord.map(word => {
                word = `<span class="foo">${firstWord}</span><span class="word">${word}</span><span class="bar">${lastWord}</span>`
            })
            return word
        }

    })
    console.log("arr", updatedArr)
    return updatedArr
}

这就是我在 useEffect 中调用它以在 html 中显示的方式

    useEffect(() => {
        const createContent = alterText(textArr, mostUsedWord, firstWord, lastWord)
        console.log("content", createContent)
        const textDataDiv = document.getElementById("text-data")
        textDataDiv.innerHTML = createContent
        setTextAltered(true)
    }, [mostUsedWord])

Answer 1

您需要在 map 函数中返回一个值: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

我还会尽量避免在多个作用域级别中使用相同的变量名称，在本例中为 word。如果您仔细考虑一下，它并不是非常准确或描述性，并且可能会导致错误。尝试想出更具描述性的变量名称。

const word = mostUsedWord.map(mostUsedWord => {
  return `<span class="foo">${firstWord}</span><span class="word">${mostUsedWord}</span><span class="bar">${lastWord}</span>`
})

过去帮助我解决此类问题的一个策略是尝试将问题分解为组件问题，而且说实话，现在仍然对我有帮助。然后，当出现问题时，你就有更小的事情要做。在此级别，您可以在 Web 浏览器中打开 Javascript 控制台，甚至打开 Node 运行时来尝试或测试出了什么问题。