今天在做項目的時候，遇到一個需求是對列表進行模糊查詢。對于模糊查詢，一般都是傳關鍵字給后端，由后端來做。但是有時候一些輕量級的列表前端來做可以減少ajax請求，在一定程度上提高用戶體驗。我目前的情況恰好是后臺已經(jīng)把全部數(shù)據(jù)給到前端了，所以就想用js對數(shù)據(jù)進行一個模糊查詢。
那么問題來了，要怎么進行模糊查詢呢？頭腦里一閃而過，字符串的indexof方法和正則表達式，其實還可以用其他的方法，比如字符串的match方法和split方法。既然有這么多種方法，那么該用哪種比較好呢？接下來我將對每一種方法進行簡單的介紹。
1. indexof 方法
語法：stringObject.indexOf(searchvalue, fromindex)
參數(shù)：searchvalue 必需。規(guī)定需檢索的字符串值。 fromindex 可選的整數(shù)參數(shù)。規(guī)定在字符串中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數(shù)，則將從字符串的首字符開始檢索。
說明：該方法將從頭到尾地檢索字符串 stringObject，看它是否含有子串 searchvalue。開始檢索的位置在字符串的 fromindex 處或字符串的開頭（沒有指定 fromindex 時）。如果找到一個 searchvalue，則返回 searchvalue 的第一次出現(xiàn)的位置。stringObject 中的字符位置是從 0 開始的。如果沒有找到，將返回 -1。
/**
* 使用indexof方法實現(xiàn)模糊查詢
* @param {Array} list 進行查詢的數(shù)組
* @param {String} keyWord 查詢的關鍵詞
* @return {Array} 查詢的結果
*/
function fuzzyQuery(list, keyWord) {
var arr = [];
for (var i = 0; i < list.length; i++) {
if (list[i].indexOf(keyWord) >= 0) {
arr.push(list[i]);
}
}
return arr;
}
2. split 方法
語法：stringObject.split(separator, howmany)
參數(shù)：separator 必需。字符串或正則表達式，從該參數(shù)指定的地方分割 stringObject。howmany 可選。該參數(shù)可指定返回的數(shù)組的最大長度。如果設置了該參數(shù)，返回的子串不會多于這個參數(shù)指定的數(shù)組。如果沒有設置該參數(shù)，整個字符串都會被分割，不考慮它的長度。
說明：該方法通過在 separator 指定的邊界處將字符串 stringObject 分割成子串并返回子串數(shù)組。返回的數(shù)組中的字串不包括 separator 自身。如果 stringObject 中不存在 separator，將返回一個只包含stringObject的數(shù)組。故可以根據(jù)返回數(shù)組的長度來判斷是否存在子字符串 separator 。
/**
* 使用spilt方法實現(xiàn)模糊查詢
* @param {Array} list 進行查詢的數(shù)組
* @param {String} keyWord 查詢的關鍵詞
* @return {Array} 查詢的結果
*/
function fuzzyQuery(list, keyWord) {
var arr = [];
for (var i = 0; i < list.length; i++) {
if (list[i].split(keyWord).length > 1) {
arr.push(list[i]);
}
}
return arr;
}
3. match 方法
語法：stringObject.match(searchvalue) 或 stringObject.match(regexp)
參數(shù)：searchvalue 必需。規(guī)定要檢索的字符串值。regexp 必需。規(guī)定要匹配的模式的 RegExp 對象。如果該參數(shù)不是 RegExp 對象，則需要首先把它傳遞給 RegExp 構造函數(shù)，將其轉換為 RegExp 對象。
說明：該方法將在字符串 stringObject 內(nèi)檢索指定的值，或找到一個或多個正則表達式的匹配。如果沒有找到任何匹配的文本，將返回 null 。否則，它將返回一個數(shù)組，其中存放了與它找到的匹配文本有關的信息。
/**
* 使用match方法實現(xiàn)模糊查詢
* @param {Array} list 進行查詢的數(shù)組
* @param {String} keyWord 查詢的關鍵詞
* @return {Array} 查詢的結果
*/
function fuzzyQuery(list, keyWord) {
var arr = [];
for (var i = 0; i < list.length; i++) {
if (list[i].match(keyWord) != null) {
arr.push(list[i]);
}
}
return arr;
}
4. test方法（正則匹配）
語法：RegExpObject.test(string)
參數(shù)：string 必需。要檢測的字符串。
說明：該方法用于檢測一個字符串是否匹配某個模式。如果字符串 string 中含有與 RegExpObject 匹配的文本，則返回 true，否則返回 false。
/**
* 使用test方法實現(xiàn)模糊查詢
* @param {Array} list 原數(shù)組
* @param {String} keyWord 查詢的關鍵詞
* @return {Array} 查詢的結果
*/
function fuzzyQuery(list, keyWord) {
var reg = new RegExp(keyWord);
var arr = [];
for (var i = 0; i < list.length; i++) {
if (reg.test(list[i])) {
arr.push(list[i]);
}
}
return arr;
}
性能測試
看了上面的簡單介紹之后，我相信大家會發(fā)現(xiàn)其實四種方法在使用上都差不多，無聊的我萌生了對這四種方法進行性能測試的想法。以下為測試用例和結果。
測試條件：一個長度為100的數(shù)組，每個方法測試50次，取平均值。
indexof 方法耗費時間： 0.048ms
split 方法耗費時間： 0.037ms
match 方法耗費時間： 0.178ms
test 方法耗費時間： 0.039ms
結論
從上面測試結果可以看出在幾百幾千甚至幾萬條數(shù)據(jù)量的情況下，前端去處理都是沒問題的，相比發(fā)送一個 ajax 請求去后臺來說，前端還是具有很大優(yōu)勢的，能節(jié)省不少時間。
相比其他方法，match 方法性能最差，消耗的時間差不多是其他方法的3-4倍，雖說這一點點時間相比發(fā)送ajax來說，也算提高了很多既然我們在一開始就是為了提高用戶體驗，那么我們也應該追求極致啦，所以 match 選手落敗。
除了 match 方法，其他三個方法在性能上差不多。不過在這里有一點需要提出的就是， test 方法因為使用到了正則表達式，所以能夠實現(xiàn)的功能會比較強大，寫出來的代碼也更加簡潔。打個比方，在不區(qū)分大小寫的模糊搜索條件下， test 方法只需在正則表達式中添加修飾符 i 即可實現(xiàn)不區(qū)分大小寫，而 indexof 方法和 split 方法則要通過多次的方法調(diào)用和邏輯運算符才能實現(xiàn)效果。
