Javascript Map Function-将单词项传递给函数以返回html元素 [英] Javascript map function - pass word-items to a function to return html element

问题描述

找到最常用的单词后，我将最常用的单词传递给此alterText函数
也会更改单词

After finding the most used words, I pass the most used word to this alterText function too alter the word

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个以上最常用的单词时，我想知道如何更改并确保两个单词都被映射？

but when I have more than 1 most used word, I wonder how I can alter and make sure both words get mapped?

这是我的尝试，但是没有用：（

This was my try but did not work :(

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显示

and this is how I am calling it in useEffect to show in 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])

推荐答案

您需要返回映射函数中的值：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

You need to return a value in a map function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

我还尝试避免在多个作用域级别使用相同的变量名，在这种情况下，请使用 word 。如果考虑到这一点，它的准确性或描述性就不是很好，并且可能会导致错误。尝试考虑更多描述性的变量名。

I would also try to avoid using the same variable name in multiple scope levels, in this case word. It's not terribly accurate or descriptive if you think about it and can lead to bugs. Try to think of more descriptive variable names.

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

过去曾经有一种策略帮助过我解决此类问题，老实说，仍然对我有帮助，他正在尝试将问题分解为组件问题。然后，当出现问题时，您可以进行较小的工作。在此级别上，您可以在Web浏览器中打开Javascript控制台，甚至在Node运行时打开它来播放或测试出了什么问题。

One strategy that has helped me with these kinds of problems in the past, and to be quite honest, still helps me, is trying to split problems into component problems. Then, when something goes wrong, you have a smaller thing to work on. At this level you can open up the Javascript console in your web browser or perhaps even the Node run time to play around or test what is going wrong.

这篇关于Javascript Map Function-将单词项传递给函数以返回html元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！