简单技巧:解析jQuery - Grep

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 是一个十分实用的工具函数,可以用于实现多种多样的数组筛选需求。该函数主要有两种运用方式:一种是使用字符串或正则表达式作为筛选条件,可以方便地完成简单筛选操作;另一种是使用自定义的筛选函数,可以实现更为复杂的筛选需求。同时,在自定义逻辑实现时,还要对代码的可读性和稳定性做出一定的考量。