JavaScript数组过滤技巧

虽然Array.prototype.filter()是一个非常方便的方法，但它的性能通常不尽如人意。这是因为它已经成为许多可以使用不同替代方法执行的操作的首选方法。让我们看一下几个常见的场景，并看看如何提高它们的性能。

查找单个值

如果你想在数组中查找单个结果，可以使用Array.prototype.find()代替。它将返回满足条件的第一个元素，如果没有这样的元素，则返回undefined。它比Array.prototype.filter()快得多，因为它在找到第一个匹配元素后就会停止迭代。

const arr = [1, 2, 3, 4, 5];

arr.find(x => x > 3); // 4

此外，如果条件是一个简单的相等性检查，你还可以使用Array.prototype.indexOf()。虽然不如前两种方法那么漂亮，但它可以显著提高性能，因为没有使用比较函数的开销。

const arr = [1, 2, 3, 4, 5];

arr.indexOf(3); // 2

删除单个值

类似地，如果你想从数组中删除一个单独的值，你可以使用Array.prototype.findIndex()来找到你想要删除的元素的索引。然后，使用Array.prototype.slice()来删除它。虽然这样做会更冗长，看起来执行的操作更多，但在许多情况下，它实际上比使用Array.prototype.filter()更快。

const arr = [1, 2, 3, 4, 5];

const index = arr.findIndex(x => x === 3);
const newArr = [...arr.slice(0, index), ...arr.slice(index + 1)];
// [1, 2, 4, 5]

类似地，如果你不介意改变原始数组，你可以使用Array.prototype.splice()来删除你找到的索引处的元素。由于这个方法不需要创建一个新数组，它可以比前面的方法快得多。

const arr = [1, 2, 3, 4, 5];

const index = arr.findIndex(x => x === 3);
arr.splice(index, 1); // [1, 2, 4, 5]

附加说明

在许多情况下，这样的更改不会对应用程序的性能产生重大影响。然而，了解所有选项并为特定的用例选择最佳选项从来都没有坏处。在处理大型数据集以及应用程序的关键部分时，这些更改会更有意义。

此外，根据数据及其约束条件，使用不同的数据结构可能更合理。例如，如果唯一值是前提条件，使用Set在许多情况下更高效且更容易使用。