js实现模糊查询

发布时间:2022-07-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实现模糊查询脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

今天在做练习的时候,遇到一个需求是通过搜索框对列表进行模糊查询。

了解到了四种方法,接下来看看。

测试的数据F1a;

  VAR list=[
    {
      id:1,
      name:"Jenny",
    },
    {
      id:2,
      name:"Annie",
    },
    {
      id:3,
      name:"Quinn",
    }
  ]

1 indexOf

从头到尾地检索字符串 ITem.name,看它是否含有子串 " i "。 如果找到一个 " i ",则返回 " i "的第一次出现的位置。如果没有找到,将返回 -1。

  var arr = list.filter(item=>{
    return item.name.indexOf("i") >= 0;
  })
  //遍历查询到的name
  for (let i = 0; i < arr.length; i++) {
    console.LOG(arr[i].name);
  }
  //查询结果: Annie Quinn

2 split

  var arr = list.filter(item=>{
    return item.name.split("i").length > 1
  })
  //遍历查询到的name
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i].name);
  }
  //查询结果: Annie Quinn

3 正则表达式test

  var arr = list.filter(item=>{
    var reg = new RegExp("i");
    return reg.test(item.name)
  })
  //遍历查询到的name
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i].name);
  }
  //查询结果: Annie Quinn

4 正则表达式match

  var arr = list.filter(item=>{
    var reg = new RegExp("i");
    return item.name.match(reg);
  })
  //遍历查询到的name
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i].name);
  }
  //查询结果: Annie Quinn

总结

相比其他方法,match 方法性能最差,test 的功能会比较强大,代码也很简洁

在不区分大小写的模糊搜索条件下, test 方法只需在正则表达式中添加修饰符 i 即可实现不区分大小写。

每天进步一点

脚本宝典总结

以上是脚本宝典为你收集整理的js实现模糊查询全部内容,希望文章能够帮你解决js实现模糊查询所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。