Javascript 带有if条件的数组.filter和.map或.map

最近我对一个数组做了一些过滤，我提出了两种情况，我不知道该用哪一种

在性能方面，哪一个更好使用

arr.filter(someCondition).map(x => x.something)

或

需要注意的一点是，我使用的是react，所以在返回的数组中有未定义的值，不要在.map中返回任何内容，这是完全可以接受的

这涉及到很多问题，比如，数组中有多少个元素，以及有多少个元素将通过条件，这就是让人想知道哪个元素更好的原因

那么，考虑到n个元素和所有元素都通过条件，并且没有元素通过条件的情况，哪一个具有更好的性能

---

.filter.map或.map是否在内部？

首先：这不太重要

但是：只是因为在您的情况下，在结果数组中有未定义项是可以的，所以第二个会更快

让我们比较一下：

第一种方法是，过滤器必须通过整个数组，用接受的条目创建一个新数组，然后映射必须通过新数组并创建一个新的属性数组

第二种方法是，map使一个数组遍历，创建一个新数组，其中包含一些属性，或者对于那个些将被过滤掉的属性是未定义的

当然，这假设您不仅仅是在其他地方卸下负担，例如，如果React必须做一些事情来忽略这些未定义的内容

但再次强调：这不太重要

我可能会使用第三个选项：自己构建结果数组：

const result = [];
for (const x of arr) {
    if(someCondition) {
        result[result.length] = x.something;
    }
}

这仍然只进行一次传递，但不会生成包含未定义的数组。您也可以将其硬塞进reduce，但它只能为您带来复杂性

---

不要担心需要迭代器的问题。它进入热代码。

您可以使用reduce函数而不是map和filter，并且它不会像使用map和if时那样返回未定义的值

arr.reduce((acc, x) => (someCondition ? [...acc, x.something] : acc), [])

或

正如@briosheje所说的，更小的阵列会更好。因为它减少了React应用程序中使用此数组的重新渲染次数，所以不需要传递未定义的。我想说，Reduce函数会更有效率

---

如果您想知道为什么我使用扩展运算符编写第一个，而不使用扩展运算符编写第二个，是因为第一个的执行时间比第二个要长。这是由于spread运算符正在克隆“acc”。所以，如果您希望第二个执行时间更短，或者如果您希望第一个执行时间更短，则执行性能更好？通常，带有if的映射应该更快，因为您只对数据迭代一次。然而，在许多情况下，这可能并不重要。你计时了吗？地图不能过滤项目，地图和过滤器是不同的。如果您想在需要过滤和实际转换值的单个循环中执行此操作，只需执行一个函数或一个外部方法如果您非常关心性能，请使用带有回调的函数生成器，或者可能更适合您的用例。reduce，它允许在单个快照中进行筛选和映射。请注意，返回未定义是可以的。我知道结果是不同的，但对于我来说，在react中，它将是same@Vencovsky我知道没关系，我只是想知道使用.reduce是否是一个解决方案，因为它实际上会迭代数组一次，同时允许过滤和映射。我建议您关注可读性，尽量使代码具有表达能力，而不是专注于表现。我引用性能是因为其好处很可能微不足道。如果我在查看您的代码，并且看到使用带有If条件的map，不对错误情况返回任何内容，肯定会让我思考并看到发生了什么。。。请记住，您大部分时间都在阅读代码。使用react不会降低react性能的好处吗？我知道react已经处理了未定义的值，但是一个较小的数组应该比一个通过映射生成的脏数组更有用，该映射可能返回几个未定义的值，不是吗？你说这真的不太重要，因为即使有巨大的集合，你也看不到两者之间的区别？@briosheje-正如我所说，我会生成一个没有这些的数组，只需一次，而不使用reduce，因为没有理由这样做：-@文科夫斯基-对，在大多数情况下，无论你对结果做什么，都需要时间。当然，每隔一段时间，这确实很重要。只是不经常-@Vencovsky不支持javascript，我的意思是，在任何情况下，您仍然需要迭代整个数组，我可以预见的唯一好处是，如果您使用其他原型生成数组，react将处理更小的数组，因此，既不映射也不过滤。

arr.reduce((acc, x) => (someCondition ? [...acc, x.something] : acc), [])

arr.reduce((acc, x) => {
  if (someCondition) {
    acc.push(x.something);
    return acc;
  } else return acc;
}, []);