JavaScript跳出循環(huán)的常用方法詳解
前言
JavaScript 中常用的遍歷數(shù)組的方式有：for、for-of、forEach、map 等，當(dāng)我們循環(huán)數(shù)組時(shí)有些情況下會(huì)提前退出循環(huán)，終止迭代，比如： 已找到目標(biāo)元素，或者滿足某個(gè)條件，這樣能避免不必要的計(jì)算，優(yōu)化程序性能 。
1、常用退出循環(huán)方式
JavaScript 中提供了兩種退出循環(huán)的方法： break和continue；
break： 立即終止所有循環(huán)，執(zhí)行循環(huán)之后的代碼。continue：立即終止當(dāng)前循環(huán)，開(kāi)始下一次循環(huán)。
1-1 使用 break 跳出循環(huán)
示例：
for (let i = 0; i < 10; i++) {
if (i === 5) {
break; // 當(dāng) i 等于 5 時(shí)跳出循環(huán)
}
console.log(i); // 輸出 0, 1, 2, 3, 4
}
console.log('break跳出for循環(huán)');
1-2 使用 continue 跳出循環(huán)
示例：
for (let i = 0; i < 10; i++) {
if (i === 5) {
continue; // 當(dāng) i 等于 5 時(shí)跳過(guò)當(dāng)前循環(huán)，進(jìn)行下一次循環(huán)
}
console.log(i); // 輸出 0, 1, 2, 3, 4, 6, 7, 8, 9,沒(méi)5
}
2、forEach、Map 能否跳出循環(huán)
上面我們已經(jīng)介紹了 for 是可以跳出循環(huán)的，那么 forEach、Map 能否跳出循環(huán)?
首先我們使用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 不能再函數(shù)里面使用， forEach 、map 在循環(huán)時(shí)給每個(gè)元素套了一個(gè)函數(shù)。
我們?cè)谠囋?nbsp;return方法。
示例：
//方法一
const _array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
_array.forEach((item) => {
if (item === 5) {
return; // 當(dāng) i 等于 5 時(shí)跳過(guò)
}
console.log(item); // 0,1,2,3,4,6,7,8,9
});
//方法二，在函數(shù)里面使用return
function testReturn() {
const _array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
_array.forEach((item) => {
if (item === 5) {
return; // 當(dāng) i 等于 5 時(shí)跳過(guò)
}
console.log(item); // 0,1,2,3,4,6,7,8,9
});
}
testReturn();
return 語(yǔ)句用于終止函數(shù)執(zhí)行，也只能跳出當(dāng)前函數(shù)。我們?cè)诓椴?MDN，發(fā)現(xiàn)一個(gè)throw.
3 強(qiáng)大的 throw
throw 語(yǔ)句用于拋出用戶自定義的異常。當(dāng)前函數(shù)的執(zhí)行將停止（throw 之后的語(yǔ)句不會(huì)被執(zhí)行），并且控制權(quán)將傳遞給調(diào)用堆棧中第一個(gè)catch塊。
示例：
let result = 0;
try {
console.log(
'首先執(zhí)行 try 塊中的代碼，如果它拋出異常，則將執(zhí)行 catch 塊中的代碼。'
);
const _array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
_array.forEach((item) => {
if (item === 5) {
throw item; //**拋出錯(cuò)誤**
}
console.log(item); //0,1,2,3,4
});
} catch (e) {
console.log('catch里面給e：' + e); //catch里面給e：5
result = e;
} finally {
console.log('finally 塊中的代碼退出之前始終被執(zhí)行:' + result); //finally 塊中的代碼退出之前始終被執(zhí)行:5
}
console.log(result); //等到我們想要的值5
我們發(fā)現(xiàn) throw 可以跳出循環(huán)。
現(xiàn)在我們來(lái)做一個(gè)簡(jiǎn)單的總結(jié)：
1、可以使用 break 直接跳出循環(huán)；
2、可以使用 continue 跳過(guò)當(dāng)前循環(huán)，進(jìn)入下一次循環(huán)；
3、可以使用 return退出當(dāng)前函數(shù)執(zhí)行；
4、可以使用try-catch-throw強(qiáng)制退出循環(huán)。
4、怎么退出嵌套循環(huán)
工作中經(jīng)常碰到一些嵌套數(shù)據(jù)，當(dāng)我們找到想要的數(shù)據(jù)，為了節(jié)約時(shí)間，考慮怎么退出循環(huán)。
4-1 使用 break 跳出嵌套循環(huán)
示例：
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` 語(yǔ)句用于立即終止最內(nèi)層的循環(huán)，并繼續(xù)執(zhí)行下一條語(yǔ)句。
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 只能跳出最里面的循環(huán)，跳不出多層循環(huán)
4-2 使用 return 跳出嵌套循環(huán)
示例：
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 語(yǔ)句用于終止函數(shù)執(zhí)行，可以跳出多層循環(huán)
4-3 使用 try-catch-throw跳出嵌套循環(huán)
示例：
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也可以跳出多層循環(huán)
4-4 使用 標(biāo)簽語(yǔ)句outerLoop
示例：
outerLoop: for (let i = 0; i <= 5; i++) {
for (let j = 0; j <= 5; j++) {
if (j === 3) {
break outerLoop; // 跳出外層循環(huán)
}
console.log(`i: ${i}, j: ${j}`);
}
}
//i: 0, j: 0
//i: 0, j: 1
//i: 0, j: 2
在這個(gè)例子中，outerLoop是一個(gè)標(biāo)簽，它標(biāo)記了外層的for循環(huán)。當(dāng)內(nèi)層的if條件滿足時(shí)，break outerLoop;語(yǔ)句會(huì)跳出到outerLoop標(biāo)簽處，從而終止兩層循環(huán)的執(zhí)行。
現(xiàn)在我們來(lái)做一個(gè)簡(jiǎn)單的總結(jié)：
1、可以將嵌套循環(huán)丟在函數(shù)中，使用 return 直接跳出函數(shù),跳出循環(huán)；
2、可以使用 break配合 outerLoop 跳出循環(huán);
3、可以使用try-catch-throw強(qiáng)制退出循環(huán)。
5、數(shù)組中那些可以提前結(jié)束迭代的方法
- every：都滿足。那么只要返回 false 就回提前結(jié)束。
- some：至少有一個(gè)元素滿足。那么只要返回 true 就回提前結(jié)束。
- find、findIndex、includes 等：滿足條件提前結(jié)束；
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; //一個(gè)滿足返回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、最后總結(jié)
- 優(yōu)先使用數(shù)組已有的方式：
includes、every、some等; - 在考慮使用
break、continue跳出循環(huán)； return跳出函數(shù)也是一種選擇；- 至于異常
try-catch-throw可以在特殊情況下退出多層循環(huán)，不建議頻繁使用。 - 最后
outerLoop結(jié)合break慎用；
總結(jié)
到此這篇關(guān)于JavaScript跳出循環(huán)的常用方法的文章就介紹到這了,更多相關(guān)JS跳出循環(huán)方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript+Canvas實(shí)現(xiàn)文字粒子流特效
看到大師級(jí)的canvas文字粒子動(dòng)畫(huà)，要10個(gè)jq幣才能下載啊，我內(nèi)心的小鹿蠢蠢欲動(dòng)，我也要寫(xiě)一個(gè)。所以本文就來(lái)用Canvas實(shí)現(xiàn)簡(jiǎn)單的文字粒子流特效，希望對(duì)大家有所幫助2023-01-01
js實(shí)現(xiàn)鼠標(biāo)懸停圖片上時(shí)滾動(dòng)文字說(shuō)明的方法
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)懸停圖片上時(shí)滾動(dòng)文字說(shuō)明的方法,涉及js操作鼠標(biāo)事件的使用技巧,需要的朋友可以參考下2015-02-02
ThinkJS 是一款面向未來(lái)開(kāi)發(fā)的 Node.js 框架，整合了大量的項(xiàng)目最佳實(shí)踐，讓企業(yè)級(jí)開(kāi)發(fā)變得如此簡(jiǎn)單、高效。接下來(lái)通過(guò)本文給大家分享thinkjs 文件上傳功能，需要的朋友參考下吧2017-11-11
javascript和php使用ajax通信傳遞JSON的實(shí)例
今天小編就為大家分享一篇javascript和php使用ajax通信傳遞JSON的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
基于Arcgis for javascript實(shí)現(xiàn)百度地圖ABCD marker的效果
本篇文章由腳本之家小編給大家分享的基于Arcgis for javascript實(shí)現(xiàn)百度地圖ABCD marker的效果，需要的朋友一起學(xué)習(xí)吧2015-09-09
這篇文章主要介紹了JavaScript檢測(cè)上傳文件大小的方法,涉及javascript針對(duì)上傳文件的相關(guān)判定技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)五星好評(píng)案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Javascript es7中比較實(shí)用的兩個(gè)方法示例
這篇文章主要給大家分享了關(guān)于Javascript es7中比較實(shí)用的兩個(gè)方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-07-07
一文帶你掌握J(rèn)avaScript中的EventLoop機(jī)制
JavaScript是?單線程、非阻塞?的,它通過(guò)事件隊(duì)列?(Event?Loop)?的方式來(lái)實(shí)現(xiàn)異步回調(diào),所以本文小編就帶大家來(lái)深入了解一下JavaScript中的EventLoop機(jī)制,需要的可以了解下2024-02-02
多選列表框動(dòng)態(tài)添加,移動(dòng),刪除,全選等操作的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)多選列表框動(dòng)態(tài)添加,移動(dòng),刪除,全選等操作的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01