如何使用RxJS将两个等长数组交叉连接为目标数组？

嘿，这个需求用RxJS的zip操作符就完美搞定啦！它专门用来将多个Observable发射的元素按对应位置一一配对，刚好适配你两个等长数组的场景。

具体实现步骤 #

我们可以分几步来完成：

• 把两个数组转换成Observable，用from操作符逐个发射数组元素；
• 用zip操作符将两个Observable的对应元素配对；
• 用map操作符把每一对元素拼接成name+age的字符串格式；
• 用toArray把所有结果收集成一个数组。

完整代码示例 #

import { from, zip } from 'rxjs';
import { map, toArray } from 'rxjs/operators';

// 原始数组
const name = ['tom', 'jerry', 'pete'];
const age = [4, 5, 6];

// 将数组转换为Observable，逐个发射元素
const name$ = from(name);
const age$ = from(age);

// 组合并处理数据
zip(name$, age$)
  .pipe(
    // 对每一对元素进行拼接
    map(([nameStr, ageNum]) => `${nameStr}${ageNum}`),
    // 将所有发射的结果收集成一个数组
    toArray()
  )
  .subscribe(character => {
    console.log(character); // 输出结果：['tom4', 'jerry5', 'pete6']
  });

代码解释 #

• from(name)/from(age)：把普通数组转换成Observable，会依次发射数组中的每个元素；
• zip(name$, age$)：等待两个Observable都发射了第n个元素时，将这两个元素打包成一个数组[nameStr, ageNum]发射出去；
• map操作符：接收每一对元素，按你需要的格式拼接成字符串；
• toArray：当源Observable完成时，把所有发射过的元素收集到一个数组里，最后通过subscribe就能拿到目标数组啦。

额外提一句：如果两个数组长度不一致，zip会以较短的数组长度为准，不过你的问题里明确说两个数组长度相同，所以完全不用担心这个问题~

内容的提问来源于stack exchange，提问作者Adventitious Angles Qs Poster