Array.filter 与 $filter('filter')

Question

我应该在 Angular 应用中使用哪一个？为什么？

array.filter(o => o.name === myName);

或

$filter('filter')(array, {name: myName}, true);

Answer 1

您应该使用Array.filter，然后分配结果。当您使用 $filter 时，它会在每个 $digest 循环结束时重新应用于所有绑定，并且在每个 之后监视值和更新结果会占用大量性能$digest 循环。相反，您应该过滤结果并将其显式分配给您的范围变量

Answer 2

主要区别在于$filter('filter') 提供的快捷方式或语法糖。例如，以下语法可用于获取项目的任何 string 属性中包含 keyword 字符串的项目：

$filter('filter')(array, 'keyword')

这不是使用标准 ES5 Array.prototype.filter 这么简单。

而这两种方法的总体思路是相同的 - 将给定数组的子集作为 NEW 数组返回。

更新：

Under the hood angular 使用Array.prototype.filter:

function filterFilter() {
    // predicateFn is created here...

    return Array.prototype.filter.call(array, predicateFn);
}

因此，如果您不使用快捷方式 - Angular 只会将调用委托给标准 filter。

回答您的问题：使用可让您编写更少代码的问题。在您的特定情况下，它将是 array.filter(o => o.name === myName);

Answer 3

虽然使用 $filter('filter') 可能更容易且在语法上更具吸引力，但我可以想到四个使用 Array.filter 而不是 $filter('filter') 的好理由

效率

虽然 $filter('filter') 确实在底层使用了 Array.filter，但除了 Array.filter 之外，它还使用了其他代码，包括深度比较。在大多数情况下，速度差异可以忽略不计，但在某些用例中可能很大。例如，在处理大型数据对象时，我发现使用 Array.filter 会有所不同。

Angular 2+ 不支持 AngularJS 样式的过滤器

来自angular migration guide：

AngularJS 内置过滤器和 orderBy 过滤器不存在 Angular，所以你需要自己做过滤和排序。

如果您将来有可能升级到 Angular 2 或更高版本，那么使用 Array.filter 将为您节省一些迁移偏头痛。即使您不打算升级，显然 Angular 团队也不认为 AngularJS 过滤器值得保留，这让我认为最好还是避免使用它。

优先使用本机代码而不是库代码

像 AngularJS 这样的库和框架是很棒的工具；但是，如果您必须在使用 vanilla javascript 或使用库之间进行选择，并且没有充分的理由使用该库，您应该始终使用 vanilla javascript。更普遍理解，较少依赖 3rd 方代码等。网上有大量文章争论这一点。

"$filter" 禁止在 Typescript 文件中进行类型检查

仅当您使用（或计划使用）Typescript 时才适用。在撰写本文时，angularjs 的 @types 库将所有​​ $filter 函数的返回类型定义为 any，如果您不小心，可能会导致一些严重的类型检查问题。相比之下，Array.filter 总是返回预期的数组类型。