AngularJS中$filter()工作原理及匹配异常问题咨询

核心问题根源 #

你遇到的差异完全是因为AngularJS的$filter('filter')默认采用模糊包含匹配，而原生Array.filter是严格全等匹配。这两种筛选逻辑的不同直接导致了结果的差异。

为什么你的$filter会出现“匹配不准确”？ #

当你使用$filter('filter')(searchArr, {account_number: ar.account_number, bank_name: ar.bank_name})时，AngularJS会对每个属性执行包含匹配（而非全等）：

• 比如你筛选account_number: "orsV5zWHquBX_orCvEx4YdQxP_1903"时，"orsV5zWHquBX_orCvEx4YdQxP_1"会被匹配到——因为"_1"是"_1903"的子串，满足包含条件。
• 而原生Array.filter中的bar.account_number === ar.account_number是严格的全等判断，只有完全一致的字符串才会被选中。

这也是为什么你在arr.forEach循环中会看到目标条目被输出两次：第一次循环到arr中account_number完全匹配的元素时，$filter返回正确结果；第二次循环到account_number为_1的元素时，模糊匹配也命中了searchArr中的条目，所以又输出了一次。

如何让$filter实现精确匹配？ #

只需要给$filter('filter')添加第三个参数true，开启精确匹配模式：

var foo = $filter('filter')(searchArr, {account_number: ar.account_number, bank_name: ar.bank_name}, true);

此时$filter会采用和原生Array.filter一致的全等逻辑，只有当所有属性完全匹配时才会返回结果。

AngularJS $filter('filter')的内部工作机制 #

$filter('filter')的匹配逻辑可以分为几种场景：

• 字符串筛选条件：遍历目标数组中每个对象的所有可枚举属性，只要任意一个属性的值包含该字符串（默认不区分大小写），就会被选中。
• 对象筛选条件：遍历目标数组中的每个对象，检查对象的所有属性是否都满足“包含匹配”（默认）或“全等匹配”（当第三个参数为true时），全部满足则被选中。
• 自定义函数筛选条件：将数组中的每个元素传入该函数，函数返回true则元素被保留，完全由你自定义匹配逻辑。
• 第三个参数的作用：
  • 传true：开启精确全等匹配（===），同时区分大小写。
  • 传false或不传：默认模糊包含匹配，不区分大小写。
  • 传自定义函数：替代默认的匹配逻辑，由函数决定是否保留元素。

内容的提问来源于stack exchange，提问作者Sulove Bista