jQuery.grep() 方法（长文讲解）

什么是 jQuery.grep() 方法

在前端开发中，我们经常需要对数组中的数据进行筛选，比如从用户列表中找出年龄大于 18 岁的成员，或者从商品数组中筛选出价格低于 100 元的商品。jQuery 提供了一个非常实用的方法——jQuery.grep()，专门用于根据条件从数组中筛选出符合条件的元素。

你可以把 jQuery.grep() 想象成一个“过滤器”，它接收一个原始数组和一个判断函数，然后返回一个新数组，里面只包含那些让判断函数返回 true 的元素。这个方法不会修改原数组，而是创建并返回一个新数组，这符合函数式编程的“不可变性”原则。

与原生 JavaScript 的 Array.filter() 方法相比，jQuery.grep() 的语法稍微不同，但功能几乎一致。如果你已经在项目中使用了 jQuery，那么 jQuery.grep() 是一个轻量级、高效的选择，尤其适合那些习惯 jQuery 风格的开发者。

值得一提的是，jQuery.grep() 不仅能处理普通数组，还可以处理类数组对象（如 arguments、DOM 集合等），这让它在处理复杂场景时更具灵活性。

基本语法与参数说明

jQuery.grep() 的基本语法如下：

jQuery.grep( array, function(element, index) {}, invert )

array：要筛选的原始数组或类数组对象。
function(element, index)：用于判断每个元素是否符合条件的回调函数。其中 element 是当前元素，index 是当前元素的索引。
invert：可选参数，布尔值。默认为 false，表示保留返回 true 的元素；若为 true，则保留返回 false 的元素。

这个方法返回一个新数组，只包含满足条件的元素。

我们来拆解一下这个方法的核心逻辑：

遍历传入的 array 中的每一个元素；
将每个元素和索引传入回调函数；
根据回调函数的返回值决定是否保留该元素；
最终返回一个新数组。

⚠️ 注意：jQuery.grep() 不会改变原数组，它是纯函数，安全且可预测。

实际案例：筛选年龄大于 18 的用户

假设我们有一个用户信息数组，包含姓名和年龄：

const users = [
  { name: "张三", age: 20 },
  { name: "李四", age: 16 },
  { name: "王五", age: 25 },
  { name: "赵六", age: 17 },
  { name: "钱七", age: 30 }
];

现在我们要筛选出年龄大于 18 岁的用户。使用 jQuery.grep() 可以这样写：

const adults = jQuery.grep(users, function(user, index) {
  // 检查当前用户的年龄是否大于 18
  return user.age > 18;
});

console.log(adults);
// 输出：[{ name: "张三", age: 20 }, { name: "王五", age: 25 }, { name: "钱七", age: 30 }]

这段代码的逻辑非常清晰：

user 是当前遍历的用户对象；
index 是当前用户的数组索引；
return user.age > 18 判断是否保留该用户；
最终返回一个只包含成年人的新数组。

这个例子说明了 jQuery.grep() 如何通过回调函数实现灵活的数据筛选。

使用 invert 参数实现“反向筛选”

invert 参数是 jQuery.grep() 的一个强大特性。它允许我们“反转”筛选逻辑。

比如，我们想找出年龄小于等于 18 岁的用户，也就是“非成年人”。如果不用 invert，我们可以写成：

const minors = jQuery.grep(users, function(user, index) {
  return user.age <= 18;
});

但更简洁的方式是使用 invert 参数：

const minors = jQuery.grep(users, function(user, index) {
  return user.age > 18;
}, true); // 第三个参数为 true，表示“取反”

✅ invert: true 的作用是：原本返回 true 的保留，现在变成不保留；原本返回 false 的保留，现在变成保留。

这在某些逻辑复杂的场景中非常有用，比如从“有效数据”中筛选出“无效数据”，避免写重复的判断逻辑。

处理字符串数组的过滤场景

jQuery.grep() 不仅适用于对象数组，也常用于字符串数组的筛选。

比如我们有一组商品名称，想找出包含“手机”字样的商品：

const products = [
  "iPhone 15",
  "华为Mate 60",
  "小米电视",
  "OPPO Find X7",
  "荣耀平板",
  "iPhone 14 Pro"
];

使用 jQuery.grep() 可以这样写：

const phones = jQuery.grep(products, function(product, index) {
  // 检查当前商品名称是否包含“手机”二字
  return product.includes("手机");
});

console.log(phones);
// 输出：[]（因为没有商品名称中包含“手机”）

注意：这里没有匹配项，因为中文“手机”在字符串中未出现。我们可以改一下数据测试：

const products = [
  "iPhone 15",
  "华为Mate 60",
  "小米手机",
  "OPPO Find X7",
  "荣耀平板",
  "iPhone 14 Pro",
  "小米14手机"
];

再次运行：

const phones = jQuery.grep(products, function(product, index) {
  return product.includes("手机");
});

console.log(phones);
// 输出：["小米手机", "小米14手机"]

这个例子说明 jQuery.grep() 能灵活处理字符串匹配，结合 includes()、indexOf() 等方法，可以实现复杂条件的筛选。

与原生 filter 方法的对比

虽然 jQuery.grep() 功能强大，但现代 JavaScript 已经提供了 Array.filter() 方法，语法更简洁，性能也更优。我们来做一个对比：

// 使用 jQuery.grep()
const adults1 = jQuery.grep(users, function(user) {
  return user.age > 18;
});

// 使用原生 filter
const adults2 = users.filter(function(user) {
  return user.age > 18;
});

两者结果完全相同，但 filter 更简洁，且无需依赖 jQuery。因此，如果你的项目中没有使用 jQuery，或者你希望减少依赖，推荐使用 Array.filter()。

然而，如果你的项目已经引入了 jQuery，且团队习惯使用其 API 风格，jQuery.grep() 依然值得保留。它在处理类数组对象时更有优势，比如：

// 假设有一个类数组对象（DOM 元素集合）
const elements = document.querySelectorAll("div");

// 使用 jQuery.grep 筛选 class 为 "active" 的元素
const activeDivs = jQuery.grep(elements, function(el) {
  return el.classList.contains("active");
});

这个场景中，Array.filter() 无法直接使用，因为 NodeList 不是真正的数组，而 jQuery.grep() 可以处理这类对象。

性能与使用建议

尽管 jQuery.grep() 功能稳定，但需要注意以下几点：

性能：在大数据量下，jQuery.grep() 的性能略逊于原生 filter，因为它涉及 jQuery 的内部封装。
依赖：引入 jQuery 会增加项目体积，如果只是使用 grep()，可能得不偿失。
可读性：对于新手来说，jQuery.grep() 的语法稍显复杂，不如 filter 直观。

因此，建议在以下场景使用 jQuery.grep()：

项目中已使用 jQuery，且有大量 jQuery API 调用；
需要处理类数组对象（如 DOM 集合、arguments）；
团队风格统一使用 jQuery 风格的函数。

在其他情况下，优先选择 Array.filter()。

常见错误与注意事项

在使用 jQuery.grep() 时，开发者容易犯以下几种错误：

忘记返回值：回调函数必须显式返回 true 或 false，否则默认返回 undefined，会被当作 false 处理。

// ❌ 错误示例：没有 return
jQuery.grep([1, 2, 3], function(num) {
  if (num > 1) {
    console.log(num); // 只打印，不返回
  }
});
// 返回空数组！因为没有返回值

误用 invert 参数：invert 是布尔值，传入 0 或 "" 会转换为 false，导致逻辑错误。

// ❌ 错误：invert 参数不是数字
jQuery.grep(arr, fn, 1); // 1 会被当作 true，但容易误解

修改原数组：jQuery.grep() 不会修改原数组，如果需要更新原数组，必须手动赋值。
```
const filtered = jQuery.grep(arr, fn);
arr = filtered; // 手动更新
```

总结

jQuery.grep() 方法是一个强大而实用的数组筛选工具，尤其适合在 jQuery 生态中进行数据处理。它通过回调函数实现灵活筛选，支持 invert 参数实现反向过滤，还能处理类数组对象。

尽管现代 JavaScript 提供了更简洁的 filter 方法，但在某些特定场景下，jQuery.grep() 依然具有不可替代的优势。掌握它，能让你在处理数据时更加得心应手。

对于初学者来说，理解 jQuery.grep() 的工作原理，有助于建立“函数式编程”思维，学会用“判断函数”来控制数据流动。而对于中级开发者，它是一个值得收藏的实用工具，尤其在处理复杂 DOM 操作或类数组数据时。