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

这时候我们可以看到下方的报错

iOS rangeOfString忽略大小写 js忽略大小写比较_前端

注意:使用toLowerCase()方法或是toUpperCase()须是字符串
使用实例

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

输出打印得到下图

iOS rangeOfString忽略大小写 js忽略大小写比较_前端_02

既然知道如何将字符串统一转为大写或是小写的方法,那接下来就回到我们原本的问题,前端如何在数组中实现模糊搜索且不区分大小写。
首先,实现搜索可使用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
        );
      };
    },