Angular中对象键值对匹配筛选结果不符问题求助

场景说明 #

现有示例对象：

const obj = {
    "29": "DTE Queue",
    "30": "Services Reporting Sales",
    "31": "Services Reporting Ops",
    "41": "UPLOAD",
    "55": "Support Report"
};

当输入筛选关键词ser时，期望得到结果：{ "30": "Services Reporting Sales", "31": "Services Reporting Ops" }，但以下两种方法仅返回{"30": "Services Reporting Sales"}。

问题原因分析 #

方法1问题

getKeyByValue(obj:object, value) {
  const matchedEntry = Object.entries(obj).find(entry => 
  entry[1].toLowerCase().match(value.toLowerCase()));
  return matchedEntry &&(<any>Object).fromEntries([matchedEntry])
}

这里使用了Array.find()方法，该方法仅返回数组中第一个满足条件的元素，不会继续查找后续匹配项，所以只能拿到第一个符合的结果。

方法2问题

getKeyByValue(obj: Object, value) {
    try {
      return (<any>Object).fromEntries([
        Object.entries(obj).find(([key, val]) =>
          val.toLowerCase().startsWith(value.toLowerCase())
        ),
      ]);
    } catch (err) {
      console.log("Object not found");
      return {};
    }
  }

同样使用了Array.find()方法，逻辑和方法1一致，只取第一个匹配的键值对，自然无法得到所有符合条件的结果。

修复方案 #

要获取所有匹配项，需要使用Array.filter()方法替代find()，该方法会返回数组中所有满足条件的元素，再通过Object.fromEntries()转换为对象：

修复后的代码（支持包含匹配）

getKeyByValue(obj: object, value: string) {
  const lowerValue = value.toLowerCase();
  const matchedEntries = Object.entries(obj).filter(entry => 
    entry[1].toLowerCase().includes(lowerValue)
  );
  return Object.fromEntries(matchedEntries);
}

修复后的代码（支持前缀匹配，对应原方法2的startsWith逻辑）

getKeyByValue(obj: Object, value: string) {
  try {
    const lowerValue = value.toLowerCase();
    const matchedEntries = Object.entries(obj).filter(([key, val]) =>
      val.toLowerCase().startsWith(lowerValue)
    );
    return Object.fromEntries(matchedEntries);
  } catch (err) {
    console.log("Object not found");
    return {};
  }
}

说明 #

• filter()会遍历整个对象的键值对，收集所有符合条件的项
• 提前将关键词转为小写，避免重复执行toLowerCase()，提升性能
• 若没有匹配项，Object.fromEntries()会返回空对象，无需额外处理

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