TypeScript中如何过滤选中角色并仅返回name字段而非完整对象？

你完全不需要用for循环来处理这个需求，有两种简洁的方式可以实现：

方法一：链式调用filter()和map()（最直观） #

先过滤出选中的角色对象，再通过map()将每个对象转换为对应的name字段，代码非常简洁易懂：

userToAdd.roles = this.roles
  .filter(role => role.checked)
  .map(role => role.name);

工作原理： #

1. filter(role => role.checked)：先筛选出所有checked为true的角色对象
2. map(role => role.name)：将筛选后的每个角色对象，转换为它的name属性值，最终得到一个纯字符串数组

方法二：用reduce()一步完成过滤和转换 #

如果你想把两个操作合并成一步，可以使用reduce()，它能在遍历数组的同时完成筛选和收集：

userToAdd.roles = this.roles.reduce((resultArray, role) => {
  // 只收集选中角色的name
  if (role.checked) {
    resultArray.push(role.name);
  }
  return resultArray;
}, []); // 初始值是空数组

工作原理： #

• 初始值[]是我们最终要返回的字符串数组
• 遍历每个角色时，判断是否选中，若是则把role.name加入结果数组
• 最后返回累加后的结果数组

这两种方法都能帮你得到期望的结构：roles字段会变成["uma_authorization", "offline_access"]这样的字符串数组，完全符合你的需求。

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