JavaScript跳出循环的常用方法详解
作者：simahe
前言
JavaScript 中常用的遍历数组的方式有：for、for-of、forEach、map 等，当我们循环数组时有些情况下会提前退出循环，终止迭代，比如： 已找到目标元素，或者满足某个条件，这样能避免不必要的计算，优化程序性能 。
1、常用退出循环方式
JavaScript 中提供了两种退出循环的方法： break和continue；
break： 立即终止所有循环，执行循环之后的代码。continue：立即终止当前循环，开始下一次循环。
1-1 使用 break 跳出循环
示例：
for (let i = 0; i < 10; i++) {
if (i === 5) {
break; // 当 i 等于 5 时跳出循环
}
console.log(i); // 输出 0, 1, 2, 3, 4
}
console.log('break跳出for循环');
1-2 使用 continue 跳出循环
示例：
for (let i = 0; i < 10; i++) {
if (i === 5) {
continue; // 当 i 等于 5 时跳过当前循环，进行下一次循环
}
console.log(i); // 输出 0, 1, 2, 3, 4, 6, 7, 8, 9,没5
}
2、forEach、Map 能否跳出循环
上面我们已经介绍了 for 是可以跳出循环的，那么 forEach、Map 能否跳出循环?
首先我们使用break、continue;
示例：
const _array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
_array.forEach((item) => {
if (item === 5) {
//break;//Jump target cannot cross function boundary
//continue;//Jump target cannot cross function boundaryS
}
console.log(item);
});
可以看到 break、continue 不能再函数里面使用， forEach 、map 在循环时给每个元素套了一个函数。
我们在试试 return方法。
示例：
//方法一
const _array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
_array.forEach((item) => {
if (item === 5) {
return; // 当 i 等于 5 时跳过
}
console.log(item); // 0,1,2,3,4,6,7,8,9
});
//方法二，在函数里面使用return
function testReturn() {
const _array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
_array.forEach((item) => {
if (item === 5) {
return; // 当 i 等于 5 时跳过
}
console.log(item); // 0,1,2,3,4,6,7,8,9
});
}
testReturn();
return 语句用于终止函数执行，也只能跳出当前函数。我们在查查 MDN，发现一个throw.
3 强大的 throw
throw 语句用于抛出用户自定义的异常。当前函数的执行将停止（throw 之后的语句不会被执行），并且控制权将传递给调用堆栈中第一个catch块。
示例：
let result = 0;
try {
console.log(
'首先执行 try 块中的代码，如果它抛出异常，则将执行 catch 块中的代码。'
);
const _array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
_array.forEach((item) => {
if (item === 5) {
throw item; //**抛出错误**
}
console.log(item); //0,1,2,3,4
});
} catch (e) {
console.log('catch里面给e：' + e); //catch里面给e：5
result = e;
} finally {
console.log('finally 块中的代码退出之前始终被执行:' + result); //finally 块中的代码退出之前始终被执行:5
}
console.log(result); //等到我们想要的值5
我们发现 throw 可以跳出循环。
现在我们来做一个简单的总结：
1、可以使用 break 直接跳出循环；
2、可以使用 continue 跳过当前循环，进入下一次循环；
3、可以使用 return退出当前函数执行；
4、可以使用try-catch-throw强制退出循环。
4、怎么退出嵌套循环
工作中经常碰到一些嵌套数据，当我们找到想要的数据，为了节约时间，考虑怎么退出循环。
4-1 使用 break 跳出嵌套循环
示例：
for (let i = 0; i <= 5; i++) {
for (let j = 0; j <= 5; j++) {
if (j === 3) {
break;
//continue;
}
console.log(`i: ${i}, j: ${j}`);
}
//`break` 语句用于立即终止最内层的循环，并继续执行下一条语句。
console.log('跳出break，指向这里');
}
//i: 0, j: 0
// i: 0, j: 1
// i: 0, j: 2
// 跳出break，指向这里
// i: 1, j: 0
// i: 1, j: 1
// i: 1, j: 2
// 跳出break，指向这里
break 只能跳出最里面的循环，跳不出多层循环
4-2 使用 return 跳出嵌套循环
示例：
function testReturn() {
for (let i = 0; i <= 5; i++) {
for (let j = 0; j <= 5; j++) {
if (j === 3) {
return { i, j };
}
console.log(`i: ${i}, j: ${j}`);
}
}
}
console.log(testReturn());
//i: 0, j: 0
// i: 0, j: 1
// i: 0, j: 2
// {i: 0,j: 3}
return 语句用于终止函数执行，可以跳出多层循环
4-3 使用 try-catch-throw跳出嵌套循环
示例：
let result = 0;
try {
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 5; j++) {
if (j === 3) {
throw j;
}
console.log(`i: ${i}, j: ${j}`);
}
}
} catch (e) {
console.log('catch里面给e：' + e); //catch里面给e：3
result = e;
}
console.log(result); //3
//i: 0, j: 0
//i: 0, j: 1
//i: 0, j: 2
//catch里面给e：3
//3
try-catch-throw也可以跳出多层循环
4-4 使用 标签语句outerLoop
示例：
outerLoop: for (let i = 0; i <= 5; i++) {
for (let j = 0; j <= 5; j++) {
if (j === 3) {
break outerLoop; // 跳出外层循环
}
console.log(`i: ${i}, j: ${j}`);
}
}
//i: 0, j: 0
//i: 0, j: 1
//i: 0, j: 2
在这个例子中，outerLoop是一个标签，它标记了外层的for循环。当内层的if条件满足时，break outerLoop;语句会跳出到outerLoop标签处，从而终止两层循环的执行。
现在我们来做一个简单的总结：
1、可以将嵌套循环丢在函数中，使用 return 直接跳出函数,跳出循环；
2、可以使用 break配合 outerLoop 跳出循环;
3、可以使用try-catch-throw强制退出循环。
5、数组中那些可以提前结束迭代的方法
- every：都满足。那么只要返回 false 就回提前结束。
- some：至少有一个元素满足。那么只要返回 true 就回提前结束。
- find、findIndex、includes 等：满足条件提前结束；
const _array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log('every');
_array.every((item) => {
if (item == 2) {
return false; //不满足条件返回false
}
console.log(item); //1
});
console.log('some');
_array.some((item) => {
if (item == 2) {
return true; //一个满足返回true
}
console.log(item); //1
});
console.log('find');
const found = _array.find((item) => item === 2);
console.log(found); //2
console.log('findIndex');
const findIndex = _array.findIndex((item) => item === 2);
console.log(findIndex); //1
6、最后总结
- 优先使用数组已有的方式：
includes、every、some等; - 在考虑使用
break、continue跳出循环； return跳出函数也是一种选择；- 至于异常
try-catch-throw可以在特殊情况下退出多层循环，不建议频繁使用。 - 最后
outerLoop结合break慎用；
总结
到此这篇关于JavaScript跳出循环的常用方法的文章就介绍到这了,更多相关JS跳出循环方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！