js 实现本地模糊搜索

前端实现模糊搜索 indexOf、split 、match、test

• indexOf方法

语法：stringObject.indexOf(searchvalue, fromindex)

参数：searchvalue 必需。规定需检索的字符串值。 fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

getArrayByName(list, keyWord) { //本地模糊搜索
    /**
     * 使用indexof方法实现模糊查询
     * @param  {Array}  list     进行查询的数组
     * @param  {String} keyWord  查询的关键词
     * @return {Array}           查询的结果
     */
    var result = [];
    for (var key in list) {
      for(let i = 0; i < list[key].users.length; i++){ //根据数据格式更改自己的循环格式
        if (list[key].users[i].name.indexOf(keyWord) >= 0) {
          result.push(list[key].users[i])
        }
      }
    }
    return result 
  },

• split 方法

语法：stringObject.split(separator, howmany)

参数：separator 必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

getArrayByName(list, keyWord) { //本地模糊搜索
    /**
     * 使用split方法实现模糊查询
     * @param  {Array}  list     进行查询的数组
     * @param  {String} keyWord  查询的关键词
     * @return {Array}           查询的结果
     */
    var result = [];
    for (var key in list) {
      for(let i = 0; i < list[key].users.length; i++){ //根据数据格式更改自己的循环格式
        if (list[key].users[i].name.split(keyWord).length > 1) {
          result.push(list[key].users[i])
        }
      }
    }
    return result 
  },

• match 方法

语法：stringObject.match(searchvalue) 或 stringObject.match(regexp)

参数：searchvalue 必需。规定要检索的字符串值。regexp 必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。

getArrayByName(list, keyWord) { //本地模糊搜索
    /**
     * 使用match方法实现模糊查询
     * @param  {Array}  list     进行查询的数组
     * @param  {String} keyWord  查询的关键词
     * @return {Array}           查询的结果
     */
    var result = [];
    for (var key in list) {
      for(let i = 0; i < list[key].users.length; i++){ //根据数据格式更改自己的循环格式
        if (list[key].users[i].name.match(keyWord) != null) {
          result.push(list[key].users[i])
        }
      }
    }
    return result 
  },

• test方法

语法：RegExpObject.test(string)

参数：string 必需。要检测的字符串。

getArrayByName(list, keyWord) { //本地模糊搜索
    /**
     * 使用test方法实现模糊查询
     * @param  {Array}  list     进行查询的数组
     * @param  {String} keyWord  查询的关键词
     * @return {Array}           查询的结果
     */
    var reg =  new RegExp(keyWord);
    var result = [];
    for (var key in list) {
      for(let i = 0; i < list[key].users.length; i++){ //根据数据格式更改自己的循环格式
        if (reg.test(list[key].users[i].name)) {
          result.push(list[key].users[i])
        }
      }
    }
    return result 
  },

以上四种方法，对于数据量很多数据，前端进行本地搜索，要好过于去请求后台接口。

注意：match方法性能消耗要比其他两个耗费的时候多到3倍左右，所以不推荐match方法。

注意：test方法功能比较强大，比如说不区分大小写，那我们直接修改正则就行。