JavaScript过滤含嵌套对象的数组时嵌套属性匹配失效如何解决

JavaScript的方括号属性访问语法不会自动解析字符串里的点分隔嵌套路径。
你代码里写company[key]时，当key值为字符串'category.name'，JS会尝试读取company对象上**键名本身就是category.name**的顶层属性，而不会先读取company.category再读取它的name子属性。你的原始数据里不存在这个顶层键，这部分判断始终返回undefined，转成字符串后自然匹配不到搜索值。
顶层属性（如name、launch_year）能正常过滤，是因为这些键本身就是对象的直接属性，company['name']可以正确取到对应的值。

方案1：直接枚举所有待匹配的值（最简单、无额外依赖） #

不需要维护字符串键列表，直接把所有要匹配的属性值放到数组里做判断，嵌套属性单独手动取值即可：

var search = "qui";
var data = [{
  "name": "Sauer-Metz", "slug": "ab-laborum",
  "website": "https://test.com", "launch_year": 2017, "category_id": 6,
  "category": { "id": 6, "name": "qui", "slug": "qui" }
}];

var results = data.filter(company => [
  company.name,
  company.slug,
  company.launch_year,
  company.website,
  company.category.name,
  company.category.slug
].some(val => String(val).toLowerCase().includes(search.toLowerCase())));

console.log(results); // 可以正常匹配到category.name为qui的条目

方案2：封装嵌套取值工具（适合属性多、嵌套层级深的场景） #

如果想保留用字符串写属性路径的写法，可以封装一个简单的逐层取值函数，自动解析点分隔的路径：

// 按点路径读取嵌套对象属性
const getNestedVal = (target, pathStr) => {
  return pathStr.split('.').reduce((currentNode, key) => currentNode?.[key], target);
}

var search = "qui";
var data = [{
  "name": "Sauer-Metz", "slug": "ab-laborum",
  "website": "https://test.com", "launch_year": 2017, "category_id": 6,
  "category": { "id": 6, "name": "qui", "slug": "qui" }
}];

var results = data.filter(company => [
  'name', 'slug', 'launch_year', 'website', 'category.name', 'category.slug'
].some(key => {
  const val = getNestedVal(company, key);
  return String(val).toLowerCase().includes(search.toLowerCase());
}));

console.log(results);

注意：如果存在某条数据没有category属性的情况，上述两种写法都需要做空值兼容，避免读取undefined.name抛出报错。

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