js的forEach循环终止问题

今天使用vue开发一个小功能，用到了v-if,代码如下：

 <el-tab-pane v-if="tabIsShow('roomData')" label="直播间基础信息" name="roomData">
  </el-tab-pane>

 tabIsShow (tabName) {
                let flag = false;
                if(!this.vipContent || this.vipContent.length === 0) {
                    return flag;
                }
                for(let i=0; i< this.vipContent.length ; i++){
                    if(this.vipContent[i] ===  tabName) {
                        flag = true;
                        break;
                    }
                }
                return flag;
  },

这是修改之后的代码，之前tabIsShow中的for循环，我使用的是forEach，代码如下：

tabIsShow (tabName) {
                if(!this.vipContent || this.vipContent.length === 0) {
                    return false;
                }
                this.vipContent.forEach(item=> {
                    if(item === tabName) {
                        return true;
                    }
                })
                return true;
  },

打断点，调试了若干次，显示结果就是不对，程序明明已经执行到 return true了，但是显示结果就是不对，后来，百度之后才明白，原来使用return无法终止forEach。

一、终止forEach尝试

1.使用return,只能终止当次循环，效果类似于for循环的continue

运行如下代码：

let arr = [1,2,3,4,5];
arr.forEach(item=>{
    if(item === 3) {
        console.log("进入if,满足条件");                 // 第一个console
        return;
        console.log("1.我怎么还能执行呢？");     // 第二个console
    }
 console.log("item=" + item);                           // 第三个console
});

运行结果为：

运行结果

从中，我们可以看出，使用return只能跳出当次循环，类似于for循环中的continue,程序并不会终止。

2.在forEach中使用break或者continue是违法的

尝试使用break与continue报错

二、终止forEach终止正确方法

其实，我认为如何终止forEach循环其实并不重要，因为如果你需要在循环中终止循环，完全可以试用for循环来代替。真正重要的是你要知道，直接return,你是无法直接退出forEach的。
但是做事情要有始有终，在这里，我就简单的说一下如何终止forEach。

1.用过抛出异常的方式终止forEach

try{
    var arr = [1,2,3,4,5];
    arr.forEach(item=>{
        if(item === 3) {
            throw new Error("EndIterative");
        }
        console.log("item=" + item);
    });
} catch(e) {
    if(e.message != "EndIterative") {
      throw e;
    }
}

运行结果如下：

异常抛出终止forEach