This is the 15th day of my participation in the August More Text Challenge

💪~ If you like it, you can like it or leave a comment 💕~~~, thank you ⭐️ 💕 ️~~

For fuzzy queries, the keyword is usually passed to the back end, and the back end does it. But sometimes a lightweight list front end can reduce Ajax requests and improve the user experience to some extent. It also saves a lot of time

1. The indexof method

Syntax: stringobject.indexof (searchValue,fromindex) Parameter: searchValue required. Specifies the string value to retrieve. Fromindex An optional integer. Specifies the starting point in a string for retrieval. Its legal values are 0 to stringobject.length-1. If omitted, the retrieval begins with the first character of the string.

Note: This method retrieves the string stringObject from beginning to end to see if it contains the substring searchValue. The location to start the search is at the fromindex of the string or at the beginning of the string (when no fromindex is specified). If a searchValue is found, the location of the first occurrence of the searchValue is returned. Character positions in stringObject start at 0. If none is found, -1 is returned.

  /** * Use indexof to implement fuzzy query *@param  {Array}  List Specifies the array to be queried@param  {String} KeyWord Query keyWord *@return {Array}           Query result */
  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;
  }
Copy the code

2. The split method

  /** * implement fuzzy query with spilt method *@param  {Array}  List Specifies the array to be queried@param  {String} KeyWord Query keyWord *@return {Array}           Query result */
  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;
  }
Copy the code

3. Match method

  /** * use match to implement fuzzy query *@param  {Array}  List Specifies the array to be queried@param  {String} KeyWord Query keyWord *@return {Array}           Query result */
  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;
  }
Copy the code

4. Test method (regular matching)

 /** * use the test method to implement fuzzy query *@param  {Array}  List Original array *@param  {String} KeyWord Query keyWord *@return {Array}           Query result */
  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;
  }
Copy the code

Specific indexof, split, match, can use to refer to the website to see the test method of learning, there is no do, rounding the www.w3school.com.cn/jsref/jsref…

Conclusion: Of the above four methods, except the match method, the performance of the other three methods is similar. However, test is recommended because it is flexible in using regex.

Past hot articles

  • Vue interview summary
  • Js Interview questions often contain detailed answers
  • Es6 summary
  • The JS array reduce() method
  • Js array sort ()
  • HTML Interview Summary
  • CSS Interview Summary
  • Summary of wechat mini program interview
  • Css3 implementation of animation effects commonly used method guide