jquery数组过滤筛选方法grep()简介

jquery数组过滤筛选方法grep()简介

jquery中提供了一个非常方便的方法 grep() ，用于对数组进行筛选过滤，得到符合条件的元素列表。

grep()方法的语法

$.grep(array, function(elementOfArray, indexInArray), [invert])

其中：

• array - 必需。待过滤的数组。

• function(elementOfArray, indexInArray) - 必需。用于测试每个元素的函数。

  • elementOfArray - 必需。当前元素的值。

  • indexInArray - 必需。当前元素的索引值。

• invert - 可选。如果 "invert" 设置为 true，则函数返回过滤结果集之外的项。

在使用 grep() 方法时，我们需要传入一个函数，用于对数组中的每个元素进行测试。如果函数返回 true，则该元素被包含在最终的结果列表中，反之则被过滤掉。

grep()方法的示例

下面我们来看看 grep() 方法的两个示例：

示例一

假设我们有一个数字数组，我们需要筛选出其中所有小于 5 的元素。

var arr = [1, 3, 5, 7, 9];
var filteredArr = $.grep(arr, function(n, i){
    return n < 5;
});
console.log(filteredArr); // 输出 [1, 3]

在这个示例中，我们先定义了一个数字数组 [1, 3, 5, 7, 9]，然后使用 grep() 方法进行筛选。筛选条件为元素值小于 5。因此，最终的结果列表为 [1, 3]。

示例二

假设我们有一个对象数组，我们需要筛选出其中所有包含某个关键字的元素。

var objArr = [
    {name: "张三", age: 18},
    {name: "李四", age: 20},
    {name: "王五", age: 22},
    {name: "赵六", age: 24},
];
var filteredArr = $.grep(objArr, function(obj, i){
    return obj.name.indexOf("三") !== -1;
});
console.log(filteredArr); // 输出 [{name: "张三", age: 18}]

在这个示例中，我们定义了一个对象数组 objArr，其元素为不同的人员信息对象。我们需要筛选出所有包含关键字 "三" 的人员信息对象。因此，我们使用 grep() 方法，其中函数测试条件为 obj.name.indexOf("三") !== -1，表示元素中的 name 属性包含子串 "三"。最终的结果列表为 [{name: "张三", age: 18}]。

总结

使用 grep() 方法可以非常方便地对数组进行筛选过滤。使用时，需要传入一个测试函数，当元素符合测试条件时则将该元素加入最终的结果列表。