如何在Angular中用JavaScript的.filter()方法按多属性过滤对象列表？

原始数据列表 #

[
  {id: 97, name: 'create', obeName: 'None', version: '5.1', versionNum: 5.1},
  {id: 7, name: 'fare', obeName: 'None', version: '7.3', versionNum: 7.3},
  {id: 1324, name: 'serach_flyer', obeName: 'None', version: '9.1', versionNum: 9.1},
  {id: 24, name: 'PNR_AddFrequentFlyer', obeName: 'None', version: '12.1', versionNum: 12.1},
  {id: 14, name: 'price booking', obeName: 'Availability', version: '18.1', versionNum: 18.1},
  {id: 2644, name: 'downline', obeName: 'None', version: '2.7', versionNum: 2.7},
  {id: 235921, name: 'airline service', obeName: 'None', version: '1.0', versionNum: 1}
]

过滤条件 #

const ob = {name: 'airline', version: '1.4'}

现有代码（存在问题） #

list.filter(
  data => {
    for (var prop in ob) {
      if (Object.prototype.hasOwnProperty.call(ob, prop)) {
        if( typeof ob[prop] === 'string'){
          ob[prop].toLowerCase().includes(data[prop].toLowerCase())
        }
        else{
            ob[prop].includes(data[prop])}
}})

正确实现方式 #

你的现有代码存在三个关键问题：

• 没有返回布尔值：filter的回调函数必须返回true/false来决定是否保留当前项，你的代码没有任何返回语句
• 多条件逻辑错误：需要确保所有过滤条件都匹配才保留数据，只要有一个条件不满足就应该排除
• 类型处理不当：version字段是字符串，你错误地用了数字的includes方法（数字没有这个方法），且未处理大小写敏感问题

方案1：全字段模糊匹配 #

如果需求是name包含"airline"、version包含"1.4"的模糊匹配，可用以下代码：

const filteredList = list.filter(data => {
  // 遍历所有过滤条件
  for (const prop in ob) {
    if (Object.prototype.hasOwnProperty.call(ob, prop)) {
      const filterVal = ob[prop];
      const dataVal = data[prop];

      // 数据中无该属性则直接排除
      if (!dataVal) return false;

      // 统一转字符串并小写，避免大小写敏感，兼容数字类型
      const filterStr = String(filterVal).toLowerCase();
      const dataStr = String(dataVal).toLowerCase();

      // 当前条件不匹配，立即排除该数据
      if (!dataStr.includes(filterStr)) {
        return false;
      }
    }
  }
  // 所有条件都满足，保留该数据
  return true;
});

方案2：版本号精确比较（如筛选版本≥1.4的数据） #

如果需求是name包含"airline"且version大于等于1.4，需要单独处理版本号的比较逻辑：

// 辅助函数：比较两个版本号，返回1/0/-1分别代表v1>v2、相等、v1<v2
function compareVersions(v1, v2) {
  const v1Parts = String(v1).split('.').map(Number);
  const v2Parts = String(v2).split('.').map(Number);
  const maxLen = Math.max(v1Parts.length, v2Parts.length);

  for (let i = 0; i < maxLen; i++) {
    const num1 = v1Parts[i] || 0;
    const num2 = v2Parts[i] || 0;
    if (num1 > num2) return 1;
    if (num1 < num2) return -1;
  }
  return 0;
}

const filteredList = list.filter(data => {
  for (const prop in ob) {
    if (Object.prototype.hasOwnProperty.call(ob, prop)) {
      const filterVal = ob[prop];
      const dataVal = data[prop];

      if (!dataVal) return false;

      if (prop === 'version') {
        // 版本号小于过滤条件，排除
        if (compareVersions(dataVal, filterVal) < 0) {
          return false;
        }
      } else {
        // 其他字段做模糊匹配
        const filterStr = String(filterVal).toLowerCase();
        const dataStr = String(dataVal).toLowerCase();
        if (!dataStr.includes(filterStr)) {
          return false;
        }
      }
    }
  }
  return true;
});

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