AngularJS过滤器如何实现自定义过滤与性能优化？

AngularJS过滤器是数据格式化和转换的重要工具,它允许开发者在视图层对数据进行实时处理，而无需修改控制器中的原始数据，过滤器通过管道符（|）应用于表达式，语法简洁且功能强大，广泛应用于日期格式化、数字处理、字符串操作等场景，本文将详细介绍AngularJS过滤器的核心概念、常见类型、自定义方法及最佳实践。

内置过滤器类型及使用场景

AngularJS提供了多种内置过滤器,满足日常开发中的大部分需求。

1. 日期过滤器（date）
   用于格式化日期对象，支持多种预定义格式或自定义格式。{{ birthday | date:'yyyy-MM-dd' }} 将日期格式化为“年-月-日”形式，参数可以是短格式（’shortDate’）、中格式（’medium’）或自定义模板。

2. 数字过滤器（number）
   对数字进行格式化，控制小数位数或添加千位分隔符。{{ 12345.6789 | number:2 }} 结果为“12,345.68”。

3. 字符串过滤器（uppercase/lowercase）
   实现大小写转换，如{{ 'hello' | uppercase }} 输出“HELLO”。

4. 货币过滤器（currency）
   快速格式化货币值，支持自定义符号和小数位。{{ 99 | currency:'¥' }} 显示为“¥99.00”。

   

5. 过滤数组（filter）
   根据条件筛选数组元素，常用于搜索功能。{{ users | filter:{name:'John'} }} 返回name属性为“John”的对象。

6. 排序过滤器（orderBy）
   对数组进行排序，可指定排序字段和顺序（升序/降序）。{{ products | orderBy:'price':true }} 按价格降序排列。

过滤器的链式调用与参数传递

AngularJS支持多个过滤器串联使用,通过管道符连接即可。{{ ' hello world ' | uppercase | trim }} 先去除首尾空格，再转为大写，最终输出“HELLO WORLD”。

过滤器可接受参数,参数紧跟在冒号后。{{ 12345 | number:3 }} 指定保留3位小数，复杂参数可通过对象或数组传递，如{{ users | filter:{age: '>18'} }} 筛选年龄大于18的用户。

自定义过滤器的实现方式

当内置过滤器无法满足需求时,可通过filter工厂方法创建自定义过滤器，以下是一个示例：

app.filter('reverse', function() {  
  return function(input) {  
    return input.split('').reverse().join('');  
  };  
});  

使用时：{{ 'Angular' | reverse }} 输出“ralgnA”，自定义过滤器可依赖注入服务，例如使用$http从服务器获取过滤规则。

过滤器的性能优化与注意事项

1. 避免滥用：过滤器在每次数据变化时都会重新执行，过度使用可能导致性能问题，建议在数据量大的场景下使用track by或分页优化。
2. 纯函数原则：过滤器应设计为纯函数，即相同输入始终返回相同输出，且无副作用。
3. 与指令的配合：结合ng-repeat和过滤器时，可使用filter作为表达式的一部分，如ng-repeat="item in items | filter:searchText"。

过滤器的常见应用场景

AngularJS过滤器通过声明式语法简化了数据格式化逻辑,提升了代码的可读性和维护性，合理使用内置过滤器、灵活创建自定义过滤器，并注意性能优化，能够有效提升前端开发效率，在AngularJS 2+版本中，虽然过滤器的概念被管道（Pipe）替代，但其核心思想仍被延续，体现了数据转换在框架设计中的重要性，掌握过滤器的使用技巧，是构建高效AngularJS应用的关键一环。