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

首先,在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
        );
      };
    },
    
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值