js中如何终止foreach循环？

有蝉

已于 2022-08-19 09:28:07 修改

阅读量4.4w

点赞数 19

CC 4.0 BY-SA版权

分类专栏： js 文章标签： forEach如何终止

于 2019-07-24 12:06:56 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37899792/article/details/97117010

js 专栏收录该内容

77 篇文章

订阅专栏

本文详细介绍了JavaScript中forEach及for...of循环的特点与使用方法。探讨了forEach的局限性，如无法使用break或continue，并且没有返回值。通过示例展示了如何利用异常处理来提前终止forEach循环。此外，还对比了for...of循环的优点，包括其支持的数据结构及return语句的使用。

forEach专门用来循环数组，可以直接取到元素，同时也可以取到index值

存在局限性，不能continue跳过或者break终止循环，没有返回值，不能return

终止foreach循环：运用抛出异常（try catch）可以终止foreach循环

for of是ES6新引入的特性。修复了ES5中for in的不足

允许遍历 Arrays（数组）、Strings（字符串）、Maps（映射）、Sets（集合）等可迭代的数据结构

for of 支持return

最下方有个在项目中的实例

错误用法1：使用break(会报错)

var array = ["第一","第二","第三","第四"];
        
// 直接就报错了
array.forEach(function(item,index){
    if (item == "第三") {
        break;
    }
    alert(item);
});

报错如下

错误用法2：使用return fasle （只是终止本次循环）

相当于for 循环中的continue

var array = ["第一","第二","第三","第四"];
        
// 会遍历数组所有元素，只是执行跳过"第三"，return false下面的代码不再执行而已
array.forEach(function(item,index){
    if (item == "第三") {
        return false;
    }
    console.log(item);// "第一" "第二" "第四"
});
console.log("以下代码")// 以下代码

正确用法：运用抛出异常（try catch）

try {
    var array = ["第一","第二","第三","第四"];
    
    // 执行到第3次，结束循环
    array.forEach(function(item,index){
        if (item == "第三") {
            throw new Error("第三");
        }
        console.log(item);// 第一 第二
    });
} catch(e) {
    if(e.message!="第三") throw e;
};
// 下面的代码不影响继续执行
console.log("下方代码");//下方代码

实例如下

      try {
        this.txt.forEach((item, index) => {
          if (!item.name) {
            throw new Error('单课不能为空！')
          }
          if (!item.val) {
            throw new Error('上课老师不能为空！')
          }
          if (!item.date) {
            throw new Error('上架时间不能为空！')
          }
        })
      } catch (e) {
        this.$message.warning(e.message)
        return
      };