当前位置:首页 » 《我的小黑屋》 » 正文

js实现模糊查询_D.ZH4396的博客

9 人参与  2021年12月23日 10:18  分类 : 《我的小黑屋》  评论

点击全文阅读


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

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

测试的数据:

  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 即可实现不区分大小写。

每天进步一点点


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/31994.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 往梦难复温,沈淮霆宋思予在线_往梦难复温,沈淮霆宋思予在线
  • 爱意清浅随风离(简凝夕陆靳燃),爱意清浅随风离
  • 「冲喜而已,侯爷别太爱」小说免费在线阅读_侯府侯爷乐瑶主线最终章倒计时
  • 好看的往梦难复温沈淮霆宋思予_往梦难复温沈淮霆宋思予
  • 天才京剧花旦被废嗓后成为芭蕾舞王+后续+结局(秦意宋笙)全书秦意宋笙结局_秦意宋笙+结局列表_笔趣阁(天才京剧花旦被废嗓后成为芭蕾舞王+后续+结局)
  • (番外)+(全书)往梦难复温(沈淮霆宋思予+番外+全书)_(往梦难复温+番外+全书)免费_笔趣阁(沈淮霆宋思予)
  • 江晚烟陆聿我终于失去了你结局+番外(江晚烟陆聿)列表_江晚烟陆聿我终于失去了你结局+番外(江晚烟陆聿)结局篇+番外在线
  • 池雾陆砚寒结局+番外(陆砚寒池雾)列表_池雾陆砚寒结局+番外(陆砚寒池雾)池雾陆砚寒结局+番外在线
  • 沈静怡傅励行+后续+结局(傅励行沈静怡)列表_沈静怡傅励行+后续+结局(傅励行沈静怡)沈静怡傅励行+后续+结局在线
  • 非典时,我被妻子的白月光误诊遗弃在病房节选角色羁绊特辑‌_田越苏雅白月光角色专属支线试读入口
  • 往梦难复温沈淮霆宋思予_往梦难复温沈淮霆宋思予
  • 霜天空巷旧人归后续更新戚南枝霍涧山完本_霜天空巷旧人归后续更新(戚南枝霍涧山)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1