首先，在js中轉大小寫的方法都有哪些？
在javascript中，轉大寫/小寫的方法有toLocaleLowerCase()、toLocaleUpperCase()、toLowerCase()以及toUpperCase()這4種，其中toLowerCase()和toUpperCase()方法比較經典，借鑒java.lang.String()中的同名方法。
而toLocaleLowerCase()和toLocaleUpperCase()方法則是針對特定地區的實現。

官方文檔是這樣描述這兩個方法

** toLocaleLowerCase()**方法根據任何指定區域語言環境設置的大小寫映射，返回調用字符串被轉換為小寫的格式。
** toLocaleUpperCase() **方法根據本地主機語言環境把字符串轉換為大寫格式，并返回轉換后的字符串。

而對于toLowerCase()和toUpperCase()方法

toLowerCase() 會將調用該方法的字符串值轉為小寫形式，并返回。
toUpperCase() 方法將調用該方法的字符串轉為大寫形式并返回（如果調用該方法的值不是字符串類型會被強制轉換

根據官方文檔，使用toLowerCase() 或是toUpperCase()方法是將使用該方法的字符串轉為大寫或是小寫的形式返回。如果調用該方法的是null或是undefined

const a = null;//或是undefined、number類型 const b =a.toLowerCase(); console.log(b)

這時候我們可以看到下方的報錯

注意：使用toLowerCase()方法或是toUpperCase()須是字符串
使用實例

const a = "Ab";// const b =a.toLowerCase(); console.log(b)

輸出打印得到下圖

既然知道如何將字符串統一轉為大寫或是小寫的方法，那接下來就回到我們原本的問題，前端如何在數組中實現模糊搜索且不區分大小寫。
首先，實現搜索可使用filter以及indexOf，將數組中滿足條件的數據查詢出來，其代碼片段如下

/*** @description 這里是使用es6 的filter以及indexOf 實現* @param {Array} list 目標數組* @param {String} queryString 輸入的關鍵字* @param {Array} results 查詢的結果（即在目標數組中查詢到的滿足條件的數據）*/const results = queryString? list.filter(this.createFilter(queryString)): list;/*** @param {string} queryString 模糊查詢的關鍵字* @param {Object} item 數組中的item*/createFilter(queryString) {return (item) => {return (item.name.indexOf(queryString) != -1);};},

而滿足模糊搜索且不區分大小寫的代碼片段則如下

/*** @desc 前端實現模糊查詢（不區分大小寫）* @param {String} queryString 模糊查詢的關鍵字* @param {Array} list* @param {Array} results 查詢的結果（即在目標數組中查詢到的滿足條件的數據）*/const results = queryString? list.filter(this.createFilter(queryString)): list;/*** @description 這里是使用es6 的filter toLowerCase（） 轉為小寫的方式來實現* @param {string} queryString 模糊查詢的關鍵字* @param {Object} item 數組中的item* */createFilter(queryString) {return (item) => {return ((item.name || "").toLowerCase().indexOf(queryString.toLowerCase()) != -1);};},

總結

以上是生活随笔為你收集整理的前端实现模糊查询不区分大小写的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。