如何使用underscore.js过滤含动态键值的JSON数组数据？

你的问题核心在于原代码直接对对象调用字符串方法，而没有先提取动态的键进行匹配。下面是针对Underscore.js的解决方案，分两种常见的匹配场景：

1. 精确匹配键（输入"a"返回键为"a"的对象） #

这种场景下，我们会检查对象的键是否与searchValue完全一致（支持大小写不敏感匹配）：

filterData(searchValue: string) {
  const lowerSearch = searchValue.toLowerCase();
  this.skillGrpsFilteredData = _.filter(this.skillGroupsAndTypes, (obj) => {
    // 获取当前对象的所有键
    const keys = _.keys(obj);
    // 检查是否有键与搜索值匹配（忽略大小写）
    return keys.some(key => key.toLowerCase() === lowerSearch);
  });
}

2. 模糊匹配键（输入"e"返回键包含"e"的对象） #

如果需要支持键包含搜索值的模糊匹配，只需要把判断逻辑改成includes即可：

filterData(searchValue: string) {
  const lowerSearch = searchValue.toLowerCase();
  this.skillGrpsFilteredData = _.filter(this.skillGroupsAndTypes, (obj) => {
    const keys = _.keys(obj);
    return keys.some(key => key.toLowerCase().includes(lowerSearch));
  });
}

为什么原代码无效？ #

你之前的代码obj.toLowerCase().includes(searchValue)存在两个问题：

• obj是一个JSON对象，不是字符串，直接调用toLowerCase()会报错或者返回无效结果；
• 你没有提取对象的动态键，而是直接对整个对象操作，自然无法匹配到键的内容。

针对单键对象的简化写法 #

如果你的数组里每个对象一定只有一个键（像示例那样），可以用_.first(_.keys(obj))直接获取唯一键，简化代码：

filterData(searchValue: string) {
  const lowerSearch = searchValue.toLowerCase();
  this.skillGrpsFilteredData = _.filter(this.skillGroupsAndTypes, (obj) => {
    const key = _.first(_.keys(obj));
    return key.toLowerCase() === lowerSearch; // 或者用includes做模糊匹配
  });
}

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