如何在链接筛选和映射方法时获取筛选的索引

How to get the filtered index when chaining filtering and map methods

本文关键字：筛选 获取 索引 方法 链接 映射      更新时间：2023-09-26

假设我们有一个包含x个数量条目的对象数组。

例如，条目是 

{
 name: 'someone',
 age: 22,
 modified: true
}

现在我们要过滤条目，以便我们可以通过使用过滤器方法获取包含 modified = true 的所有条目。过滤后，我们将结果映射到div。

例如：

return this.props.entries.filter((entry) => {
  return entry.modified === true;
}).map((displayedEntry, index) => {
  return (
    <tr>
      <td>{index + 1}</td>
      <td>displayedEntry.name</td>
    </tr>
  );
});

问题是显示的索引对应于过滤的条目数量：如果修改了 4 个项目，我们将是 index = [0，1，2，3]。

我的问题是我们如何传递原始数组中项目的索引，而不是映射数组中项目的索引。

因此，如果索引：5，10 中的项目被修改，我可以在映射结果时传递这些索引吗？

我希望我解释清楚这一点。

如果您不想破坏原始对象，请使用投影：

    return this.props.entries
    .map((entry, index) => {
        return {
            entry: entry,
            index: index
        };
    })
    .filter((proj) => {return proj.entry.modified === true;})
    .map(proj => {
        return (
            <tr>
              <td>{proj.index + 1}</td>
              <td>proj.entry.name</td>
            </tr>
        );
    });

这有点丑，但你可以做这样的事情：

return this.props.entries.
  map((entry, index) => {
    entry.displayIndex = index;
    return entry;
  }).
  filter((entry) => {
    return entry.modified === true;
  }).
  map((displayedEntry, index) => {
    return (
      <tr>
        <td>{displayedEntry.displayIndex + 1}</td>
        <td>displayedEntry.name</td>
      </tr>
    );
  });
相关文章：