JS 数组：filter() 和 map() vs forEach()

Question

哪个是更优化的方式.filter() + .map()或.forEach()？

这是一个示例对象数组：

var personnel = [
    {
        id: 5,
        name: "Luke Skywalker",
        pilotingScore: 98,
        shootingScore: 56,
        isForceUser: true,
    },
    {
        id: 82,
        name: "Sabine Wren",
        pilotingScore: 73,
        shootingScore: 99,
        isForceUser: false,
    },
    {
        id: 22,
        name: "Zeb Orellios",
        pilotingScore: 20,
        shootingScore: 59,
        isForceUser: false,
    },
    {
        id: 15,
        name: "Ezra Bridger",
        pilotingScore: 43,
        shootingScore: 67,
        isForceUser: true,
    },
    {
        id: 11,
        name: "Caleb Dume",
        pilotingScore: 71,
        shootingScore: 85,
        isForceUser: true,
    },
];

假设我们想要获得仅给出名称和 ID 的最终数组，其中 isForceUser=true

[ { id: 5, name: 'Luke Skywalker' },?
  { id: 15, name: 'Ezra Bridger' },?
  { id: 11, name: 'Caleb Dume' } ]?

现在有两种方法可以解决它：

1. 通过使用.filter()+.map()，如下图：

var APersonnel = personnel
                    .filter((person) => person.isForceUser)
                    .map((person) => ({ id: person.id, name: person.name }));

2. 通过使用 .forEach() 并推送一个新对象：

var BPersonnel = [];
personnel.forEach((person) => {
    if (person.isForceUser) {
        BPersonnel.push({ id: person.id, name: person.name });
    }
});

上面定义的哪一种解决方案更好，为什么？

Answer 1

这些不是您应该寻求性能改进的事情。您在这里谈论的是“人员”。我想这是一个相当有限的数组集。如果您遇到性能问题，我建议您使用 chrome dev 性能选项卡来查看是什么原因造成的。

为了回答您的问题，过滤器 + 地图在语义上对眼睛来说更容易，这也是个人意见。严格的性能明智的forEach更快，其中最有可能的基本of for循环甚至更快。但同样，这些是我们正在谈论的几毫秒。这不能证明重写的成本是合理的:)

另一种方法是使用reduce，更少的代码，并且只有一个循环：

const APersonnel = personell.reduce((acc, person) => {
  if (person.isForceUser) {
    acc.push({ id: person.id, name: person.name });
  }
}, []);