JavaScript中如何通过过滤对象实现对象数组的条件筛选

核心实现代码 #

function myMethod(array, objectToFilterOn) {
  // 无过滤条件时直接返回原数组拷贝
  const filterKeys = Object.keys(objectToFilterOn);
  if (filterKeys.length === 0) return [...array];

  // 遍历数组筛选满足所有条件的元素
  return array.filter(item => {
    // 校验当前元素是否满足所有过滤规则
    return filterKeys.every(key => {
      const filterValue = objectToFilterOn[key];
      const itemValue = item[key];

      // 过滤值为数组的场景：需目标数组包含所有过滤项（自动处理字符串前后空格）
      if (Array.isArray(filterValue)) {
        if (!Array.isArray(itemValue)) return false;
        // 统一处理数组元素的前后空格，兼容示例中带空格的字段值
        const trimmedItemValues = itemValue.map(val => typeof val === 'string' ? val.trim() : val);
        return filterValue.every(filterVal => {
          const trimmedFilterVal = typeof filterVal === 'string' ? filterVal.trim() : filterVal;
          return trimmedItemValues.includes(trimmedFilterVal);
        });
      }

      // 普通值场景直接全等匹配
      return itemValue === filterValue;
    });
  });
}

逻辑说明 #

• 用Array.filter遍历原数组筛选符合要求的元素
• 用Array.every保证筛选出的元素满足所有传入的过滤条件
• 自动适配数组类型的过滤条件：只要过滤数组内的所有值都出现在目标项的对应数组中即判定匹配，同时自动处理字符串前后空格，兼容你示例中lowerBack 带空格的场景
• 注意：过滤条件的键名需要和数组项的键名大小写完全匹配，比如示例中第一个元素的主键是Id，后续元素主键是ID，过滤时要对应写对键名

测试示例 #

// 测试1：单条件过滤
const res1 = myMethod(data, {category:'raise'});
console.log(res1); // 返回ID为4的动作项

// 测试2：多条件混合过滤
const res2 = myMethod(data, {category:"raise", area:["lowerBack"]});
console.log(res2); // 同样返回ID为4的动作项，自动忽略area字段中lowerBack的尾部空格

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