隨著vue、react在實(shí)際開發(fā)中應(yīng)運(yùn)越來越廣泛，前端們處理數(shù)據(jù)的需求越來越多。這篇文章就討論一下輕量級列表的搜索功能。當(dāng)服務(wù)器的同事將所有數(shù)據(jù)返回到前端時，前端來做按條件查詢，可以減少向服務(wù)器發(fā)送請求的次數(shù)，從而大大的提高性能。本文涉及多種方式的查詢。下面先看代碼，在說知識點(diǎn)：

// 測試用的數(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"},
]

單條件精準(zhǔn)查找

/*** 
* @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")

單條件多值精準(zhǔn)查找

/**
* @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'])

多條件準(zhǔn)查找

/**
* @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)

多條件多值精準(zhǔn)查找

 /**
 * @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ù)是個對象,鍵對應(yīng)的值是個多值的數(shù)組
let filters = {
    age:[8,18],
    hobby:["play","sleep"]
}
this.searchKeysValues(staff,filters)

涉及的知識點(diǎn)

filter()方法用于過濾數(shù)組元素。該方法創(chuàng)建一個新數(shù)組, 其中包含通過所提供函數(shù)實(shí)現(xiàn)的測試的所有元素。filter()不會對空數(shù)組進(jìn)行檢測，也不會改變原始數(shù)組。語法如下：

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
/** 
 * callback 用來測試數(shù)組的每個元素的函數(shù)。返回 true 表示該元素通過測試，保留該元素，false 則不保留。
 * thisArg 執(zhí)行 callback 時，用于 this 的值。
 */

find()方法用于返回?cái)?shù)組中滿足提供的測試函數(shù)的第一個元素的值。否則返回 undefined。對于空數(shù)組，函數(shù)是不會執(zhí)行的。該方法沒有改變數(shù)組的原始值。語法如下：

arr.find(callback[, thisArg])
// callback 在數(shù)組每一項(xiàng)上執(zhí)行的函數(shù)。
// thisArg可選 執(zhí)行回調(diào)時用作this 的對象。

綜上所述：

• 相同：find 和 filter 都是不改變原數(shù)組的方法，都不會對空數(shù)組進(jìn)行檢測。

• 區(qū)別：find只查出第一個符合條件的結(jié)果像例子里是直接返回了一個對象而不是數(shù)組

，而filter返回全部結(jié)果仍然是數(shù)組。

上面說到的都是按字段的關(guān)鍵字精準(zhǔn)的去查找對應(yīng)的數(shù)據(jù)，當(dāng)需求變?yōu)槟：樵兡?？這個時候字符串的indexof方法、includes()和正則表達(dá)式就派上了用場。

indexof()模糊查詢

 /** * @param {Object} lists 所有數(shù)據(jù) 
 * @param {string} keyWord 查詢的關(guān)鍵詞
 */
 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 查詢的關(guān)鍵詞
*/
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'])

因?yàn)槎嘀的：樵兊脑矶际且粯?，一下的方法將不再贅述?/p>

includes()模糊查詢

/**
* @param {Object} lists 所有數(shù)據(jù)
* @param {Object} keyWord 查詢的關(guān)鍵詞
*/
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()更加完善，且語義化更強(qiáng)。

正則匹配模糊查詢

/**
* @param {Object} lists 所有數(shù)據(jù)
* @param {Object} keyWord 查詢的關(guān)鍵詞
*/
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()方法因?yàn)槭褂玫搅苏齽t表達(dá)式，所以能夠?qū)崿F(xiàn)的功能會比較強(qiáng)大，寫出來的代碼也更加簡潔。打個比方，在不區(qū)分大小寫的模糊搜索條件下， test 方法只需在正則表達(dá)式中添加修飾符 i 即可實(shí)現(xiàn)不區(qū)分大小寫，而其它方法則要通過多次的方法調(diào)用和邏輯運(yùn)算符才能實(shí)現(xiàn)效果。當(dāng)然方法還有很多，選擇適合的才是最好的。