前端JavaScript实现大数据前后模糊搜索的方法详解

function init() {
  // 打开 IndexedDB 数据库
  const openDB = window.indexedDB.open("myDatabase", 1);
  // 新建数据库和数据库版本号发生变化时才被调用
  openDB.onupgradeneeded = function (event) {
    const db = event.target.result;
    // 创建对象存储空间
    const objectStore = db.createObjectStore("myObjectStore", {
      keyPath: "code",
    });
    // 添加索引
    // objectStore.createIndex("code", "code");
    objectStore.createIndex("pCode", "pCode", { unique: false });
    objectStore.createIndex("name", "name", { unique: false });
  };

  openDB.onsuccess = async function (event) {
    const db = event.target.result;
    const dataArray = data;
    // 获取事务对象
    const transaction = db.transaction(["myObjectStore"], "readwrite");
    // 获取对象存储空间
    const objectStore = transaction.objectStore("myObjectStore");

    // 向对象存储添加对象
    dataArray.forEach(function (data) {
      const addRequest = objectStore.add(data);

      addRequest.onsuccess = function () {
        console.log("数据已成功添加到对象存储");
      };

      addRequest.onerror = function (error) {
        console.error("添加数据时发生错误", error);
      };
    });
  };
}

function search() {
  window.result = [];
  // 打开数据库
  const openRequest = window.indexedDB.open("myDatabase", 1);
  // 打开数据库成功回调
  openRequest.onsuccess = function (event) {
    // 数据库对象
    const db = event.target.result;
    // 打开只读事务并获取对象存储 readwrite 读写  readonly 只读
    const transaction = db.transaction(["myObjectStore"], "readonly");
    // 获取myObjectStore对象存储空间的引用
    const objectStore = transaction.objectStore("myObjectStore");
    // 获取 name 索引
    const index = objectStore.index("name");
    // 打开游标
    const request = index.openCursor(); // 全部数据
    // const request = index.openCursor(searchKey); // 精准匹配
    // const request = index.openCursor(
    //   IDBKeyRange.bound(searchKey, searchKey + "\uffff", false, false)
    // ); // 后模糊
    const startTime = new Date().getTime();
    request.onsuccess = function (event) {
      const cursor = event.target.result;
      if (cursor) {
        const name = cursor.value.name;
        // 判断 name 是否包含搜索关键字 如果是后模糊的话 直接拿name就行
        if (regex.test(name)) {
          result.push(cursor.value);
        }
        cursor.continue();
      } else {
        const endTime = new Date().getTime();
        console.log(`搜索耗时：${endTime - startTime}`);
        console.log(result);
      }
    };

    request.onerror = function () {
      console.error("执行搜索时发生错误");
    };
  };
  // 打开数据库失败回调
  openRequest.onerror = function () {
    console.error("打开数据库时发生错误");
  };
}

class TrieNode {
  constructor() {
    this.children = new Map(); // 用于存储当前节点的子节点
    this.isEndOfWord = false; // 表示当前节点是否是一个单词的结尾
    this.values = []; // 用于存储与当前节点关联的值
  }
}

class Trie {
  constructor() {
    this.root = new TrieNode();
  }
  // 如果当前字符不存在于当前节点的子节点中，则创建一个新的子节点，
  // 并将其添加到子节点Map中。然后，将当前节点更新为新的子节点，继续遍历下一个字符。
  // 当遍历完所有字符后，将当前节点的isEndOfWord属性设置为true，表示该节点是一个单词的结尾。
  // 同时，将与该单词关联的值添加到当前节点的values数组中。
  insert(word, value) {
    let node = this.root;
    for (let i = 0; i < word.length; i++) {
      const char = word[i];

      if (!node.children.has(char)) {
        node.children.set(char, new TrieNode());
      }
      node = node.children.get(char);
    }
    node.isEndOfWord = true;
    node.values.push(value);
  }

  // 递归地收集以给定节点为根的子树中所有单词的关联值。如果当前节点是一个单词的结尾
  // 则将该节点的所有关联值添加到结果集合中。然后，对当前节点的每个子节点
  // 递归调用collectValues方法。
  collectValues(node, results) {
    if (node.isEndOfWord) {
      for (const value of node.values) {
        results.add(value);
      }
    }
    for (const childNode of node.children.values()) {
      this.collectValues(childNode, results);
    }
  }

  // 模糊搜索与给定关键字匹配的单词，并返回匹配到的所有关联值。该方法首先创建一个空的
  // Set对象results，用于存储结果。然后，调用collectSuffixValues方法，
  // 从根节点开始递归地搜索与关键字匹配的单词，并将匹配到的关联值添加到results中。
  // 最后，将results转换为数组并返回。
  fuzzySearch(keyword) {
    const results = new Set();
    this.collectSuffixValues(this.root, keyword, results);
    return Array.from(results);
  }

  // 递归地搜索与给定关键字后缀匹配的单词，并将匹配到的关联值添加到结果集合中。
  // 如果关键字的长度为0，表示已经匹配到了关键字的末尾，此时调用collectValues方法，
  // 将当前节点及其子树中的所有关联值添加到结果集合中。
  // 否则，取关键字的第一个字符char，并获取当前节点的子节点childNode。
  // 如果childNode存在，则递归调用collectSuffixValues方法，
  // 将关键字的剩余部分和childNode作为参数传递。
  // 然后，对当前节点的每个子节点，递归调用collectSuffixValues方法，
  // 将关键字和结果集合作为参数传递
  collectSuffixValues(node, keyword, results) {
    if (keyword.length === 0) {
      this.collectValues(node, results);
    } else {
      const char = keyword[0];
      const childNode = node.children.get(char);
      if (childNode) {
        this.collectSuffixValues(childNode, keyword.slice(1), results);
      }
    }
    for (const childNode of node.children.values()) {
      this.collectSuffixValues(childNode, keyword, results);
    }
  }
}

async function search() {
  // 示例用法
  const trie = new Trie();
  const dataArray = await getJSON();
  dataArray.forEach((item) => {
    trie.insert(item.name, item);
  });
  const startTime = new Date().getTime();
  const results = trie.fuzzySearch("总部");
  const endTime = new Date().getTime();
  console.log(`搜索耗时：${endTime - startTime}`);
  console.log(trie, "results", results);
}
search();

function search() {
  const startTime = new Date().getTime();
  const fuseOptions = {
    // isCaseSensitive: false, // 指示比较是否应区分大小写。
    // includeScore: true, // 分数是否应包含在结果集中。分数0表示完全匹配，分数1表示完全不匹配。
    // shouldSort: true, // 是否按分数对结果列表进行排序。
    // includeMatches: true, // 匹配是否应包含在结果集中。当 时true，结果集中的每条记录都将包含匹配字符的索引。因此，这些可以用于突出显示的目的。
    // findAllMatches: true, // 当为 true 时，匹配函数将继续到搜索模式的末尾，即使已在字符串中找到完美匹配。
    // minMatchCharLength: 1, // 仅返回长度超过该值的匹配项。（例如，如果您想忽略结果中的单个字符匹配，请将其设置为2）。
    // location: 0, // 确定预期在文本中找到的模式的大概位置。
    // threshold: 0.6, // 匹配算法在什么时候放弃。阈值0.0需要完美匹配（字母和位置），阈值1.0可以匹配任何内容
    // distance: 100, // 确定匹配与模糊位置的接近程度（由 指定location）。distance远离模糊位置的字符的精确字母匹配将被评分为完全不匹配。A distanceof0要求匹配精确指定location。距离1000需要在使用of找到的800字符内有完美匹配。locationthreshold0.8
    // ignoreLocation: true, // true，搜索将忽略location和distance，因此模式出现在字符串中的位置并不重要。
    // ignoreFieldNorm: true, //true，相关性得分（用于排序）的计算将忽略字段长度范数。
    // fieldNormWeight: 1, // 确定字段长度范数对评分的影响程度。值0相当于忽略字段长度范数。值0.5将大大降低字段长度范数的影响，而值2.0将大大增加字段长度范数的影响。
    keys: ["name"],
  };
  const fuse = new Fuse(data, fuseOptions);
  const searchPattern = "肉食总部人力资源部";
  result = fuse.search(searchPattern);
  const endTime = new Date().getTime();
  console.log(`搜索耗时：${endTime - startTime}`);
  console.log(result);
}

let array = [{id:1,name:"总部"},{id:2,name:"总"},{id:3,name:"部"}]

let result = {"总":{ids:[1,2]},"部":{ids:[1,3]}}