前端實現模糊查詢


filter()方法和match()方法結合使用可以使前端已獲取數據的情況下獨立實現模糊查詢,不再調用后端接口,這種情況適用與查詢次數比較多,且數據比較固定的情況,減少調用后端接口一定程度上可以緩解后端壓力。

思路:1.先獲取搜索框的內容及要查詢的數據
   2.通過循環的方法對數據進行篩選如 filter方法

   3.用mach()方法去匹配,符合條件的進行返回

示例:

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

這里有幾個小tips需要解釋一下:

  • 首先,allCourseList里面放的是待查的所有數據,我這里放的是一個課程信息的對象數組;
  • 其次,filter()方法主要是用來過濾復合條件的數據的,返回的是所有符合條件的數據。
  • 然后,=>() 是一個箭頭函數,旨在解決javascript的this指向問題。這里的array=> array 指的是數組中要過濾的每個對象元素。array可以用其他變量代替。
  • 最后,match() 方法是用來模糊匹配的,可在字符串內檢索指定的值,或找到一個或多個正則表達式的匹配。 我這里檢測的是教師對象的name屬性值匹配到searchContent這個輸入內容的對象信息。最后賦值給了teacherList。

補充:
find()方法與filter()都適用於過濾查找數據,用法一樣,只是返回結果不一樣,filter()過濾出滿足條件的所有數據,支持多條;find()用於檢測滿足條件的單條數據;

 

filter方法詳解


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM