JS 模糊查询|极客笔记

JS 模糊查询

在前端开发中，经常会遇到需要对数据进行模糊查询的需求。模糊查询指的是在数据库中根据一定的规则来查找符合条件的数据，而不是精确匹配。在 JavaScript 中，我们可以通过不同的方法实现模糊查询。本文将详细解释如何使用 JavaScript 进行模糊查询，并通过示例代码来帮助读者更好地理解。

使用 includes() 方法

includes() 方法用于判断一个数组是否包含一个指定的值，返回布尔值。我们可以利用这个方法来实现对字符串的模糊查询。下面是一个简单的示例：

const names = ['Alice', 'Bob', 'Catherine', 'David', 'Eva'];

const query = 'a';
const filteredNames = names.filter(name => name.toLowerCase().includes(query.toLowerCase()));

console.log(filteredNames);

在这个示例中，我们定义了一个包含一些姓名的数组 names，然后定义了一个查询关键字 query，接着使用 filter() 方法过滤出包含查询关键字的姓名，并将结果存储在 filteredNames 中。最后我们打印出结果，会得到 Alice, Catherine, 和 David。

使用正则表达式

正则表达式是一种表达文本模式的方法，我们可以利用正则表达式来实现更灵活的模糊查询。下面是一个示例：

const names = ['Alice', 'Bob', 'Catherine', 'David', 'Eva'];

const query = 'a';
const regex = new RegExp(query, 'i');
const filteredNames = names.filter(name => regex.test(name));

console.log(filteredNames);

在这个示例中，我们定义了一个正则表达式 regex，它表示查询关键字 query 忽略大小写。然后我们使用 filter() 方法来过滤出符合正则表达式的姓名，最后打印出结果。

使用 Lodash 库

Lodash 是一个著名的 JavaScript 实用工具库，它提供了很多实用的功能，包括模糊查询。我们可以使用 Lodash 库中的 filter() 方法来实现模糊查询。下面是一个示例：

首先，我们需要在项目中引入 Lodash 库。在 HTML 中添加如下代码：

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

然后可以使用如下代码进行模糊查询：

const names = ['Alice', 'Bob', 'Catherine', 'David', 'Eva'];

const query = 'a';
const filteredNames = _.filter(names, name => _.includes(name.toLowerCase(), query.toLowerCase()));

console.log(filteredNames);

在这个示例中，我们引入了 Lodash 库，并使用其中的 filter() 和 includes() 方法来进行模糊查询。最后打印出结果。