javascript - 链接过滤和映射方法时如何获取过滤索引

Question

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

条目的 E.G 是

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

现在我们要使用filter方法过滤条目，以便获得所有包含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 个项目，我们的索引 = [0,1,2,3]。

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

那么，如果索引:5,10 处的项目被修改，我可以在映射结果时传递这些索引吗？

我希望我已经解释清楚了。

Answer 1

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

    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>
        );
    });