前端开发小技巧 -【JavaScript】- break、continue、return、try-catch之间的区别?(如何终止数组的 forEach 循环)
站长
· 阅读数 34
前言
- 本编文章主要重点在比较
break、continue、return、try-catch
结束循环的区别和对应的使用场景;- 明白这几种终止循环方式的区别,也就知晓如何中终止
forEach
循环了;
- 明白这几种终止循环方式的区别,也就知晓如何中终止
- 终止数组的
forEach
循环也会详细有记录的; - ⚠
break
和continue
只能用来结束循环语句,不能用来结束函数;
一、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]); }
- 运行结果展示:
二、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]);
}
- 运行结果展示:
三、return
- 用来结束函数,不能终止循环;
- 注意:
return
不能用来结束 数组的forEach
方法;- 如果想要结束
forEach
可以使用try-catch
;
- 运行结果展示:
四、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('终止循环');
}
- 运行结果展示:
❌ forEach
中使用 return
(不能结束循环)
forEach
中的return
是:结束当前循环继续下一次循环;- 代码展示:
const arr = [1, 2, 3, 4, 5]; arr.forEach(item => { if (item >= 3) { console.log(111); return; } cosnole.log(item); })
❌forEach
中使用 break
和 continue
(不能用在函数中,会报错)
- 注意:
break
continue
用来结束循环语句,但是不能用来结束函数;- 在
forEach
中使用的时候,会报错;
- 代码展示:
const arr = [1, 2, 3, 4, 5];
arr.forEach(item => {
if (item >= 3) {
console.log(111);
// break;
continue;
}
console.log(item);
})
- 运行效果展示: