1. 程式人生 > >前端獨立實現模糊查詢--filter()與match()

前端獨立實現模糊查詢--filter()與match()

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

示例:

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

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

  • 首先,allCourseList裡面放的是待查的所有資料,我這裡放的是一個課程資訊的物件陣列;
  • 其次,filter()方法主要是用來過濾複合條件的資料的,返回的是所有符合條件的資料。
  • 然後,=>() 是一個箭頭函式,旨在解決javascript的this指向問題。這裡的array=> array 指的是陣列中要過濾的每個物件元素。array可以用其他變數代替。
  • 最後,match() 方法是用來模糊匹配的,可在字串內檢索指定的值,或找到一個或多個正則表示式的匹配。 我這裡檢測的是教師物件的name屬性值匹配到searchContent這個輸入內容的物件資訊。最後賦值給了teacherList。
    在這裡插入圖片描述
    在這裡插入圖片描述

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