迭代一个数组并只返回匹配的值？ [复制]

Posted 2023-03-14

【中文标题】迭代一个数组并只返回匹配的值？ [复制]

【英文标题】：Iterate over an array and return only matched values? [duplicate]

【发布时间】：2016-09-07 09:42:58

【问题描述】：

我正在使用 JSON 并希望遍历一个数组并返回我正在寻找的值。例如，如果我有一个对象数组，并且每个对象都有特定书籍的信息，我如何遍历该数组中的每个对象并只返回匹配的对象？

我尝试过使用地图，就像这样（但没有按我需要的方式工作）：

// books is from my imported JSON object

const favoriteBook = books.map((book) => 
  if (book.title == this.props.params.id) 
    return book;
  
);

console.log(favoriteBook)

但是，当我使用 console.log(favoriteBook) 时，我看到一个数组，其中返回了一个匹配的对象，加上所有不匹配的对象的“未定义”。我怎样才能让它在找到匹配项后立即停止并返回那个匹配项？如果可能的话，想知道如何使用“过滤器”（？）或类似方式来做到这一点。

谢谢。

【问题讨论】：

您正在寻找.filter() 方法，而不是.map()

此外，该回调中的this 的值与它在回调外部中的值不同。

【参考方案1】：

你想要.find (https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/Array/find)

const favoriteBook = books.find((book) => 
    return book.title == this.props.params.id
.bind(this)); //.bind for context of 'this'

【讨论】：

.find 将只返回第一个匹配项。如果您尝试查找特定对象，这很有用，但是，如果您需要返回多个匹配条件的对象，这将不起作用。 jsfiddle.net/crabbly/1gm8x6sm

@crabbly -- 是的 - 我认为 .find 是 OP 正在寻找的，因为变量是 favoriteBook。

是的，不是很清楚。但是，尝试按 id 搜索时，问题标题显示“匹配值”。 @tymeJV

@crabbly - 该死的这些混合信号，描述：“只返回匹配的那个”哈哈。\

【参考方案2】：

试试这个：

const favoriteBook = books.find((book) => (book.title === this.props.params.id));

【参考方案3】：

我想这取决于您是要匹配多本书还是只匹配一本书。

匹配多本书

您可以通过filter() 函数完成此操作，该函数将处理多本书：

const favoriteBooks = books.filter((b) =>  return b.title == this.props.params.id;);

匹配一本书

否则，您可能希望 find() 函数返回一个：

const favoriteBook = books.find((b) =>  return b.title == this.props.params.id;);

注意：请特别注意如何使用 this 关键字，因为它可能会在您的函数调用之一的上下文中发生巨大变化。您可以考虑在调用函数之前存储它或以不同的方式引用它以避免意外结果。

【讨论】：

正确，但再次注意我对 OP 的评论中关于该回调中 this 的值的警告。

【参考方案4】：

尝试使用.filter() 仅获取您想要的项目，然后使用.map() 获取您的特定字段。