1. jQuery - Grep 简介
jQuery - Grep 是 jQuery 中十分实用的工具函数之一,用于筛选数组元素并将结果返回到新的数组对象中。
具体来说,Grep 函数接收两个参数。第一个参数是待筛选数组,第二个参数是一个筛选条件或筛选函数。筛选条件可以是一个字符串或者一个正则表达式,筛选函数接收数组索引和元素值作为参数并返回 true 或 false,以决定元素是否被保留到新数组中。
// 筛选出数组中以 'T' 开头的字符串元素
var arr = ['Tom','Jerry','Tim','Tony'];
var newArr = $.grep(arr,function(val,idx){
return val.charAt(0)=='T';
});
console.log(newArr); // ['Tom', 'Tim', 'Tony']
Grep 函数的优点是可以在原数组不进行变化的情况下筛选元素,同时也能够满足一些比较特殊、复杂的筛选需求。
2. jQuery - Grep 的常规使用
2.1 筛选条件为字符串
当筛选条件为字符串时,Grep 函数会返回所有符合条件的元素组成的数组。
// 筛选出数组中大于 5 的元素
var arr = [1,3,5,7,9];
var newArr = $.grep(arr,function(val,idx){
return val>5;
});
console.log(newArr); // [7, 9]
// 筛选出数组中包含 'jquery' 字符串的元素
var arr = ['jquery','angular','react'];
var newArr = $.grep(arr,'jquery');
console.log(newArr); // ['jquery']
需要注意的是,当筛选条件为字符串时,Grep 函数会将其视为正则表达式中的模式字符串(pattern),而模式字符串与正则表达式对象中的 pattern 属性一致。
2.2 筛选条件为正则表达式
当筛选条件为正则表达式对象时,Grep 函数会返回所有符合正则表达式要求的元素组成的数组。
// 筛选出数组中包含字母 'm' 的元素
var arr = ['Tom','Jerry','Tim','Tony'];
var pattern = /[m]/;
var newArr = $.grep(arr,pattern);
console.log(newArr); // ['Tim']
// 筛选出数组中以数字结尾的元素
var arr = ['123','Tom',7,'Jerry'];
var pattern = /\d$/;
var newArr = $.grep(arr,pattern);
console.log(newArr); // ['123', 7]
3. jQuery - Grep 的高级使用
3.1 筛选函数实现
Grep 函数在实现筛选条件时,除了可以使用字符串和正则表达式之外,也可以自定义一个筛选函数来实现更高级、更复杂的筛选需求。
// 筛选出数组中奇数元素
var arr = [1,2,3,4,5];
var func = function(val,idx){
return val%2==1; // 判断元素是否为奇数
};
var newArr = $.grep(arr,func);
console.log(newArr); // [1, 3, 5]
筛选函数接收两个参数,前者为数组元素,后者为元素索引,需要根据这两个参数决定是否保留该元素到新的数组。
3.2 自定义逻辑实现
筛选函数是 Grep 函数最强大的一种运用方式,可以用于解决特殊的筛选需求。比如,筛选出数组中连续的元素,用一个数组将它们进行归并并返回结果,代码如下:
// 筛选出数组中连续的元素,并将其归并
var arr = [1,2,3,5,6,7,9];
var func = function(val,idx){
if(idx==0){return true;} // 第一个元素直接保留
return val-1==arr[idx-1]; // 判断是否与前一个元素相邻
};
var newArr = $.map( // 使用 map 函数进行归并
$.grep(arr,func),
function(val,idx){
if(idx==0){return [val];} // 第一个元素作为归并后的数组元素
if(val-1==newArr[idx-1][newArr[idx-1].length-1]) // 与前一个元素相邻,归并到同一个数组元素中
{newArr[idx-1].push(val);}
else
{newArr.push([val]);} // 不相邻,新开辟一个数组元素
return null; // 此处必须返回 null,否则 map 函数不会返回数组
}
);
console.log(newArr); // [[1, 2, 3], [5, 6, 7], [9]]
需要注意的是,在自定义逻辑实现时,不仅需要实现筛选函数准确地判断符合条件的元素,还要使用其他辅助函数实现各种复杂的操作逻辑,在代码的可读性和稳定性上也要做出一定的考量。
4. 总结
jQuery - Grep 是一个十分实用的工具函数,可以用于实现多种多样的数组筛选需求。该函数主要有两种运用方式:一种是使用字符串或正则表达式作为筛选条件,可以方便地完成简单筛选操作;另一种是使用自定义的筛选函数,可以实现更为复杂的筛选需求。同时,在自定义逻辑实现时,还要对代码的可读性和稳定性做出一定的考量。