循环中请谨慎使用逻辑判断：在for循环中立个flag！并在if...else...语句中小心处理或且非

这两天，在项目中遇到一个实际问题，因为自己的逻辑判断没处理好，花费了我2天的时间处理这个 bug ，因此，在这里记录下，以免以后在犯这样的傻问题：

问题描述：

业务场景：

在一个for循环的表格中，每一行都有一个 select 的下拉框，而这些下拉框 options 的数据，是异步从后端获取的同一份数据，且这份数据有且只有一份（这是重点，即共用一份 options 数据），业务要求是：1.每行都是单选，但这行选择过后，在下行就要把这个被选项禁用掉，同时，每一行也支持复选，即比如：当前行之前已经选择过了，但发现选错了，然后重新选，那么重新被选中的要在下一行被禁用掉，而之前被选中的，则在下一行中仍能正常被选择。2.表格中所有的已被选择项要放在一另一个新数组中，从而能被后面的业务功能使用（调用）。

（没图说个jb）来上图：

其他地方功能的调用：

好了，业务需求介绍完了，剩下的就是敲代码了...

（邱泽马爹...不是应该先想想业务逻辑怎么实现吗？）

（纳尼，这个还用说？）

（唉，好吧，那我说说我的思路吧）

（1.因为有for循环，所以，只要能拿到每一行的下标，那我们就可以根据下标来判断用户点选的是哪一行的 select 框）

（2.因为所有的 select 都共用同一份 options 数据，因此我们可以根据每个 option 对象的 id 来判断用户在当前 select 中选中的是哪一项）

有了以上2点思路，剩下的就是逻辑判断了，废话了半天，来看代码：

我先把之前错误的写法贴出来，下面是正确的，大家自己感受和体会吧：

 

//pushObjIntoPostarr(obj)  选中的push到新数组

//错误的写法
pushObjIntoPostarr(obj){
    if( this.newPostArr.length > 0 ){
        this.newPostArr.forEach((item,index)=>{
            //下标相同，id不同--替换
            if(item.rowIndex == obj.rowIndex && item.cwpId != obj.cwpId){
                this.newPostArr.splice(index,1)//删除原有
                this.newPostArr.push(obj)//添入新值
                this.changeStateByPostArrItemFn(item)
                return
            }else if(item.rowIndex == obj.rowIndex && item.cwpId == obj.cwpId){
            //下标相同，id也相同--重复
                this.newPostArr.filter((item)=>{return item.rowIndex != obj.rowIndex && item.cwpId != obj.cwpId})//去重
                return
            }else if(item.rowIndex != obj.rowIndex && item.cwpId != obj.cwpId){
            //下标不同，id也不同--新增
                this.newPostArr.push(obj);                  
                this.prohibitThisObjFn(obj);
                return
            }else{
            //下标不同，id相同--重复
                return
            }                                
        })
    }else{
        this.newPostArr.push(obj)
    }
},

// for 循环中立个flag , 在 if...else... 中小心使用 || && !
pushObjIntoPostarr(obj){
    let isPush = false;
    if( this.newPostArr.length > 0 ){
        this.newPostArr.forEach((item,index)=>{
            if(item.rowIndex == obj.rowIndex){
                //下标相同，id不同--替换
                if(item.cwpId != obj.cwpId){
                    this.newPostArr.splice(index,1)//删除原有
                    isPush = true;
                    this.changeStateByPostArrItemFn(item)
                    return
                }else{
                //下标相同，id也相同--重复
                    isPush = false;
                    return
                }
            }else{
                //下标不同，id也不同--新增
                if(item.cwpId != obj.cwpId){
                    isPush = true;           
                    this.prohibitThisObjFn(obj);
                    return
                }else{
                //下标不同，id相同--重复
                    isPush = false;
                    return
                }
            }                                     
        })
    }else{
        isPush = true;
    }
    this.newPostArr.push(obj)//添入新值
},

看懂了吧，看懂了就收藏吧，方便你没记住的时候查看。

没看懂的，记住下面这句话：

 for 循环中立个flag , 在 if...else... 中小心使用 || && !

 for 循环中立个flag , 在 if...else... 中小心使用 || && !

 for 循环中立个flag , 在 if...else... 中小心使用 || && !

重要的事情说三遍！