前端独立实现模糊查询--filter()与match()

filter()方法和match()方法结合使用可以使前端已获取数据的情况下独立实现模糊查询,不再调用后端接口,这种情况适用与查询次数比较多,且数据比较固定的情况,减少调用后端接口一定程度上可以缓解后端压力。

示例:

 teacherList = allTeacherList.filter(array => array.name.match(searchContent));

这里有几个小tips需要解释一下:

  • 首先,allTeacherList里面放的是待查的所有数据,我这里放的是一个课程信息的对象数组;
  • 其次,filter()方法主要是用来过滤复合条件的数据的,返回的是所有符合条件的数据。
  • 然后,=>() 是一个箭头函数,旨在解决javascript的this指向问题。这里的array=> array 指的是数组中要过滤的每个对象元素。array可以用其他变量代替。
  • 最后,match() 方法是用来模糊匹配的,可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。 我这里检测的是教师对象的name属性值匹配到searchContent这个输入内容的对象信息。最后赋值给了teacherList。
    在这里插入图片描述
    在这里插入图片描述

补充:
find()方法与filter()都适用于过滤查找数据,用法一样,只是返回结果不一样,filter()过滤出满足条件的所有数据,支持多条;find()用于检测满足条件的单条数据;

你可能感兴趣的:(Angular,4)