前端实现模糊查询不区分大小写

首先，在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);};},