对象嵌套场景下JS过滤函数报错及逻辑修正问题求助

问题根源分析 #

• 原函数报错是因为当item[key]为嵌套对象时，对象没有includes方法，直接调用会抛出类型错误。
• 你修改后的版本存在两个核心问题：
  • isExist变量被后续otherProps的every结果覆盖，导致嵌套属性的过滤条件完全失效。
  • 使用Object.values(item.prop3).toString()会把嵌套对象的所有值拼接成逗号分隔的字符串，导致部分字符匹配的误判（比如搜索4dad23das56时，字符串中的4和56拼接后会误匹配原数据）。

正确实现代码 #

const onFilterData = (items, filters) => {
  return items.filter(item => {
    // 确保所有过滤条件都满足
    return Object.entries(filters).every(([key, filterValue]) => {
      const itemValue = item[key];
      // 若item中不存在该属性，直接不匹配
      if (!itemValue) return false;

      // 处理普通字符串属性
      if (typeof itemValue === 'string') {
        return itemValue.includes(filterValue);
      }

      // 处理嵌套对象属性（排除数组，数组可单独扩展逻辑）
      if (typeof itemValue === 'object' && !Array.isArray(itemValue)) {
        // 检查嵌套对象的所有值中是否有任意一个包含过滤值
        return Object.values(itemValue).some(value => {
          // 仅针对字符串值做匹配，其他类型可按需扩展
          return typeof value === 'string' && value.includes(filterValue);
        });
      }

      // 未处理的类型（如数字、数组）默认不匹配，可按需扩展
      return false;
    });
  });
};

关键逻辑说明 #

• 保持原函数的every逻辑：所有过滤条件必须同时满足，才会保留当前项。
• 类型分支判断：
  • 字符串属性：直接调用includes做包含匹配。
  • 嵌套对象：通过Object.values提取所有值，用some检查是否有任意一个值符合过滤条件（避免拼接字符串导致的误匹配）。
  • 属性不存在的边界处理：直接返回false，避免后续代码报错。

测试验证 #

1. 普通属性过滤

const filters1 = { prop1: 'abc' };
const items = [{
  prop1: 'abc',
  prop2: 'def',
  prop3: { prop4: '123', prop5: '456' }
}];
console.log(onFilterData(items, filters1)); // 返回原数组，符合预期

2. 嵌套属性匹配

const filters2 = { prop1: 'abc', prop3: '456' };
console.log(onFilterData(items, filters2)); // 返回原数组，符合预期

3. 嵌套属性不匹配

const filters3 = { prop1: 'abc', prop3: '4dad23das56' };
console.log(onFilterData(items, filters3)); // 返回空数组，解决误匹配问题

扩展方向 #

• 若需支持数组类型属性：可新增Array.isArray(itemValue)分支，遍历数组元素做匹配。
• 若需支持多层嵌套对象：可编写递归辅助函数，逐层遍历所有嵌套属性值进行检查。

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