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

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

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

测试的数据：

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

每天进步一点点