最近收到一个需求:
开发了一个报名功能,因为一些特殊原因,用户可以重复报名,但是要在前端标记出来哪些用户是重复报名的。
比如
orderList=
[
{userName:"黄大锤",desc:"洒家想要个冰箱"},
{userName:"李桂芬",desc:"俺想要条围巾"},
{userName:"黄大锤",desc:"洒家还想要个冰柜"},
......n条数据......
{userName:"张家宝",desc:"偶家里需要一台电视机"}
]
这里黄大锤就是重复报名,需要标记出来。
第一时间就想到groupBy好像能解决这个问题。
----------第一个错误版本 开始----------
这个是错误版本,记录下来完全是为了避免自己以后再次踩这个坑。
不过对代码改进过程不感兴趣的可以跳到 【第一个错误版本 结束】的位置。
这里的错误还是对RxJS理解不深刻导致的。
两层subscribe嵌套,并不是想两个for循环嵌套一样,按照一条一条的顺序执行的。
这里的是并行处理的。所以count的统计和first 的指向都是错误的。
最开始的时候只有一条重复的数据,所以测试并没有暴露出这个问题。
后面后多条重复记录后,就会出现混乱了。
let first : any;
from<any>(orderList).pipe(groupBy(order=>order.userName)).subscribe(obs=>{
let count = 0;
obs.subscribe(order=>{
count++;
if(count==1){
first = order;//如果有重复的话,需要回头把第一条标记出来,所以这里要记录一下
}else if(count>1){
first.isRepeat = true;//标记first为重复项
order.isRepeat = true;//标记order为重复项
}
})
})
----------第一个错误版本 结束----------
不用引入其他变量,我们用reduce将一个observer的抛出值全部丢进一个数组里。
然后根据数组的长度来判断是否重复了。
from<any>(orderList).pipe(groupBy(order=>order.userName)).subscribe(obs=>{
obs.pipe(reduce(x,y)=>[...x,y],[]).subscribe(orders=>{
if(orders.length>1){
orders.forEach(order=>{
order.isRepeat = true;
})
}
})
})
最后的结果是:
orderList=
[
{userName:"黄大锤",desc:"洒家想要个冰箱",isRepeat :true},
{userName:"李桂芬",desc:"俺想要条围巾"},
{userName:"黄大锤",desc:"洒家还想要个冰柜",isRepeat :true},
......n条数据......
{userName:"张家宝",desc:"偶家里需要一台电视机"}
]
总觉得中间的部分可以有更好的办法去简化逻辑,不过RxJS用的比较少,暂时没想出来。
希望有高手出来指教一二。先谢过。
网友评论