如何在JavaScript/TypeScript多层对象数组中实现团队搜索

我正尝试用JavaScript/TypeScript构建一个可搜索的团队菜单，但不知道该如何实现。

我的数据结构： #

const data = [
    {
        'name': 'Alex A',
        'agentId': '1225',
     },
    {
        'name': 'Tammy',
        'agentId': '125',
        'team': [
            {
                'name': 'Alex B',
                'agentId': 249
            },
            {
                'name': 'Alexander C',
                'agentId': 148
            },
            {
                'name': 'Ed',
                'agentId': 382
            }
        ]
    },
    {
        'name': 'Edward',
        'agentId': '594',
        'team': [
            {
                'name': 'Daniel',
                'agentId': 152
            },
            {
                'name': 'Alexis D',
                'agentId': 1900
            }
        ]
    }
];

搜索"Alex"的期望结果： #

const data = [
    {
        'name': 'Alex A',
        'agentId': '1225',
     },
    {
        'name': 'Tammy',
        'agentId': '125',
        'team': [
            {
                'name': 'Alex B',
                'agentId': 249
            },
            {
                'name': 'Alexander C',
                'agentId': 148
            }
        ]
    },
    {
        'name': 'Edward',
        'agentId': '594',
        'team': [
            {
                'name': 'Alexis D',
                'agentId': 1900
            }
        ]
    }
];

我熟悉的PHP实现思路： #

$x = 0;
foreach($data as $row){
       if (strpos($row.name, 'alex')) {
            $newArray[$x] = $row;
           }

       foreach($row['team'] as $person) {
        if (strpos($person.name, 'alex')) {
           if(!isset($newArray[$x])) {
             $newArray[$x] = $row;
          }
             $newArray[$x]['team'][] = $person;
            }
        $x++;
    }

}

我当前的TypeScript问题代码： #

const searchName = "Alex";
const newArray = [];
if (searchName.length >= 3) {
  const filtered = data.forEach((user) => {
    const name = user.name.toLowerCase();
    if (name.indexOf(searchName.toLowerCase())) {
      newArray.push(user);
    }
    if (user.team) {
      const teamFiltered = user.team.forEach((member) => {
        if (member.name.indexOf(searchName.toLowerCase())) {
          newArray.push({
            name: user.name,
            agentId: user.agentId,
            team: member,
          });
        }
      });
    }
  });
}

正确的JavaScript/TypeScript实现方案： #

你的代码主要存在几个问题：

1. indexOf 返回-1表示未找到匹配，你的判断逻辑反了，应该用 indexOf(...) !== -1
2. 使用 forEach 无法直接过滤数组，应该结合判断逻辑筛选需要保留的用户
3. 处理团队成员时，错误地创建新对象重复添加，应该保留原用户结构并仅过滤匹配的团队成员

以下是正确实现：

const searchName = "Alex";
const lowerSearch = searchName.toLowerCase();
const filteredData: typeof data = [];

if (searchName.length >= 3) {
  data.forEach(user => {
    // 检查当前用户是否匹配搜索关键词
    const userMatches = user.name.toLowerCase().includes(lowerSearch);
    // 过滤团队中匹配的成员
    const matchedTeamMembers = user.team ? user.team.filter(member => 
      member.name.toLowerCase().includes(lowerSearch)
    ) : [];

    // 如果用户自身匹配，或者有匹配的团队成员，则保留该用户
    if (userMatches || matchedTeamMembers.length > 0) {
      // 创建用户副本，避免修改原始数据
      const filteredUser = { ...user };
      // 如果有团队且有匹配成员，替换为过滤后的团队列表
      if (filteredUser.team) {
        filteredUser.team = matchedTeamMembers;
      }
      filteredData.push(filteredUser);
    }
  });
}

console.log(filteredData);

实现说明： #

• 先将搜索关键词转为小写，避免大小写敏感问题
• 对每个用户，分别判断自身是否匹配，以及团队成员中是否有匹配项
• 使用 filter 筛选符合条件的团队成员
• 创建用户副本（{ ...user }），防止修改原始数据结构
• 仅当用户自身匹配或存在匹配的团队成员时，才将处理后的用户加入结果数组

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