在 JavaScript 开发中，对数组进行筛选是一个高频需求。jQuery 提供的 $.grep() 方法专门用于从一个数组中找出满足特定条件的元素，并返回一个包含这些元素的新数组。它和原生 JavaScript 的 Array.prototype.filter() 在功能上非常相似，但在早些年浏览器兼容性是个大问题时，$.grep() 是更可靠的选择。
$.grep() 的明显特点是不修改原始数组。无论你如何筛选，原始数组始终保持不变，结果通过返回值来传递。同时它接受一个 irt 参数，可以快速反转筛选逻辑——取反操作一行代码就能完成，不需要重写整个过滤函数。
为什么我在某些场景下仍然用 $.grep() 而不是原生的 filter()？
现在浏览器已经支持 filter()，但 $.grep() 仍然有两个让我愿意继续使用它的理由。第一是 irt 参数：原生 filter() 想取反需要把整个回调函数的判断条件取反，代码可读性会降低，而 $.grep() 只需在第三个参数传 true。第二是在维护老项目时，如果项目已经依赖 jQuery，沿用 $.grep() 可以保持代码风格统一，避免混用多种数组处理方式带来的认知负担。
语法
jQuery.grep(array, function(element, index) [, irt])
参数说明：
-
array（必需）：要搜索的数组或类数组对象。这是操作的目标数据源。 -
function(element, index)（必需）：用作过滤器的回调函数。它接收两个参数——element是当前正在处理的数组元素，index是该元素在数组中的索引位置。函数需要返回一个布尔值：true表示该元素被保留到结果集中。 -
irt（可选）：布尔值，默认false。当设为true时，筛选逻辑反转——回调函数返回false的元素才会被收集到结果数组中。
课程知识要点
-
返回新数组：
$.grep()始终返回一个新构建的数组，原始数组不受影响，这符合函数式编程中不可变数据的原则。 -
irt 参数实现取反：不需要修改回调逻辑，传
true即可反转筛选条件，提升代码的可读性和复用性。 -
同时访问元素和索引：回调函数既拿到当前元素的值，也拿到它的索引，可以做基于位置的条件判断。
-
类数组对象也可用：传入
array的参数不一定是真正的数组实例，类数组对象同样能被处理。
示例一：基础筛选——同时使用元素值和索引
这个例子演示了 $.grep() 最常规的用法。从一组学生分数中筛选出满足两个条件的元素：分数能被 2 整除，且索引位置大于等于 2（即从第三项开始往后找）。筛选条件同时使用了 element 和 index 两个参数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>grep() 基础筛选 · 编程学习</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h4>$.grep() 方法——按条件过滤数组</h4>
<p>点击按钮查看筛选结果：</p>
<button id="btn-filter">执行筛选</button>
<p id="before-list"></p>
<p id="after-list"></p>
<script>
$(document).ready(function () {
$("#btn-filter").click(function () {
// 原始数组：一组编程测验分数
var scores = [12, 20, 60, 43, 56, 41, 60, 19, 42, 60, 78, 18];
$("#before-list").html(
"原始数组：<b>" + scores.join(", ") + "</b>"
);
// 筛选条件：偶数分数 且 索引 >= 2
var result = $.grep(scores, function (element, index) {
return (element % 2 === 0 && index >= 2);
});
$("#after-list").html(
"筛选结果（偶数且位置≥2）：<b>" + result.join(", ") + "</b>"
);
});
});
</script>
</body>
</html>
运行后可以看到，12 和 20 因为索引是 0 和 1 被排除在外，43、41、19 因为不是偶数也被排除。最终结果只包含从索引 2 开始的偶数元素。
示例二：使用 irt 参数反转筛选逻辑
irt 参数是 $.grep() 区别于原生 filter() 的一个重要特性。下面的例子从一个数组中找出所有值为 60 的元素。回调函数写的是“不等于 60”，但由于 irt 设为 true，最终返回的恰恰是“等于 60”的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>grep() 反转筛选 · 编程学习</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h4>$.grep() 方法——使用 irt 参数取反</h4>
<p>点击按钮查看筛选结果：</p>
<button id="btn-irt">执行反转筛选</button>
<p id="before-list"></p>
<p id="after-list"></p>
<script>
$(document).ready(function () {
$("#btn-irt").click(function () {
// 原始数组：课程编号列表
var courseIds = [12, 20, 60, 44, 56, 41, 60, 19, 42];
$("#before-list").html(
"原始数组：<b>" + courseIds.join(", ") + "</b>"
);
// 回调函数返回“不等于 60”为 true
// irt: true 反转后，实际收集的是“等于 60”的元素
var result = $.grep(courseIds, function (element, index) {
return (element !== 60);
}, true);
$("#after-list").html(
"反转筛选结果（值为 60 的元素）：<b>" + result.join(", ") + "</b>"
);
});
});
</script>
</body>
</html>
点击按钮后，结果数组里只有两个 60。虽然回调函数写的是“元素不等于 60”，但因为 irt 被设为 true，筛选逻辑整个颠倒过来。这种方式让同一个过滤函数可以同时服务于“筛选符合条件的”和“排除符合条件的”两种场景，无需重复编写逻辑互斥的两个函数。
个人经验与实用建议
在项目中，irt 参数的使用频率比很多人想象的要高。一个典型情况是：你已经写好了一个验证函数用来判断哪些数据是合法的（返回 true 表示合法），但某个业务模块恰好需要取出“不合法”的数据来做异常处理。这时候直接给 $.grep() 传 true 作为第三个参数就可以复用同一个验证函数，不用额外写一个取反版本。
另外提醒一点：$.grep() 的回调函数必须显式返回布尔值。我曾见过有开发者漏写 return 语句，导致函数默认返回 undefined，结果数组为空。排查过程颇为耗时，因为没有任何报错。如果你发现筛选结果总是空数组，先检查回调函数是否明确 return 了判断结果。
如果你在项目里写的是纯模块化 JavaScript，没有引入 jQuery 作为依赖，那直接用原生 filter() 也没问题。两者在处理逻辑上几乎等价。但如果你已经手上有 jQuery，$.grep() 的 irt 特性能让某些场景下的代码更紧凑，值得列入工具箱。
