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()用於檢測滿足條件的單條數據;
