使用Subject和Observable实现歌曲列表删除：filter与next的正确用法

我明白你现在的困境——直接操作Subject的getValue()或者在订阅里调用next()确实容易踩坑，要么逻辑别扭，要么触发无限循环导致RangeError。咱们一步步理清楚怎么正确处理：

首先，别用普通Subject存状态，换成BehaviorSubject才是正确选择！BehaviorSubject会保存当前的最新值，还有初始值，比普通Subject适合做状态容器，而且它的value属性（不是getValue()）能安全获取当前值，不用怕undefined。

接下来分两种常用方案，你可以根据场景选：

方案一：简单直接的删除操作（适合小型组件） #

如果你的组件逻辑不复杂，直接在删除方法里获取当前歌曲列表，过滤后更新BehaviorSubject就行，完全不会有循环问题：

// 初始化BehaviorSubject，传入初始歌曲列表（空数组或默认数据）
private songsSubject = new BehaviorSubject<Song[]>([]);
// 对外暴露只读的Observable，给模板用async管道
public songs$ = this.songsSubject.asObservable();

// 删除歌曲的方法
deleteSong(targetSongId: string) {
  // 安全获取当前的歌曲列表
  const currentSongs = this.songsSubject.value;
  // 过滤掉要删除的歌曲，生成新数组（别直接修改原数组！）
  const updatedSongs = currentSongs.filter(song => song.id !== targetSongId);
  // 发送新的列表到Subject，模板会自动更新
  this.songsSubject.next(updatedSongs);
}

这种方法的好处是简单直观，因为我们只是同步获取当前状态，生成新状态后发送，没有订阅自身流的操作，所以不会触发无限循环。

方案二：响应式事件流组合（适合复杂场景） #

如果你的组件有更多交互逻辑（比如批量删除、和其他流联动），更符合RxJS思想的做法是用删除事件流和歌曲列表流组合，通过scan操作符处理状态更新：

private songsSubject = new BehaviorSubject<Song[]>([]);
public songs$ = this.songsSubject.asObservable();

// 创建一个专门接收删除事件的Subject
private deleteTrigger$ = new Subject<string>();

constructor() {
  // 组合删除事件流和当前歌曲列表流
  this.deleteTrigger$.pipe(
    // 获取当前最新的歌曲列表
    withLatestFrom(this.songs$),
    // 每次删除事件触发时，生成新的歌曲列表
    map(([deletedSongId, currentSongs]) => {
      return currentSongs.filter(song => song.id !== deletedSongId);
    }),
    // 更新歌曲列表的状态
    tap(updatedSongs => this.songsSubject.next(updatedSongs))
  ).subscribe();
}

deleteSong(targetSongId: string) {
  // 只需要发送删除事件，剩下的交给流处理
  this.deleteTrigger$.next(targetSongId);
}

这种方法把"删除动作"和"状态更新"分离开，更符合响应式编程的理念，后续扩展其他操作（比如添加歌曲）也可以用同样的模式，维护起来更清晰。

为什么你之前的方法会出问题？ #

• 用普通Subject的getValue()：普通Subject没有初始值，也不保存当前值，getValue()可能返回undefined，而且这种同步取值的方式本身就破坏了RxJS的响应式逻辑。
• 在Subject的订阅里调用next()：这会触发无限递归——你订阅了Subject，当你调用next()时，订阅回调又会被触发，然后又调用next()，循环往复直到爆栈，所以会出现RangeError。

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