rxjs使用到mergeMap和map，但是我完全看不懂这个是什么意思，请问是否有大佬帮解释理解一下？

Question

rxjs使用到mergeMap和map，但是我完全看不懂这个是什么意思，请问是否有大佬帮解释理解一下？

import { from, of } from 'rxjs';
import { mergeMap, map } from 'rxjs/operators';

// 模拟获取用户列表的函数
function getUserList() {
  return of([
    { id: 1, name: 'User 1' },
    { id: 2, name: 'User 2' },
    { id: 3, name: 'User 3' },
  ]);
}

// 模拟获取用户详细信息的函数
function getUserDetails(userId) {
  return of({ id: userId, details: `Details of User ${userId}` });
}

// 使用 RxJS 操作符
const userList$ = getUserList();

const processedUserList$ = userList$.pipe(
  mergeMap(users => from(users)),
  mergeMap(user => getUserDetails(user.id).pipe(
    map(details => ({...user, details }))
  ))
);

processedUserList$.subscribe(user => {
  console.log(user);
});

Answer 1

getUserList 将发出一个数组

flowchart LR
s((start))
arr["[user 1, user 2, user 3]"]
e((end))
s --> arr --> e

mergeMap((users) => from(users)) 将数组中的元素依次发出

flowchart LR
s((start))
user1[user 1]
user2[user 2]
user3[user 3]
e((end))
s --> user1 --> user2 --> user3 --> e

mergeMap((user) =>
  getUserDetails(user.id).pipe(map((details) => ({ ...user, details })))
);

为每个用户添加 details

flowchart LR
s((start))
user1["{ user 1, details 1 }"]
user2["{ user 2, details 2 }"]
user3["{ user 3, details 3 }"]
e((end))
s --> user1 --> user2 --> user3 --> e