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