通过Set对象便捷判断所选格子和已占用的格子是否冲突
2019-07-23 15:36

应用场景

image.png

像上面这种需求,就是会议室管理。已有的会议会占用一定的时间段。这时候我们通过拖动的方式来选择时间段创建新的会议的时候,就需要新的会议的时间段和已有会议的时间段不能冲突。

image.pngimage.png

image.png

我们就需要像上面这样判断多种情况下的冲突。这样的话,我们就需要写很多if...else...,或者switch...case..,甚是麻烦。

巧用Set判断时间段冲突

ES6中提供了一个Set对象,是一个iterable可遍历的对象。Set对象跟Array对象很类似,最主要的区别就是Set对象中的元素不能重复。

类似的代码如下:

let stime=8;
let etime=12;//选中时间段的时间范围
for(let i=0;i<this.meets.length;i++){
      let tmp=this.meets[i];
      let shour=tmp.starthour;
      let ehour=tmp.endhour;
      let set=new Set();
      for(let k=stime;k<=etime;k++){
           set.add(k);
      }
      for(let k=shour+8;k<=ehour+8;k++){
            set.add(k);
      }
      if(set.size<((etime-stime)+(ehour-shour)+2)){
                flag=true;
      }
}
if(flag){
    //时间段有冲突
}

上面这段代码的逻辑就是利用Set对象元素不能重复的特性,把选中时间段的开始时间和结束时间整数化,已占用时间段的时间范围整数化,并且都add进Set对象中;然后通过判断Set对象的size长度和时间范围格子的数目的大小来区分是否冲突。

如果Set的size小于时间段格子数,则选中时间段和占用时间段冲突。否则就不冲突。

时间段数目也可以通过一个Array对象,把他们放到一个Array对象里面判断长度。代码如下:

let stime=8;
let etime=12;//选中时间段的时间范围
for(let i=0;i<this.meets.length;i++){
      let tmp=this.meets[i];
      let shour=tmp.starthour;
      let ehour=tmp.endhour;
      let set=new Set();
      let arr=new Array();
      for(let k=stime;k<=etime;k++){
           set.add(k);
           arr.push(k);
      }
      for(let k=shour+8;k<=ehour+8;k++){
            set.add(k);
            arr.push(k);
      }
      if(set.size<arr.length){
                flag=true;
      }
}
if(flag){
    //时间段有冲突
}

这样更容易理解。

而且现在主流浏览器都支持Set,即使不支持,我们现在都是自动化前端开发,无论是vue,angular,typeScript,或者react,都会用到pollyfill进行兼容实现,这些由开发环境编译实现,无需我们担心。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(142)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1