筛选只有一个单词的字符串数组

Question

我正在为一个职位做一个简单的字典网站挑战，我需要使用一个带有字符串数组的JSON文件，并在屏幕上显示单词列表；然而，挑战提供的这个文件不仅有单词，还有短语，也显示在屏幕上，我想去掉它们！

我正在尝试过滤数组并获得只有一个单词的字符串。

这可能吗？如果是的话，你能帮我吗？

请参见阵列的一部分。这个文件有超过130k个包含单词/短语的字符串，所以我自己无法删除这些阶段！

[
"acciaccatura",
"accident",
"accidental",
"accidentally",
"accidentally on purpose",
"accident and emergency",
]

另外，请参阅下面使用.map((在屏幕上显示单词的代码。

<div className="word-container">
{words.map((data) => (
<span className="word">{data}</span>
))}
</div>

非常感谢！

Ps.：这是我在这里的第一个问题，所以如果我犯了任何错误，我深表歉意。我也是编码新手，所以我正在努力习惯使用更多的StackOverflow！

Answer 1

这应该符合您的要求：

<div className="word-container">
{words.filter(w => w.indexOf(' ') < 0).map((word) => (
<span className="word">{word}</span>
))}
</div>

该过滤器利用了indexOf方法，该方法查找字符串occurrence的第一个索引，在您的案例中是一个空格。

负索引表示找不到空格，因此只有一个单词。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

Answer 2

您可以使用array.prototype.includes 添加一个条件来检查数组值中是否有空格

下面的代码将呈现数组中没有空格的所有单词。

<div className="word-container">
{words.map((data) => (
!data.includes(" ") && <span className="word">{data}</span>
))}
</div>

另一种方法可以是使用Array.prototype.filter，并使用includes数组方法过滤掉所有包含空间的值。下面的代码将返回一个新数组，您可以直接在map函数中使用它。

words.filter(data => !data.includes(' '))

Answer 3

您可以查找空格来确定数组中的元素是短语还是单词。如果元素的索引等于-1，则意味着它没有任何空格，单词也是如此。

<div className="word-container">
{words.filter(item => item.indexOf(' ') == -1).map((word) => (
<span className="word">{word}</span>
))}
</div>