前端页面多字段模糊查询

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

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个对象遍历出来】
在这里插入图片描述
ps：虽然简单，但不常用的人来说，对里面传的v是什么还是很好奇的

2.2 Object.values()

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

可枚举属性值：这里的可枚举，可以理解为数组中，一个个对象；对象中的一个个值，字符串中的一个个字符。
例如：

2.3 some()

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

在这里插入图片描述
ps：详细解释情况引用 [6]

2.4 new RegExp()

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

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

在这里插入图片描述

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

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