As VUE and React are more and more widely used in actual development, front-end operators have more and more requirements for data processing. This article discusses the search capabilities of lightweight lists. When the server’s colleagues send all the data back to the front end, the front end does the conditional query, reducing the number of requests sent to the server, thereby greatly improving performance. This article covers many types of queries. Look at the code below, in the knowledge point:

// Test data
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"},]Copy the code

Single condition accurate search

/*** * @param {Object} Lists All data * @param {string} key Key value of the data to be queried * @param {string} value Value to be queried */
searchKeyValue(lists,key,value) {
     let res = lists.filter(item= > item[key] == value);
     return res
},
// Function execution looks for data in the "staff" object whose "job" is "programmer"
this.searchKeyValue(staff,"job"."programmer")
Copy the code

Single condition multi – value accurate search

/** * @param {Object} Lists All data * @param {string} key Key of the data to be queried * @param {Array} valueArr Value to be queried */
searchKeyValues(lists,key,valueArr){
     let res = lists.filter(item= > valueArr.find(i= > i === item[key]))
     return res;
},
// Function execution looks for data in the "staff" object whose "job" is "programmer" and "student"
this.searchKeyValues(staff,"job"['programmer'.'student'])
Copy the code

Multi-condition accurate search

/** * @param {Object} lists All data * @param {Object} filters need to be queried */
searchKeysValue(lists, filters) {
    let key = Object.keys(filters);
    let resArr = lists.filter(item= > key.find(k= > item[k] == filters[k]))
},

// The function performs a search in the "staff" object for data whose "name" is "April" and "hobby" is "study"
// The second argument to this method is an object
let filters = {
    name: "April".hobby: "study"
}
this.searchKeysValue(staff, filters)
Copy the code

Multi-condition and multi-value accurate search

/** * @param {Object} lists all data * @param {Object} filters need to query data */ 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)
                 }
             }
             break}})}, // Performs a search on the "staff" object for data whose "age" is "8" or "18" and whose "hobby" is "play" or "sleep" // Note that the second argument is an object and the key is a multi-valued arrayletFilters = {age:[8,18], hobby:["play"."sleep"]
}
this.searchKeysValues(staff,filters)
Copy the code

Knowledge points involved

The filter() method is used to filter array elements. This method creates a new array containing all the elements of the tests implemented through the provided function. Filter () does not detect the empty array and does not alter the original array. The syntax is as follows:

Var newArray = arr.filter(callback(Element [, index[, array]])[, thisArg]) returntrueIndicates that the element passes the test, the element is retained,falseIs not reserved. * thisArg callback, used for this value. * /Copy the code

The find() method is used to return the value of the first element in the array that satisfies the provided test function. Otherwise return undefined. For an empty array, the function is not executed. This method does not change the original value of the array. The syntax is as follows:

arr.find(callback[, thisArg])
// Callback is a function that executes on each item of the array.
ThisArg optionally used as this object when executing the callback.
Copy the code

To sum up:

  • Same: find and filter are methods that do not change the original array and do not check for an empty array.

  • Difference: find returns only the first result that meets the criteria, as in this example, which returns an object instead of an array

, and filter returns all results that are still arrays.

What is mentioned above is to find the corresponding data accurately according to the keyword of the field, when the demand becomes fuzzy query? This is where the string indexof methods, includes(), and regular expressions come in handy.

indexof()Fuzzy query

 /** * @param {Object} Lists All data * @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;
 },
 // The function performs a search in the "staff" object for data containing "coot".
this.selectMatchItem(staff,'coot')
Copy the code

indexof()Multi-valued fuzzy query

/** * @param {Object} lists all data * @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); }}}))returnresArr; } // The function performs a search in the "staff" object for data containing either "coot" or "8". this.selectMatchItems(staff,['odd'.'8'])
Copy the code

Since the principle of multi-valued fuzzy query is the same, the following methods will not be described.

includes()Fuzzy query

/** * @param {Object} lists All data * @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;
},
// The function performs a search in the "staff" object for data containing "coot".
this.selectMatchItem(staff,'coot')
Copy the code

emmm… What is the difference between indexof() and includes??

  • Indexof () is an es5 method that returns the first indexof a given element that can be found in an array/string, or -1 if none exists.

  • Includes () is an ES6 method that determines whether an array contains a specified value, returning true if it does and false otherwise.

    Look at the figure below: what if the value you’re looking for happens to be NaN?

    Result Indexof () returns -1 and includes() returns true.

  • Includes () is more complete and semantic.

Regular matching fuzzy query

/** * @param {Object} lists All data * @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;
},
// The function performs a search for data containing "8" in the "staff" object.
this.selectMatchItem(staff,'8')
Copy the code

These methods are similar in performance. The test() method, on the other hand, is much more powerful and much cleaner because it uses regular expressions. For example, in case insensitive fuzzy search conditions, the test method is case-insensitive by adding the modifier I to the regular expression, whereas other methods require multiple method calls and logical operators. Of course, there are many ways to choose the right one is the best.