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

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

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

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

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

根據(jù)官方文檔，使用toLowerCase() 或是toUpperCase()方法是將使用該方法的字符串轉(zhuǎn)為大寫或是小寫的形式返回。如果調(diào)用該方法的是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)

輸出打印得到下圖

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。