隨著vue、react在實際開發(fā)中應運越來越廣泛庭猩，前端們處理數(shù)據(jù)的需求越來越多窟她。這篇文章就討論一下輕量級列表的搜索功能。當服務器的同事將所有數(shù)據(jù)返回到前端時蔼水，前端來做按條件查詢礁苗，可以減少向服務器發(fā)送請求的次數(shù)，從而大大的提高性能徙缴。本文涉及多種方式的查詢试伙。下面先看代碼，在說知識點：
// 測試用的數(shù)據(jù)
staff: [
{name: "April", job: "programmer", age: "18", hobby: "study"},
{name: "Shawn", job: "student", age: "8", hobby: "study"},
{name: "Leo", job: "teacher", age: "28", hobby: "play"},
{name: "Todd", job: "programmer", age: "19", hobby: "sleep"},
{name: "Scoot", job: "cook", age: "38", hobby: "paintting"},
]
單條件精準查找
/***
* @param {Object} lists 所有數(shù)據(jù)
* @param {string} key 需要查詢的數(shù)據(jù)的鍵值
* @param {string} value 需要查詢的值
*/
searchKeyValue(lists,key,value) {
let res = lists.filter(item => item[key] == value);
return res
},
// 函數(shù)執(zhí)行 在 “staff” 對象中查找 “job” 值為 “programmer” 的數(shù)據(jù)
this.searchKeyValue(staff,"job","programmer")
單條件多值精準查找
/**
* @param {Object} lists 所有數(shù)據(jù)
* @param {string} key 需要查詢的數(shù)據(jù)的鍵值
* @param {Array} valueArr 需要查詢的值
*/
searchKeyValues(lists,key,valueArr){
let res = lists.filter(item => valueArr.find(i => i === item[key]))
return res;
},
// 函數(shù)執(zhí)行 在 “staff” 對象中查找 “job” 值為 “programmer” 和 “student” 的數(shù)據(jù)
this.searchKeyValues(staff,"job",['programmer','student'])
多條件準查找
/**
* @param {Object} lists 所有數(shù)據(jù)
* @param {Object} filters 需要查詢的數(shù)據(jù)
*/
searchKeysValue(lists, filters) {
let resArr = [];
lists.filter(item => {
for (let i in filters) {
if (item[i] == filters[i]) {
let res = item;
resArr.push(res)
}
}
});
return resArr
},
// 函數(shù)執(zhí)行 在 “staff” 對象中查找 “name” 值為 “April” 和 “hobby” 值為 “study” 的數(shù)據(jù)
// 注：該方法第二個參數(shù)是個對象
let filters = {
name: "April",
hobby: "study"
}
this.searchKeysValue(staff, filters)
多條件多值精準查找
/**
* @param {Object} lists 所有數(shù)據(jù)
* @param {Object} filters 需要查詢的數(shù)據(jù)
*/
searchKeysValues(lists, filters) {
let resArr = [];
lists.filter((item) => {
for (let i in filters) {
for (let j of filters[i]) {
if (item[i] == j) {
resArr.push(item)
}
}
}
})
},
// 函數(shù)執(zhí)行 在 “staff” 對象中查找 “age” 值為 “8”或“18” 和 “hobby” 值為 “play”或“sleep” 的數(shù)據(jù)
// 注：該方法第二個參數(shù)是個對象,鍵對應的值是個多值的數(shù)組
let filters = {
age:[8,18],
hobby:["play","sleep"]
}
this.searchKeysValues(staff,filters)
涉及的知識點
filter()方法用于過濾數(shù)組元素于样。該方法創(chuàng)建一個新數(shù)組, 其中包含通過所提供函數(shù)實現(xiàn)的測試的所有元素疏叨。filter()不會對空數(shù)組進行檢測，也不會改變原始數(shù)組穿剖。語法如下：
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
/**
* callback 用來測試數(shù)組的每個元素的函數(shù)蚤蔓。返回 true 表示該元素通過測試，保留該元素糊余，false 則不保留秀又。
* thisArg 執(zhí)行 callback 時，用于 this 的值贬芥。
*/
find()方法用于返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的值吐辙。否則返回 undefined。對于空數(shù)組蘸劈，函數(shù)是不會執(zhí)行的昏苏。該方法沒有改變數(shù)組的原始值。語法如下：
arr.find(callback[, thisArg])
// callback 在數(shù)組每一項上執(zhí)行的函數(shù)。
// thisArg可選 執(zhí)行回調(diào)時用作this 的對象贤惯。
綜上所述：
相同：
find和filter都是不改變原數(shù)組的方法洼专，都不會對空數(shù)組進行檢測。區(qū)別：
find只查出第一個符合條件的結(jié)果像例子里是直接返回了一個對象而不是數(shù)組
孵构，而filter返回全部結(jié)果仍然是數(shù)組屁商。
上面說到的都是按字段的關鍵字精準的去查找對應的數(shù)據(jù)，當需求變?yōu)槟：樵兡鼐笔窟@個時候字符串的indexof方法蜡镶、includes()和正則表達式就派上了用場。
indexof()模糊查詢
/** * @param {Object} lists 所有數(shù)據(jù)
* @param {string} keyWord 查詢的關鍵詞
*/
selectMatchItem(lists, keyWord) {
let resArr = [];
lists.filter(item => {
for(let i in item){
if (item[i].indexOf(keyWord) >= 0) {
resArr.push(item);
}
}
})
return resArr;
},
// 函數(shù)執(zhí)行 在 “staff” 對象中查找 包含 “coot” 的數(shù)據(jù)精盅。
this.selectMatchItem(staff,'coot')
indexof()多值模糊查詢
/**
* @param {Object} lists 所有數(shù)據(jù)
* @param {Array} keyWord 查詢的關鍵詞
*/
selectMatchItems(lists, keyWords) {
let resArr = [];
lists.filter(item => keyWords.find(keyWord => {
for(let i in item){
if (item[i].indexOf(keyWord) >= 0) {
resArr.push(item);
}
}
}))
return resArr;
}
// 函數(shù)執(zhí)行 在 “staff” 對象中查找 包含 “coot”或者“8” 的數(shù)據(jù)。
this.selectMatchItems(staff,['odd','8'])
因為多值模糊查詢的原理都是一樣谜酒，一下的方法將不再贅述叹俏。
includes()模糊查詢
/**
* @param {Object} lists 所有數(shù)據(jù)
* @param {Object} keyWord 查詢的關鍵詞
*/
selectMatchItem(lists, keyWord) {
let resArr = [];
lists.filter(item => {
for(let i in item){
if (item[i].includes(keyWord)) {
resArr.push(item);
}
}
})
return resArr;
},
// 函數(shù)執(zhí)行 在 “staff” 對象中查找 包含 “coot” 的數(shù)據(jù)。
this.selectMatchItem(staff,'coot')
emmm...此處就不得不問indexof()與includes()有啥子區(qū)別僻族？粘驰？？
indexof()是es5的方法述么，該方法返回在數(shù)組/字符串中可以找到一個給定元素的第一個索引蝌数，如果不存在，則返回-1度秘。-
includes()是es6的方法顶伞，該方法用來判斷一個數(shù)組是否包含一個指定的值，根據(jù)情況剑梳，如果包含則返回 true唆貌，否則返回false。再看下圖：查找的值碰巧是
NaN呢垢乙？
WechatIMG8.jpeg
結(jié)果indexof()返回-1锨咙，includes()返回true。 includes()更加完善追逮，且語義化更強酪刀。
正則匹配模糊查詢
/**
* @param {Object} lists 所有數(shù)據(jù)
* @param {Object} keyWord 查詢的關鍵詞
*/
selectMatchItem(lists, keyWord) {
let reg = new RegExp(keyWord);
let resArr = [];
lists.filter(item => {
for(let i in item){
if (reg.test(item[i])) {
resArr.push(item);
}
}
})
return resArr;
},
// 函數(shù)執(zhí)行 在 “staff” 對象中查找 包含 “8” 的數(shù)據(jù)。
this.selectMatchItem(staff,'8')
這幾個方法在性能上差不多钮孵。但是test()方法因為使用到了正則表達式骂倘，所以能夠?qū)崿F(xiàn)的功能會比較強大，寫出來的代碼也更加簡潔巴席。打個比方稠茂，在不區(qū)分大小寫的模糊搜索條件下， test 方法只需在正則表達式中添加修飾符 i 即可實現(xiàn)不區(qū)分大小寫，而其它方法則要通過多次的方法調(diào)用和邏輯運算符才能實現(xiàn)效果睬关。當然方法還有很多诱担，選擇適合的才是最好的。
