如何以响应式方式交换数组中两个Item对象的order属性值？

Hey there! Let's fix that nested subscription issue and make your RxJS code more idiomatic and maintainable. The original code uses nested subscriptions which can lead to memory leaks, hard-to-read logic, and goes against reactive programming best practices. Here's a cleaner approach using switchMap to combine your onUp and list streams properly:

class Item { 
  name: string; 
  order: number; 
  constructor(name: string, order: number) {
    this.name = name;
    this.order = order;
  }
}

let onUp = new Rx.Subject<number>(); 
// 修正BehaviorSubject的类型：应该是Item数组而不是单个Item
let list = new Rx.BehaviorSubject<Item[]>([ 
  new Item("7", 70), 
  new Item("2", 20), 
  new Item("5", 50), 
  new Item("3", 30), 
  new Item("4", 40), 
  new Item("6", 60), 
  new Item("1", 10) 
]); 

// 监听列表更新并打印
list.subscribe(console.log); 

onUp.pipe(
  // 用switchMap关联onUp事件和list的最新值，若新事件触发会取消之前未完成的操作
  switchMap(targetOrder => list.pipe(
    take(1),
    map(items => {
      // 创建数组副本并排序，避免修改原数组
      const sortedItems = [...items].sort((a, b) => a.order - b.order);
      
      // 找到目标order对应的元素索引
      const targetIndex = sortedItems.findIndex(item => item.order === targetOrder);
      
      // 如果元素已经是第一个，无需交换
      if (targetIndex <= 0) return items;
      
      // 创建要交换的两个元素的副本，避免修改原对象引用
      const currentItem = {...sortedItems[targetIndex]};
      const prevItem = {...sortedItems[targetIndex - 1]};
      
      // 交换order属性值
      [currentItem.order, prevItem.order] = [prevItem.order, currentItem.order];
      
      // 更新排序后的数组
      sortedItems[targetIndex] = currentItem;
      sortedItems[targetIndex - 1] = prevItem;
      
      return sortedItems;
    })
  ))
).subscribe(updatedList => {
  list.next(updatedList);
});

// 触发order为30的元素上移操作
onUp.next(30);

关键改进点 #

• 消除嵌套订阅：用switchMap替代嵌套订阅，保持代码扁平化，避免"订阅地狱"，同时降低内存泄漏风险。
• 修复类型错误：原代码中BehaviorSubject的类型被错误定义为Item，修正为Item[]保证类型安全。
• 不可变操作：使用扩展语法创建数组和对象的副本，避免直接修改原数据引用，防止意外的副作用。
• 边界情况处理：增加了对首元素的判断，避免无效的交换操作。
• 逻辑更清晰：所有数据流转换都在pipe中完成，数据流向一目了然。

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