如何用JavaScript高效实现对象数组的搜索过滤功能

原代码存在的问题 #

• 大小写不兼容：includes方法区分大小写，搜索值'Greenhouse'无法匹配数据里的'greenhouse'
• 重复添加对象：同一个对象可能因多个条件匹配（比如名称和连接器都符合）被多次推入结果数组
• 不必要的异步开销：如果filterConnection是同步逻辑，使用Promise.all和await完全多余，会增加不必要的性能消耗
• 逻辑冗余：多个独立if判断没有合并，且未做去重处理

优化后的实现代码 #

const searchVal = 'Greenhouse'.toLowerCase(); // 统一转小写，消除大小写差异

const filteredData = data.map(item => {
  // 筛选匹配的连接器
  const matchedConnectors = item.connectors?.filter(conn => 
    conn.name.toLowerCase().includes(searchVal) || 
    conn.companyName.toLowerCase().includes(searchVal)
  ) || [];

  // 判断当前item是否符合任一搜索条件
  const isItemMatch = 
    item.name.toLowerCase().includes(searchVal) ||
    item.listingType.toLowerCase().includes(searchVal) ||
    matchedConnectors.length > 0;

  if (!isItemMatch) return null; // 不匹配则返回null，后续过滤掉

  // 若连接器有匹配项，返回替换后的item；否则返回原item
  return matchedConnectors.length > 0 
    ? { ...item, connectors: matchedConnectors } 
    : item;
}).filter(Boolean); // 过滤掉null值

return filteredData;

优化点说明 #

1. 大小写统一处理：将搜索值和所有要比较的字段都转成小写，确保匹配不受大小写影响
2. 避免重复添加：通过map+filter组合，每个对象只会被处理一次，不会重复出现在结果中
3. 移除不必要的异步：如果filterConnection是同步逻辑，直接用数组原生filter替代，大幅提升性能；如果确实需要异步操作，可调整为并行处理但避免无意义的await
4. 逻辑合并：将多个判断条件合并为一个isItemMatch，代码更简洁易读
5. 按需修改对象：仅当连接器有匹配项时，才创建新对象替换连接器数组，减少不必要的对象拷贝

若filterConnection是异步函数的优化版本 #

如果filterConnection必须是异步操作，可优化为：

const searchVal = 'Greenhouse'.toLowerCase();

const filteredData = await Promise.all(data.map(async item => {
  const matchedConnectors = Array.isArray(item.connectors) 
    ? await filterConnection(item.connectors, searchVal)
    : [];

  const isItemMatch = 
    item.name.toLowerCase().includes(searchVal) ||
    item.listingType.toLowerCase().includes(searchVal) ||
    matchedConnectors.length > 0;

  if (!isItemMatch) return null;

  return matchedConnectors.length > 0 
    ? { ...item, connectors: matchedConnectors } 
    : item;
})).filter(Boolean);

return filteredData;

此版本保留异步逻辑，但避免了原代码中多次push导致的重复问题，同时统一了条件判断逻辑。

内容的提问来源于stack exchange，提问作者mani kandan