如何从对象数组中提取所有name值组成单一数组？

有两种常见方式可以将返回的用户对象数组转换为仅包含name字段的数组：

方法一：在订阅时直接处理数据 #

直接在subscribe回调中使用数组的map()方法提取每个用户对象的name属性：

this.UserService.getAllUsers().subscribe(res => {
  const nameArray = res.map(user => user.name);
  console.log(nameArray); // 输出 ['anna', 'john', 'victor']
})

方法二：在Service层通过RxJS操作符处理数据 #

如果多个组件都需要这种格式的数据，建议把转换逻辑放在Service中，使用RxJS的map操作符提前处理响应：

1. 先导入map操作符：

import { map } from 'rxjs/operators';

2. 修改getAllUsers方法：

getAllUsers() {
  return this.http.get(this.url).pipe(
    map((users: Array<{id: number, name: string}>) => users.map(user => user.name))
  );
}

3. 组件中订阅时直接得到name数组：

this.UserService.getAllUsers().subscribe(nameArray => {
  console.log(nameArray); // 输出 ['anna', 'john', 'victor']
})

两种方法的核心都是利用数组的map()方法遍历用户数组，提取每个元素的name属性并组成新数组。方法二更符合Angular中关注点分离的设计原则，适合数据需要被多处复用的场景。

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