likes
comments
collection
share

前端开发小技巧 -【JavaScript】- break、continue、return、try-catch之间的区别?(如何终止数组的 forEach 循环)

作者站长头像
站长
· 阅读数 34

前言

  • 本编文章主要重点在比较 break、continue、return、try-catch 结束循环的区别和对应的使用场景;
    • 明白这几种终止循环方式的区别,也就知晓如何中终止 forEach 循环了;
  • 终止数组的 forEach 循环也会详细有记录的;
  • breakcontinue 只能用来结束循环语句,不能用来结束函数;

一、break

  • 退出整个循环(结束循环);
  • 一般用于结果已经得到,都需的循环不需要的时候;
  • 在一些计算机语言中 break 是保留字,起作用大多数情况下终止上一层循环;
  • 代码展示:
    const arr = [1, 2, 3, 4, 5];
    for(let i = 0; i < arr.length; i++) {
        if (arr[i] >= 3) {
            console.log(111);
            break;
        }
        console.log(arr[i]);
    }
    
  • 运行结果展示: 前端开发小技巧 -【JavaScript】- break、continue、return、try-catch之间的区别?(如何终止数组的 forEach 循环)

二、continue

  • 退出本次循环,继续下一次循环;
  • 一般能用于排除或者跳过某一个选项的时候;
  • continue在循环结构中用来跳过本次循环中剩余的代码,并且在条件求值为真的时候开始下一次循环;
  • 🔺 注意
    • 不能省略 continue 后面的分号,会导致胡乱;
  • 代码展示:
const arr = [1, 2, 3, 4, 5];
for(let i = 0; i < arr.length; i++) {
    if (arr[i] >= 3) {
        console.log(111);
        continue;
    }
    console.log(arr[i]);
}
  • 运行结果展示: 前端开发小技巧 -【JavaScript】- break、continue、return、try-catch之间的区别?(如何终止数组的 forEach 循环)

三、return

  • 用来结束函数,不能终止循环;
  • 注意
    • return 不能用来结束 数组的 forEach 方法;
    • 如果想要结束 forEach 可以使用 try-catch
  • 运行结果展示: 前端开发小技巧 -【JavaScript】- break、continue、return、try-catch之间的区别?(如何终止数组的 forEach 循环)

四、try-catch

  • 语法
    try {
        // 有可能出错的逻辑
    } catch(err) {
        // 出错之后的处理
    }
    
  • 注意
    • 如果 try 中的代码没有出错,则程序正常运行 try 中的内容后,不会执行 catch 中的内容;
    • 如果 try 中的代码一旦出错,程序立即跳入 catch 中去执行代码,那么 try 中出错代码后的所有代码就不再执行;

五、以上方式在 forEach 中的使用

✅ 使用 try-catch 结束 forEach 循环:

const arr = [1, 2, 3, 4, 5];
try {
    arr.forEach(item => {
        if (item >= 4) throw Error();
        console.log(item);
    });
} catch(err) {
    console.log('终止循环');
}
  • 运行结果展示: 前端开发小技巧 -【JavaScript】- break、continue、return、try-catch之间的区别?(如何终止数组的 forEach 循环)

forEach 中使用 return(不能结束循环)

  • forEach 中的 return 是:结束当前循环继续下一次循环;
  • 代码展示:
    const arr = [1, 2, 3, 4, 5];
    arr.forEach(item => {
        if (item >= 3) {
            console.log(111);
            return;
        }
        cosnole.log(item);
    })
    
    前端开发小技巧 -【JavaScript】- break、continue、return、try-catch之间的区别?(如何终止数组的 forEach 循环)

forEach 中使用 breakcontinue(不能用在函数中,会报错)

  • 注意
    • break continue 用来结束循环语句,但是不能用来结束函数;
    • forEach 中使用的时候,会报错;
  • 代码展示:
const arr = [1, 2, 3, 4, 5];
arr.forEach(item => {
    if (item >= 3) {
        console.log(111);
        // break;
        continue;
    }
    console.log(item);
})
  • 运行效果展示: 前端开发小技巧 -【JavaScript】- break、continue、return、try-catch之间的区别?(如何终止数组的 forEach 循环)