如何优化嵌套对象数组查找？链式调用数组方法实现方案咨询

已知嵌套结构的customerGroups数组如下：

const customerGroups = [
  {
    id: 1,
    customers: [{
      id: 1, // 同一客户可能出现在多个组中
      name: 'Jhon'
    }],
  },
  {
    id: 2,
    customers: [{
      id: 2, 
      name: 'Jhon'
    }],
  },
  {
    id: 3,
    customers: [{
      id: 2, 
      name: 'Doe'
    }],
  },
];

现在已知某个customer.id，希望获取对应的customer.name。尝试过以下代码但效果不理想：

const idSearch = 1
const customerName = customers.find(({id})=>id==idSearch).name

const customers = customerGroup.find(({ customer }) =>
    customer.find(({ id }) =>idSearch === id),
  )?.customers
const customerName = customers.find(({id})=>id==idSearch).name

也曾尝试用.map合并客户数组但未成功，且不想重复从后端获取数据，希望找到通过链式调用.map/.filter/.find方法实现此类查找的通用方案。

方法1：扁平化客户数组后查找 #

先通过.flatMap把所有组里的客户合并成一个一维数组，再用.find匹配ID：

const idSearch = 1;
const targetCustomer = customerGroups
  .flatMap(group => group.customers) // 提取所有客户并扁平化数组
  .find(customer => customer.id === idSearch);

const customerName = targetCustomer?.name || '未找到该客户';

这里用?.避免找不到客户时出现报错，同时可以设置默认值。

方法2：嵌套find直接定位 #

不需要扁平化数组，通过两层.find直接找到目标客户：

const idSearch = 1;
const targetCustomer = customerGroups
  .find(group => group.customers.some(customer => customer.id === idSearch))
  ?.customers.find(customer => customer.id === idSearch);

const customerName = targetCustomer?.name || '未找到该客户';

第一层.find找到包含目标客户的组，第二层.find从该组中取出目标客户。

方法3：提前构建ID-名称映射（高效复用） #

如果需要多次根据ID查找名称，建议提前构建一个映射对象，后续查找直接O(1)读取：

// 构建映射（只需执行一次）
const customerNameMap = customerGroups
  .flatMap(group => group.customers)
  .reduce((map, customer) => {
    // 如果同一ID对应多个名称，这里会保留最后出现的那个，可根据需求调整逻辑
    map[customer.id] = customer.name;
    return map;
  }, {});

// 后续查找直接用映射
const idSearch = 1;
const customerName = customerNameMap[idSearch] || '未找到该客户';

这种方式适合频繁查找的场景，避免重复遍历数组。

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