当前位置：首页 > JavaScript

js实现检索

2026-03-14 11:03:12JavaScript

使用原生JavaScript实现检索功能

在JavaScript中实现检索功能通常涉及对数组或DOM元素的搜索操作。以下是几种常见场景的实现方法：

数组数据检索

const data = ['apple', 'banana', 'cherry', 'date'];
const searchTerm = 'a';

const results = data.filter(item => 
  item.toLowerCase().includes(searchTerm.toLowerCase())
);
console.log(results); // ['apple', 'banana', 'date']

DOM元素检索

js实现检索

const searchInput = document.getElementById('search-input');
const items = document.querySelectorAll('.item');

searchInput.addEventListener('input', () => {
  const term = searchInput.value.toLowerCase();

  items.forEach(item => {
    const text = item.textContent.toLowerCase();
    item.style.display = text.includes(term) ? '' : 'none';
  });
});

实现模糊搜索

对于更复杂的搜索需求，可以使用模糊搜索算法：

function fuzzySearch(text, pattern) {
  const patternChars = pattern.toLowerCase().split('');
  const textChars = text.toLowerCase().split('');

  let patternIndex = 0;
  for (let i = 0; i < textChars.length; i++) {
    if (textChars[i] === patternChars[patternIndex]) {
      patternIndex++;
      if (patternIndex === patternChars.length) return true;
    }
  }
  return false;
}

const matches = data.filter(item => fuzzySearch(item, 'ba'));
console.log(matches); // ['banana']

使用正则表达式实现高级搜索

正则表达式可以提供更灵活的搜索模式：

js实现检索

const searchData = [
  { name: 'John Doe', age: 30 },
  { name: 'Jane Smith', age: 25 }
];

const search = (query, data) => {
  const regex = new RegExp(query, 'i');
  return data.filter(item => 
    regex.test(item.name) || regex.test(item.age.toString())
  );
};

console.log(search('joh|25', searchData)); 
// 返回匹配John或年龄25的记录

实现分页检索

对于大量数据的检索，通常需要结合分页功能：

function paginatedSearch(data, query, page = 1, pageSize = 10) {
  const filtered = data.filter(item => 
    item.name.includes(query)
  );

  const start = (page - 1) * pageSize;
  const end = start + pageSize;

  return {
    results: filtered.slice(start, end),
    total: filtered.length,
    pages: Math.ceil(filtered.length / pageSize)
  };
}

性能优化技巧

对于大型数据集，可以采用以下优化策略：

使用Web Worker在后台线程执行搜索
实现防抖(debounce)机制减少频繁搜索
建立索引或使用Map数据结构加速查找
考虑使用第三方库如Fuse.js实现更高效的模糊搜索

// 防抖实现示例
function debounceSearch(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const performSearch = debounceSearch(searchFunction, 300);
searchInput.addEventListener('input', performSearch);

这些方法可以根据具体需求组合使用，构建出高效的前端检索功能。

标签: js