JS數組：filter（）with map（）vs forEach（）

Question

哪種更優化的方式.filter() + .map() .forEach()或.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 });
  }
}, []);

Answer 2

我可能是錯的，但我猜是因為每個人會更好。

在第一個場景中，您將循環顯示5個項目，然后再循環3個項目。 在第二個場景中，您只是循環5個項目。 無論如何，在foreach中的if有效地完成了。

如果你正在處理一組非常大的數據，可能會有一個例外，因為你在內存中都有這兩個數組，但是對於任何不足的數組，我都會推薦forEach

Answer 3

最好的方法是使用foreach 。 因為map和filter將創建兩個數組。 foreach不會創建數組。 所以foreach是最好的。 看看下面的那些陳述，

filter（）方法創建一個新數組，其中包含所有傳遞由提供的函數實現的測試的元素。

map（）方法創建一個新數組，其結果是在調用數組中的每個元素上調用提供的函數。