RxJS Observable：如何从JSON对象中提取两组独立数组

当然可以！不过先提个小建议：你当前代码里用switchMap把数组转成单个元素流的操作，在这个场景下其实没必要——不过如果你确实需要结合map和switchMap来实现（比如后续有异步操作的计划），或者想知道更简洁的写法，我都给你梳理清楚。

方式一：最简洁的实现（仅用map） #

这是效率最高的写法，直接在map操作符里处理原数组，一次性提取两个目标数组：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';

this.data$ = Observable.of({ 
  "data": [ 
    { "firstname": "abc", "lastname": "aa" }, 
    { "firstname": "xyz", "lastname": "bb" } 
  ] 
})
// 先提取外层的data数组
.map(res => res.data)
// 从data数组中提取两个独立数组
.map(dataArray => {
  const firstnames = dataArray.map(item => item.firstname);
  const lastnames = dataArray.map(item => item.lastname);
  // 返回包含两个数组的对象，订阅时就能同时拿到两者
  return { firstnames, lastnames };
});

// 订阅示例
this.data$.subscribe(result => {
  console.log(result.firstnames); // 输出: ["abc", "xyz"]
  console.log(result.lastnames);  // 输出: ["aa", "bb"]
});

方式二：结合map和switchMap实现（满足你的需求） #

如果你确实需要用到switchMap（比如中间有异步操作需要切换流），可以通过以下方式实现——虽然在这个场景下有点冗余，但完全符合你的要求：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toArray';

this.data$ = Observable.of({ 
  "data": [ 
    { "firstname": "abc", "lastname": "aa" }, 
    { "firstname": "xyz", "lastname": "bb" } 
  ] 
})
.map(res => res.data)
// 用switchMap切换到单个元素的Observable流
.switchMap(dataArray => {
  // 把数组拆成单个元素的流，再用map提取每个元素的字段
  return Observable.from(dataArray)
    .map(item => ({ firstname: item.firstname, lastname: item.lastname }))
    .toArray(); // 把单个元素流重新合并为数组
})
// 最后提取两个目标数组
.map(processedArray => {
  const firstnames = processedArray.map(item => item.firstname);
  const lastnames = processedArray.map(item => item.lastname);
  return { firstnames, lastnames };
});

小提示 #

• 第一种方式直接操作数组，避免了流的拆分与合并，性能更优。
• 第二种方式的switchMap主要用于处理异步场景（比如每个元素需要发起HTTP请求），如果只是同步提取数组，优先选第一种。

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