前端页面多字段模糊查询

た入场券 2024-04-01 14:53 94阅读 0赞

### 前端页面多字段模糊查询 ###

本文主要参考了大佬们的内容，整合记录一下具体内容。

### 1 实现代码 ###

arr是前端原有的列表数组（后台返回来的数据）

var arr = [
        {
        id: "1", aa: "asd", bb: "阿斯顿", cc: "123"},
        {
        id: "2", aa: "Awr", bb: "艾沃瑞", cc: "456"},        
        {
        id: "3", aa: "ZXC", bb: "自行车", cc: "489"}
        ]

q是需要模糊查询的内容

function query(arr, q) {
        
      return arr.filter(
      	v => Object.values(v).some(v => new RegExp(q + '').test(v))
      )
    }

来个醒目的解释

=======================该段代码的解释======================
    1.filter(v=>条件) : v是数组arr中的每一个对象，最后返回过滤的v
    {
        id: "1", aa: "asd", bb: "阿斯顿", cc: "123"}
    
    2.Object.values(v) : 将对象中的每个属性值存入新数组
     ['1', 'asd', '阿斯顿', '123']
     
    3.some(v =>条件) : 遍历数组中的每个元素，并判断是否符合条件
    例如：v='阿斯顿'
    
    4.new RegExp(q + '').test(v) : 这里q+''应该是为了转为字符串类型
    例如：查询的内容q = '斯'
    new RegExp('斯').test('阿斯顿')
    ======================返回流程介绍=========================
    第4步将返回true
    第3步的条件是4，当4返回true，第3步中，当前的v就是符合条件
    因为第2步只是划分属性值出来，实际在filter中，过滤的条件就是第3步开始
    因此，实现了多个字段的模糊查询

### 2 各个部分具体解释 ###

#### 2.1 filter ####

filter是新建一个数组，然后将arr数组中里面的每一个元素都遍历出来，执行符合箭头函数后面的条件判断，将过滤出来的v存入新数组。  
【这里filter(v=>v)直接返回v，也就是把里面的3个对象遍历出来】  
![在这里插入图片描述][af35e16e3e8a4c87959c693dfd545025.png]  
ps：虽然简单，但不常用的人来说，对里面传的v是什么还是很好奇的

#### 2.2 Object.values() ####

Object.values()返回一个数组，其元素是在对象上找到的***可枚举属性值***。  
![在这里插入图片描述][7cbe28aba88941f29ee08c5628f98d62.png]

> **可枚举属性值**：这里的可枚举，可以理解为数组中，一个个对象；对象中的一个个值，字符串中的一个个字符。  
> 例如：![在这里插入图片描述][bb9dd9e9e9e845de9ab057e4b76545d3.png]

#### 2.3 some() ####

some()对数组中的每一个元素进行遍历，然后判断是否符合条件，如何符合返回true。  
注意：如果在条件中为true就返回true；如果为false就返回false。

![在这里插入图片描述][8db9e818bafd459b88dfcd40569a196d.png]  
ps：详细解释情况引用 \[6\]

#### 2.4 new RegExp() ####

RegExp 是正则表达式的缩写；  
RegExp 对象有 3 个方法：test()、exec() 以及 compile();【这里只讲test()】  
test() 方法检索字符串中的指定值。返回值是 true 或 false；

new RegExp(需要查询的内容).test(原始内容)

![在这里插入图片描述][410c5debe77142c5bcbe389185869c11.png]

ps：看到这里，倒回去在理解一下，应该差不多了

引用：  
\[1\] [如何用 javascript 实现多字段模糊查询][javascript]  
\[2\] [JS filter()方法 介绍和使用][JS filter_]  
\[3\] [关于JavaScript中的Object.values()的用法][JavaScript_Object.values]  
\[4\] [Javascript数组——some()、every()、forEach()遍历区别][Javascript_some_every_forEach]  
\[5\] [new RegExp的使用][new RegExp]  
\[6\] [JavaScript 中的 some() 方法][JavaScript _ some_]

[af35e16e3e8a4c87959c693dfd545025.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/322b152b4bba493b917ce63c5fcdde9d.png
[7cbe28aba88941f29ee08c5628f98d62.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b34d8da10cac4d99af60bdb4e73cea71.png
[bb9dd9e9e9e845de9ab057e4b76545d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cf351f814adf4c41862b7b4695776f09.png
[8db9e818bafd459b88dfcd40569a196d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5ad85e1c926c435cbb08c54f4c54ab0c.png
[410c5debe77142c5bcbe389185869c11.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5bda449280d8410082c6839ae5c30679.png
[javascript]: https://segmentfault.com/q/1010000010767176
[JS filter_]: https://blog.csdn.net/weixin_39501680/article/details/122035254
[JavaScript_Object.values]: https://blog.csdn.net/SmallTeddy/article/details/106781542
[Javascript_some_every_forEach]: http://t.zoukankan.com/zuiyue_jing-p-14498826.html
[new RegExp]: https://blog.csdn.net/syl19980202/article/details/119179474
[JavaScript _ some_]: https://blog.csdn.net/qq_41702660/article/details/81476716?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-2-81476716-blog-96840381.pc_relevant_vip_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-2-81476716-blog-96840381.pc_relevant_vip_default&utm_relevant_index=3