Angular 如果；角度不'；t提供过滤器/订购管道，因为它们性能差，并防止过度缩小”；，那么'；什么是最好的选择？

过滤，尤其是排序是昂贵的操作。当Angular每秒多次调用这些管道方法时，即使是中等大小的列表，用户体验也会严重降低。在AngularJS应用程序中，filter和orderBy经常被滥用，导致人们抱怨AngularJS本身速度慢。从间接意义上讲，这种收费是公平的，AngularJS首先通过提供filter和orderBy来准备这个性能陷阱

参考文献

---

如果我需要使用搜索输入或单击某些筛选按钮来筛选或排序数据表，那么不使用管道的最佳替代方案是什么？

问题在于我们大多数开发人员的懒惰。当我们使用模板代码时，我们只希望它能够正常工作，而不必关心负载。 假设您有这样一个对象：

{
staff: [
    {name: 'Bill', title: 'dev', color: 'blue', id:9},
    {name: 'Luisa', title: 'dev', color: 'red', id:5},
    {name: 'Jim', title: 'dev', color: 'blue'}, id:1451],
company: {
    name: 'superCo'
}
}

在您的组件中，您希望按

id

因此，您可以：

ngFor=“staff of data.staff | orderBy（'id'）

发生的事情是这样的：好的，加载所有数据，转到这个用户，获取ID，将其与所有其他用户进行比较，好的，转到这个用户，获取ID，将其与其他用户进行比较，好的，获取ID，转到下一个用户，获取ID，将其与其他用户进行比较，好的，获取了..好的，我对所有用户进行了检查，这是一个仅存在于模板渲染中的数组

好的，为每个用户构建所有的数据模型和组件

如果它只运行一次就可以了……但它在每个检测周期中都执行

您的整个对象/排序/筛选会一遍又一遍地运行，如果它很复杂或您有大量数据，它可能会变得非常沉重。您的

sortBy（'id'）

会每秒运行5-10次。请记住，您的数据是无序存储的，因此它会在一个更改周期内每秒重建数组5-10次

现在，有一种方法可以帮助您更改为

onPush（）

这将允许您仅在您特别想要的时候在对象上运行循环，而不是经常运行。这对任何列表或数据集都有好处。但这仍然是一个很大的负担

更好的做法是创建您自己的排序函数

doSort（）

或其他任何函数。当您单击或其他函数时运行此函数，然后它只更改数据数组一次，触发

onPush（）

检测，并在后续过程中被忽略

模板代码也更难编写测试。当您将逻辑转移到组件代码本身时，您现在可以使用

filterColors（）

或任何您想要的函数，然后针对数据运行它

我知道它不像过去的

.orderBy（'id'）.filterBy（selectedColor）

那样新奇或酷，但它明显更快，更易于测试

---

我说了一点，我希望这能对一些人有所帮助。

问题在于我们大多数开发人员的懒惰。当我们使用模板代码时，我们只希望它能够正常工作，而不关心负载。 假设您有这样一个对象：

{
staff: [
    {name: 'Bill', title: 'dev', color: 'blue', id:9},
    {name: 'Luisa', title: 'dev', color: 'red', id:5},
    {name: 'Jim', title: 'dev', color: 'blue'}, id:1451],
company: {
    name: 'superCo'
}
}

在您的组件中，您希望按

id

因此，您可以：

ngFor=“staff of data.staff | orderBy（'id'）

发生的事情是这样的：好的，加载所有数据，转到这个用户，获取ID，将其与所有其他用户进行比较，好的，得到它，转到这个用户，获取ID，将其与其他用户进行比较，好的，得到它，转到下一个用户，获取ID，将其与其他用户进行比较，好的，得到它。。好的，我把它们都看了一遍，这里有一个数组，它只存在于模板渲染中

好的，为每个用户构建所有的数据模型和组件

如果它运行一次就可以了。。。但它在每个检测周期都会执行

您的整个对象/排序/筛选会反复运行，如果它很复杂或您有大量数据，它可能会变得非常沉重。您的

sortBy（'id'）

每秒运行5-10次。。请记住，您的数据是无序存储的，因此它会在一个更改周期内每秒重建阵列5-10次

现在，有一种方法可以帮助您更改为

onPush（）

这将允许您仅在您特别想要的时候在对象上运行循环，而不是经常运行。这适用于任何列表或数据集。但这仍然是一个很大的负担

更好的做法是创建自己的排序函数

doSort（）

或其他任何函数。当您单击或执行其他操作时运行此操作，然后它仅更改数据数组一次，触发

onPush（）

检测，并在后续过程中被忽略

模板代码也更难编写测试。当您将逻辑转移到组件代码本身时，您现在可以使用

filterColors（）

或任何您想要的函数，然后针对数据运行它

我知道它不像过去的

.orderBy（'id'）.filterBy（selectedColor）

那样新奇或酷，但它明显更快，更易于测试

---

我漫谈了一下，希望能对你有所帮助

你看过你贴的文章的其余部分了吗？最后两段说：“Angular团队和许多经验丰富的Angular开发人员强烈建议将过滤和排序逻辑移到组件本身中”。阅读其余部分，它们为您指明了正确的方向。我确实这样做了，但我并不真正理解“将过滤和排序逻辑移动到组件本身”的含义。有没有具体的例子？我明白了。嗯，基本上。不公开无序列表，只需在组件中对其排序，并将其作为有序列表公开即可。例如，如果您获取列表[1,4,2,3]，并希望按顺序（从低到高）显示它。你可以在课堂上点菜，而不是用烟斗点菜。您可以执行类似于

ordered=unordered.sort（函数（a，b）{returna-b；}）的操作其中
无序=[1,4,2,3]
结果将是
[1,2,3]