Javascript JS数组：带map（）的filter（）与forEach（）的比较

哪种方法更优化

.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' } ] 

现在有两种解决方法：

通过使用.filter（）+.map（），如下所示：

通过使用.forEach（）并推送新对象：

---

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

我可能错了，但我猜forEach会更好

在第一个场景中，您将在5个项目之间循环，然后再次在3个项目之间循环。 在第二个场景中，您只是在5个项目之间循环。而且foreach中的if实际上是在过滤器中完成的

---

如果您处理的数据集非常大，可能会出现异常，因为内存中会同时包含两个数组，但如果没有这两个数组，我建议forEach

这些都不是您应该寻求性能改进的内容。你说的是“人事”。我想这是一个相当有限的数组集。如果您有性能问题，我建议您使用chrome开发人员的性能选项卡来查看是什么导致了它

为了回答您的问题，filter+map在语义上更容易让人看到，这也是个人的观点。严格从性能上讲，

forEach

更快，其中最有可能的是for循环的基本

更快。但同样，这是我们正在谈论的几毫秒。这并不能证明重写的成本是合理的：）

另一种方法是使用
reduce
，减少代码，只使用一个循环：

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

最好的方法是使用
foreach
。因为
map
和
filter
将创建两个数组
foreach
不创建数组。因此，
foreach
是最好的。看看下面的陈述

filter（）方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素

map（）方法创建一个新数组，其结果是对调用数组中的每个元素调用提供的函数
 从语义上讲，我更喜欢filter+map，因为您希望过滤数组的元素并将它们映射到其他元素。在性能方面我不知道。你有性能问题吗？您是否确定此代码是瓶颈？如果你没有用“是”来回答这两个问题，那就不用麻烦了。关于reduce呢？@arieljuod我想从性能和易用性/标准两个角度来回答。感谢分享您的观点。@str我想了解性能和标准方面的情况。这只是一个例子，我想知道与性能和标准相比，使用2哪个更好。谢谢你的回答，解释得很好。@Varunukheja我添加了一些使用
reduce
，如果你感兴趣的话：）非常感谢@pierreudc我从来没有想过用这种方式使用reduce。为什么for

的

比forEach

快？这有来源吗？@DrorBar这实际上是一个假设，因为

forEach

使用了一个新的函数上下文，因为for是在同一个跟踪中执行的

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

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