前端json怎么模糊查询

前端JSON数据模糊查询实用指南：从入门到精通**

在Web前端开发中，我们经常需要处理从后端获取的JSON数据，当数据量较大或者用户只想记住部分信息时，精确匹配往往无法满足需求，此时模糊查询（Fuzzy Search）就显得尤为重要，模糊查询允许用户输入不完整、不准确的关键词，依然能返回相关的结果，极大地提升了用户体验，在前端如何对JSON数据进行高效的模糊查询呢？本文将介绍几种常用的方法,并提供代码示例。

什么是模糊查询？

模糊查询，顾名思义，不是要求完全匹配，而是根据输入的关键词，在目标数据中查找包含该关键词（或其变形）的记录，查询“app”，可以匹配到“apple”、“application”、“happy”等。

前端JSON模糊查询的常见方法

使用字符串的 includes() 或 indexOf() 方法（最基础）

这是最简单直接的方法,适用于对单个字符串字段进行模糊匹配。

原理： 遍历JSON数组，对每个对象的指定字段，使用 includes()（判断是否包含子字符串，返回布尔值）或 indexOf()（返回子字符串首次出现的位置，若为-1则不包含）来检查是否包含用户输入的关键词。

示例代码：

假设我们有以下用户数据：

const users = [
  { id: 1, name: '张三', email: 'zhangsan@example.com' },
  { id: 2, name: '李四', email: 'lisi@example.com' },
  { id: 3, name: '王五', email: 'wangwu@example.com', nickname: '小王' },
  { id: 4, name: '赵六', email: 'zhaoliu@example.com', nickname: '小赵' }
];

我们想要根据 name 或 nickname 进行模糊查询：

function fuzzySearch(data, keyword, fields) {
  const lowerKeyword = keyword.toLowerCase(); // 转为小写，实现不区分大小写的模糊查询
  return data.filter(item => {
    return fields.some(field => {
      // 确保对象有该字段，并且字段值是字符串
      if (item[field] && typeof item[field] === 'string') {
        return item[field].toLowerCase().includes(lowerKeyword);
      }
      return false;
    });
  });
}
// 使用示例
const searchTerm = '小';
const searchFields = ['name', 'nickname'];
const filteredUsers = fuzzySearch(users, searchTerm, searchFields);
console.log(filteredUsers);
// 输出: [{ id: 3, name: '王五', email: 'wangwu@example.com', nickname: '小王' }, { id: 4, name: '赵六', email: 'zhaoliu@example.com', nickname: '小赵' }]

优点：

• 简单易用,无需额外库。
• 性能较好,对于小数据量足够。

缺点：

• 功能有限,只能进行简单的包含匹配。
• 对于复杂的模糊需求（如拼写错误、词序颠倒等）无能为力。

使用正则表达式（更灵活）

正则表达式提供了更强大的模式匹配能力,可以实现更复杂的模糊查询逻辑。

原理： 构建一个正则表达式对象，将其作为 String.prototype.match() 或 String.prototype.search() 的参数。

示例代码：

function fuzzySearchWithRegex(data, keyword, fields) {
  // 转义正则表达式中的特殊字符，避免用户输入导致错误
  const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const regex = new RegExp(escapedKeyword, 'i'); // 'i' 表示不区分大小写
  return data.filter(item => {
    return fields.some(field => {
      if (item[field] && typeof item[field] === 'string') {
        return regex.test(item[field]);
      }
      return false;
    });
  });
}
// 使用示例
const searchTermRegex = 'zhang';
const filteredUsersRegex = fuzzySearchWithRegex(users, searchTermRegex, ['name', 'email']);
console.log(filteredUsersRegex);
// 输出: [{ id: 1, name: '张三', email: 'zhangsan@example.com' }]

优点：

• 灵活性极高，可以实现各种复杂的匹配模式（如匹配开头、特定字符等）。
• 可以处理更复杂的模糊需求。

缺点：

• 正则表达式语法相对复杂,需要学习成本。
• 对于非常复杂的正则,性能可能会下降。

使用专门的模糊查询库（功能强大，推荐）

当项目对模糊查询的要求较高，例如需要支持拼写纠错、模糊评分、词序忽略等高级功能时，使用专门的库是更好的选择,常用的库有：

1. Fuse.js: 一个轻量级、强大的模糊搜索库，它实现了模糊评级、距离计算等功能,非常易于使用。
2. Lunr.js: 主要为全文搜索设计，但也可以用于模糊查询，基于倒排索引,性能较好。

这里以 Fuse.js 为例进行介绍。

步骤：

1. 安装 Fuse.js:

   npm install fuse.js
   # 或
   yarn add fuse.js

2. 使用示例：

import Fuse from 'fuse.js';
const users = [
  { id: 1, name: '张三', email: 'zhangsan@example.com' },
  { id: 2, name: '李四', email: 'lisi@example.com' },
  { id: 3, name: '王五', email: 'wangwu@example.com', nickname: '小王' },
  { id: 4, name: '赵六', email: 'zhaoliu@example.com', nickname: '小赵' }
];
// 1. 配置 Fuse
const fuseOptions = {
  keys: ['name', 'nickname', 'email'], // 指定搜索的字段
  threshold: 0.3, // 模糊匹配的阈值（0-1，越小越严格）
  distance: 100, // 匹配的最大距离
  includeScore: true, // 包含匹配分数
  includeMatches: true // 包含匹配信息
};
const fuse = new Fuse(users, fuseOptions);
// 2. 执行搜索
const searchTermFuse = 'zhangs';
const searchResults = fuse.search(searchTermFuse);
console.log(searchResults);
/*
输出示例：
[
  {
    item: { id: 1, name: '张三', email: 'zhangsan@example.com' },
    refIndex: 0,
    score: 0.1, // 匹配分数，越低越好
    matches: [
      { value: '张三', key: 'name', indices: [ [ 0, 4 ] ] },
      { value: 'zhangsan@example.com', key: 'email', indices: [ [ 0, 6 ] ] }
    ]
  }
]
*/
// 如果只需要匹配到的对象数组：
const matchedItems = searchResults.map(result => result.item);
console.log(matchedItems);

Fuse.js 常用配置选项说明：

• keys: 指定要搜索的属性数组。
• threshold: 匹配的敏感度，0表示完全匹配，1表示匹配任意字符，值越小,匹配越严格。
• distance: 匹配的最大字符距离,适用于字符顺序错误的情况。
• includeScore: 是否在结果中包含匹配分数。
• includeMatches: 是否在结果中包含匹配的详细信息。

优点：

• 功能强大,支持高级模糊查询特性。
• 使用相对简单,封装了复杂逻辑。
• 可配置性高,能适应多种场景。
• 性能经过优化,适合大数据量。

缺点：

• 需要引入第三方库，增加项目体积（通常影响不大）。

性能考量

• 数据量大小： 对于小数据量（几百条以内），includes() 或正则表达式通常足够，对于大数据量（几千条以上），建议使用 Fuse.js 等库，它们内部对搜索算法进行了优化（如 Bitap 算法）。
• 搜索频率： 如果搜索操作非常频繁，且数据量大，可以考虑对数据进行预处理，如建立索引（Fuse.js 内部会做类似处理）。
• 防抖（Debounce）： 在搜索框输入时，避免每次按键都立即触发搜索，可以使用防抖技术，在用户停止输入一段时间后再执行搜索,减少不必要的计算。