实现高效灵活的模糊搜索:JavaScript中的多条件过滤实践
现代Web应用中,数据搜索功能是用户体验的关键部分。本文将深入探讨如何实现一个高效灵活的模糊搜索函数,支持多条件组合查询、精确匹配、模糊匹配以及时间范围筛选。
需求分析
我们需要一个通用的搜索函数,能够处理以下场景:
-
多条件组合查询:支持同时使用多个字段进行筛选
-
精确匹配与模糊匹配:不同字段需要不同的匹配方式
-
时间范围筛选:支持按时间区间过滤数据
-
灵活性:能够适应不同的数据结构和搜索需求
核心实现
函数结构
function fuzzySearch(data, searchParams, timeField = 'createtime') {// 解构搜索参数const { keyword, keywords, /* 其他参数 */, startTime, endTime } = searchParams;// 检查是否有有效搜索条件const hasSearchCriteria = /* 判断逻辑 */;if (!hasSearchCriteria) return data;return data.filter(item => {// 精确匹配逻辑// 模糊匹配逻辑// 时间范围匹配逻辑return exactMatchResult && fuzzyMatchResult && isTimeMatched;});
}
精确匹配实现
const exactMatches = {gender: sexKeyword, // 性别status: classKeyword, // 状态goods_type_id: goods_type_id,type: type,homeview: homeKeyword
};const exactMatchResult = Object.entries(exactMatches).every(([field, searchVal]) => {if (searchVal === undefined || searchVal === '') return true;return String(item[field] || '') === String(searchVal || '');
});
模糊匹配实现
const fuzzyMatches = {title: keyword,nickname: nicknameKeyword,username: telKeyword,intr: intrKeyword,recommend: recommend,synopsis: synopsis,keyword: key,g_title: keywords,code: codes
};const fuzzyMatchResult = Object.entries(fuzzyMatches).every(([field, searchVal]) => {if (searchVal === undefined || searchVal === '') return true;return String(item[field] || '').toLowerCase().includes(String(searchVal || '').toLowerCase());
});
时间范围筛选
let isTimeMatched = true;
const itemTimestamp = parseTime(item[timeField]);const startTimestamp = startTime ? new Date(startTime).getTime() : null;
const endTimestamp = endTime ? new Date(endTime).getTime() : null;if (startTimestamp && !isNaN(startTimestamp)) {isTimeMatched = itemTimestamp !== null && itemTimestamp >= startTimestamp;
}
if (endTimestamp && !isNaN(endTimestamp)) {isTimeMatched = isTimeMatched && itemTimestamp !== null && itemTimestamp <= endTimestamp;
}
关键技术点
-
参数解构与默认值:使用ES6的解构赋值和默认参数提高代码可读性
-
动态字段配置:通过配置对象实现不同字段的不同匹配方式
-
空值处理:全面考虑undefined、null、空字符串等情况
-
类型转换:统一转换为字符串进行比较,避免类型不一致问题
-
大小写不敏感:模糊匹配统一转换为小写
-
时间处理:灵活的时间戳转换和比较逻辑
性能优化建议
-
提前返回:没有有效搜索条件时直接返回原数据
-
短路评估:使用every()方法在第一个不匹配时停止后续检查
-
避免重复计算:将字符串转换和大小写转换缓存起来
-
大数据量考虑:对于大型数据集,可能需要考虑分页或Web Worker
扩展性设计
-
可配置的时间字段:通过timeField参数指定时间字段
-
自定义匹配逻辑:可以通过传入匹配函数进一步扩展
-
正则表达式支持:可以添加对正则匹配的支持
实际应用示例
const data = [{ id: 1, title: 'JavaScript高级编程', createtime: '2023-01-15', gender: 'male' },{ id: 2, title: 'TypeScript入门', createtime: '2023-02-20', gender: 'female' }
];const results = fuzzySearch(data, {keyword: 'script',sexKeyword: 'female',startTime: '2023-01-01',endTime: '2023-03-01'
});console.log(results); // 输出第二条记录
总结
这个模糊搜索函数提供了一种灵活、可配置的解决方案,适用于大多数前端数据筛选场景。通过分离精确匹配和模糊匹配的逻辑,以及支持时间范围筛选,它能够满足复杂的业务需求。开发者可以根据实际项目需求进一步扩展或调整这个基础实现。
进一步优化方向:
-
添加权重评分系统
-
实现拼音搜索支持
-
添加缓存机制提高重复搜索性能
-
支持多语言文本搜索
希望这篇文章能帮助你理解如何实现一个健壮的前端搜索功能!
相关文章:
实现高效灵活的模糊搜索:JavaScript中的多条件过滤实践
现代Web应用中,数据搜索功能是用户体验的关键部分。本文将深入探讨如何实现一个高效灵活的模糊搜索函数,支持多条件组合查询、精确匹配、模糊匹配以及时间范围筛选。 需求分析 我们需要一个通用的搜索函数,能够处理以下场景: 多…...
ChatterBot的JupyterLab实践指南,从零开始构建AI聊天机器人
从手机上的语音助手到电商平台的客服机器人,这些能理解人类语言的程序背后,都离不开自然语言处理(NLP)技术的支撑。本文将以JupyterLab为实验平台,带您亲手打造一个会对话的AI机器人。通过这个项目,您不仅能…...
《深度学习》课程之卷积神经网络原理与实践教学设计方案
《深度学习》课程之卷积神经网络原理与实践教学设计方案 一、教学目标设计 (一)知识目标 学生能够准确描述卷积神经网络(CNN)的基本定义,包括其核心组成部分(如卷积层、池化层、全连接层等)及…...
快手OneRec 重构推荐系统:从检索排序到生成统一的跃迁
文章目录 1. 背景2. 方法2.1 OneRec框架2.2 Preliminary2.3 生成会话列表2.4 利用奖励模型进行迭代偏好对齐2.4.1 训练奖励模型2.4.2 迭代偏好对齐 3. 总结 昨天面试的时候聊到了OneRec,但是由于上次看这篇文章已经是一个月之前,忘得差不多了,…...
算法——直接插入排序
目录 一、直接插入排序的定义 二、直接插入排序的原理 三、直接插入排序的特点 四、代码实现 一、直接插入排序的定义 直接插入排序是一种简单直观的排序算法,其基本思想是将一个元素插入到已经排好序的部分数组中,使得插入后的数组仍然保持有序。具…...
Linux 软件管理
文章目录 dpkg软件包管理工具APT软件包管理工具apt-get命令apt-cache Linux操作系统主要支持RPM和Deb两种软件包管理工具。 RPM(Redhat Package Manager)是一种用于互联网下载包的打包及安装工具。 其原始设计理念是开放的,不仅可以在Redhat平…...
电力实训中应注意以下安全事项
电力实训中应注意以下安全事项: 一、环境准备与设备检查 保持实训场地整洁通风,清除易燃物与杂物,确保操作空间充足。 电路容量需匹配设备功率,安装漏电保护器及空气开关。 非带电金属设备外壳应接地,定期检查线路…...
序列化-流量统计
新建文件夹及文件 编写流量统计的Bean对象 package com.root.mapreduce.writable; import org.apache.hadoop.io.Writable; import java.io.DataInput; import java.io.DataOutput; import java.io.IOException; //1 继承Writable接口 public class FlowBean implements Writab…...
矩阵游戏--二分图的匈牙利算法
https://www.luogu.com.cn/problem/P1129 学习路线---https://blog.csdn.net/qq_39304630/article/details/108135381 1.二分图就是两个独立的两个集合,如这里是行和列 2.匈牙利匹配就是媒婆拉媒,没伴侣或者伴侣可以换就将当前的塞给她 3.最后true的…...
spring security解析
Spring Security 中文文档 :: Spring Security Reference 1. 密码存储 最早是明文存储,但是攻击者获得数据库的数据后就能得到用户密码。 于是将密码单向hash后存储,然后攻击者利用彩虹表(算法高级(23)-彩虹表&…...
【技巧】chol分解时,矩阵非正定时的临时补救措施,以MATLAB为例
针对非正定矩阵无法进行标准Cholesky分解的解决方案及MATLAB代码实现,结合不同应用场景的需求分层解析 文章目录 数值修正方法修正Cholesky分解LDL分解 矩阵变换与重构特征值修正乘积法构造正定矩阵 替代分解与降维方法QR分解与SVD主成分分析(PCA&#x…...
Hi3518E官方录像例程源码流程分析(三)
文章目录 第二阶段,初始化第一阶段计算好的参数SAMPLE_COMM_SYS_Init 第三阶段,启动VI和chn捕获SAMPLE_COMM_VI_StartVi()SAMPLE_COMM_VI_StartBT656小阶段1 SAMPLE_COMM_VI_StartMIPI_BT1120()小阶段1 SAM…...
37.Java 异步回调(CompletableFuture 概述、CompletableFuture 使用)
一、CompletableFuture 概述 CompletableFuture 在 Java 里面被用于异步编程,异步通常意味着非阻塞,可以使得任务单独运行在与主线程分离的其他线程中,并且通过回调可以在主线程中得到异步任务的执行状态,是否完成,和是…...
数学建模AI智能体(4.16大更新)
别的不说就说下面这几点,年初内卷到现在,就现阶段AI水平,卷出了我比较满意的作品,这里分享给各位同学,让你们少走弯路: 1.轻松辅导学生 2.帮助学习 3.突破知识壁垒,缩短与大佬的差距 4.打破…...
Python 第三节 流程控制
目录 1.分支结构 条件控制 2.循环语句 3.循环控制语句 4.嵌套循环 控制代码执行的顺序 顺序结构分支结构循环结构 1.分支结构 条件控制 让代码有自主选择的能力, 当满足某个条件的时候执行对应的操作 1.1 if语句 语法格式 if 判断条件:执行语句(当判断条件为真的时候执…...
深入探究Linux编译器gcc/g++:从基础到进阶
目录 一、编译的幕后流程 (一)预处理:宏与文件的魔法融合 (二)编译:代码规范性的严格审视 (三)汇编:迈向机器语言的关键一步 (四)连接&a…...
用户态网络缓冲区
用户态网络缓冲区 缓冲区作用 用于临时存储数据以便高效地进行读写操作。用户态缓冲区位于用户空间中,与内核空间中的缓冲区(内核缓冲区)相对。 用户态接受缓存区 粘包问题,缓存非完整数据包 生产者的速度 > 消费者的速…...
解决Flutter 2.10.5在升级Xcode 16后的各种报错
Flutter 环境 Flutter version 2.10.5Dart version 2.16.2DevTools version 2.9.2CocoaPods version 1.16.2Xcode 16.3 问题一:XCResult parsing error: Error: This command is deprecated and will be removed in a future release, --legacy flag is required t…...
【学习笔记】计算机网络(八)—— 音频/视频服务
第8章 互联网上的音频/视频服务 文章目录 第8章 互联网上的音频/视频服务8.1概述8.2 流式存储音频/视频8.2.1 具有元文件的万维网服务器8.2.2 媒体服务器8.2.3 实时流式协议 RTSP 8.3 交互式音频/视频8.3.1 IP 电话概述8.3.2 IP电话所需要的几种应用协议8.3.3 实时运输协议 RTP…...
OpenCv高阶(三)——图像的直方图、图像直方图的均衡化
目录 一、直方图 1、计算并显示直方图 2、使用matplotlib方法绘制直方图(不划分小的子区间) 3、使用opencv的方法绘制直方图 (划分16个小的子亮度区间) 4、绘制彩色图像的直方图,将各个通道的直方图值都画出来 二、…...
OpenCV 图形API(39)图像滤波----同时计算图像在 X 和 Y 方向上的一阶导数函数SobelXY()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 cv::gapi::SobelXY 函数是 OpenCV 的 G-API 模块中用于同时计算图像在 X 和 Y 方向上的一阶导数(即 Sobel 边缘检测)的一…...
领麦微:电炖锅红外测温传感器应用,告别糊锅干烧
领麦微红外测温传感器在电炖锅中的应用,特别是在应对高温环境、实现精准测温以保留食材营养、有效防止干烧与糊锅现象,以及提供安全烹饪新保障等方面,展现出了其独特的技术优势和应用价值。以下是对这些应用特点的深入剖析: 一、高…...
(Linux操作系统)自定义shell的实现
讲自定义shell之前我们先看一个东西,那就是进程替换,我们想要父进程fork之后的子进程之后运行一个全新的程序那该怎么办呢? 这里就要用一个叫做进程替换的一个东西了,程序替换是通过特定的接⼝,加载磁盘上的⼀个全新的…...
安卓jks提取pem和pk8文件
你需要安装: Java Keytool OpenSSL 系统要求:Mac/Linux/Windows 都可以。 keytool -importkeystore -srckeystore holder-keystore.jks -destkeystore holder-keystore.p12 -srcstoretype JKS -deststoretype PKCS12 -srcstorepass yzhafzKPj4 -dest…...
人脸检测-人脸关键点-人脸识别-人脸打卡-haar-hog-cnn-ssd-mtcnn-lbph-eigenface-resnet
链接:https://pan.baidu.com/s/1VhGdyIW5GWuTNkfbCEc5eA?pwdz0eo 提取码:z0eo --来自百度网盘超级会员V2的分享 创建环境 conda create -n 环境名称python3.8 conda activate 环境名称 然后配置环境 pip install requirements.txt 运行程序&…...
Gobuster :dir、dns、vhost
Gobuster 及其相关技术知识必须用于法律明确允许的场景!!! 1. dir 模式:目录/文件枚举 用途:扫描目标网站的目录和文件,常用于发现隐藏资源或敏感文件。 关键参数: -u URL&am…...
Vue+Threejs项目性能优化
使用Vue和Three.js开发的项目,但运行一段时间后电脑内存就满了,导致性能下降甚至崩溃,分析内存泄漏的原因优化如下: 资源释放管理 手动释放Three.js资源: 在Vue组件的beforeDestroy或destroyed生命周期中࿰…...
Leetcode - 双周赛135
目录 一、3512. 使数组和能被 K 整除的最少操作次数二、3513. 不同 XOR 三元组的数目 I三、3514. 不同 XOR 三元组的数目 II四、3515. 带权树中的最短路径 一、3512. 使数组和能被 K 整除的最少操作次数 题目链接 本题实际上求的就是数组 nums 和的余数,代码如下&…...
[特殊字符] PostgreSQL MCP 开发指南
简介 🚀 PostgreSQL MCP 是一个基于 FastMCP 框架的 PostgreSQL 数据库交互服务。它提供了一套简单易用的工具函数,让你能够通过 API 方式与 PostgreSQL 数据库进行交互。 功能特点 ✨ 🔄 数据库连接管理与重试机制🔍 执行 SQL…...
等离子体浸没离子注入(PIII)
一、PIII 是什么?基本原理和工艺 想象一下,你有一块金属或者硅片(就是做芯片的那种材料),你想给它的表面“升级”,让它变得更硬、更耐磨,或者有其他特殊功能。怎么做呢?PIII 就像是用…...
TinyEngine 2.4版本正式发布:文档全面开源,实现主题自定义,体验焕新升级!
本文由体验技术团队李璇原创。 前言 TinyEngine低代码引擎使开发者能够定制低代码平台。它是低代码平台的底座,提供可视化搭建页面等基础能力,既可以通过线上搭配组合,也可以通过cli创建个人工程进行二次开发,实时定制出自己的低…...
gemini讲USRP
您好!USRP (Universal Software Radio Peripheral) 是一种软件无线电 (SDR) 设备系列,由 Ettus Research (现为 National Instruments 旗下公司) 开发和销售。USRP 提供了一个灵活且可配置的平台,用于设计、原型开发和部署各种无线通信系统。…...
智能超表面通信控制板--通道电压并行控制版
可重构智能超表面(Reconfigurable Intelligent Surface, RIS)技术是一种新兴的人工电磁表面技术,它通过可编程的方式对电磁波进行智能调控,从而在多个领域展现出巨大的应用潜力。超表面具有低成本、低能耗、可编程、易部署等特点&…...
Spring Task(笔记)
介绍: 应用场景: cron表达式: cron表达式在线生成器: 入门案例:...
YOLOv3的改进思路与方法:解析技术难点与创新突破
YOLOv3作为目标检测领域的经典算法,凭借其出色的速度和性能平衡获得了广泛应用。然而,随着计算机视觉技术的不断发展,YOLOv3在某些场景下的局限性也逐渐显现。本文将深入分析YOLOv3的不足之处,并系统介绍常见的改进策略和方法&…...
【解锁元生代】ComfyUI工作流与云原生后端的深度融合:下一代AIGC开发范式革命
## 从单机到云原生的认知跃迁 当2023年Stable Diffusion WebUI还在争夺本地显卡性能时,ComfyUI已悄然开启工作流模块化革命;当2024年AI绘画工具陷入"参数调优内卷",云原生技术正重塑AI开发的基础设施层。二者的深度融合࿰…...
shell 编程之正则表达式与文本处理器
目录 一、正则表达式 1. 概念 2. 作用 3. 分类 二、基础正则表达式(BRE) grep 命令选项 三、扩展正则表达式(ERE) 与 BRE 的区别 四、文本处理器 1. sed 工具 2. awk 工具 五、总结 总结对比 元字符总结 工具对比与…...
Shell编程之正则表达式与文本处理器
目录 一、引言 二、正则表达式 2.1 定义与用途 2.2 基础正则表达式 2.2.1 查找特定字符 2.2.2 利用中括号 “[]” 查找集合字符 2.2.3 查找行首 “^” 与行尾字符 “$” 2.2.4 查找任意一个字符 “.” 与重复字符 “*” 2.2.5 查找连续字符范围 “{}” 2.3 元字符总结…...
TMDOG——语言大模型进行意图分析驱动后端实践
语言大模型进行意图分析驱动后端实践 项目概述 项目地址:https://github.com/TMDOG666/AI_Backend_Demo 该项目通过语言大模型,通过分析用户意图、拆分任务、构建API调用链来驱动后端实践。 以一个简单的教务系统后端为例,将教务系统后端…...
未启用CUDA支持的PyTorch环境** 中使用GPU加速解决方案
1. 错误原因分析 根本问题:当前安装的PyTorch是CPU版本,无法调用GPU硬件加速。当运行以下代码时会报错:model YOLO("yolov8n.pt").to("cuda") # 或 .cuda()2. 解决方案步骤 步骤1:验证CUDA可用性 在Pyth…...
【mysql】Mac 通过 brew 安装 mysql 、启动以及密码设置
Mac 通过 brew 安装 mysql 、启动以及密码设置 使用 brew 安装 mysqlmysql 启动mysql密码设置参考文章: 使用 brew 安装 mysql brew install mysqlmysql 启动 下载完毕,终端告诉我们mysql数据库没有设置密码的,我们可以直接执行 mysql -u r…...
Vue2 nextTick
核心源码位置 Vue 2 的 nextTick 实现主要在 src/core/util/next-tick.js 文件中。 完整源码结构 import { noop } from shared/util import { handleError } from ./error import { isIE, isIOS, isNative } from ./envexport let isUsingMicroTask falseconst callbacks …...
Ubuntu 安装 NVIDIA显卡驱动、CUDA 以及 CuDNN工具
文章目录 一、简介二、查看显卡设备三、安装显卡驱动四、安装CUDA工具箱五、安装CuDNN小结 一、简介 NVIDIA 驱动:操作系统与 NVIDIA 显卡硬件之间的桥梁,负责驱动显卡硬件的运行,显卡的“底层操作系统”,一切的基础。CUDA&#…...
LeetCode算法题(Go语言实现)_50
题目 现有一个包含所有正整数的集合 [1, 2, 3, 4, 5, …] 。 实现 SmallestInfiniteSet 类: SmallestInfiniteSet() 初始化 SmallestInfiniteSet 对象以包含 所有 正整数。 int popSmallest() 移除 并返回该无限集中的最小整数。 void addBack(int num) 如果正整数 …...
idea报错java: 非法字符: ‘\ufeff‘解决方案
解决方案步骤以及说明 BOM是什么?1. BOM的作用2. 为什么会出现 \ufeff 错误?3. 如何解决 \ufeff 问题? 最后重新编译,即可运行!!! BOM是什么? \ufeff 是 Unicode 中的 BOM࿰…...
WPF依赖注入IHostApplicationLifetime关闭程序
WPF依赖注入IHostApplicationLifetime关闭程序 使用Application.Current.Shutdown();退出会报异常 应该使用 app.Dispatcher.InvokeShutdown(); Application.Current.Shutdown();app.Dispatcher.InvokeShutdown();static App app new();[STAThread]public static void Main(…...
如何在 IntelliJ IDEA 中安装通义灵码 - AI编程助手提升开发效率
随着人工智能技术的飞速发展,AI 编程助手已成为提升开发效率和代码质量的强大工具。在众多 AI 编程助手之中,阿里云推出的通义灵码凭借其智能代码补全、代码解释、生成单元测试等丰富功能,脱颖而出,为开发者带来了全新的编程体验。…...
【力扣】两两交换链表中的节点
两两交换链表中的节点 代码: /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, ListNode *n…...
数据共享交换平台之文件交换
数据共享交换平台的文件交换管理功能提供部门与部门之间的文件交换通道,满足跨部门之间文件交换需求。文件交换需要能够按照交换业务场景对交换通道进行分类管理。文件交换管理需满足如下要求: 1.文件交换统计:支持查看本部门与其他部门之间…...
什么是全球代理?如何选择全球代理服务?
在全球化不断深化的今天,互联网已经成为人类沟通、工作和学习的重要纽带。而全球代理则是这一纽带上的关键技术之一,它赋予了我们探索不同地区网络资源的能力。今天,我们来聊聊什么是全球代理、它能做什么,以及如何选择合适的全球…...