JavaScript中遍歷跳出循環(huán)方法總結
更新時間：2023年12月06日 15:06:29 作者：@德瑪玩前端
這篇文章主要給大家介紹了關于JavaScript中遍歷跳出循環(huán)方法的相關資料,一想到想到循環(huán)的跳出,立馬就會想到三個關鍵,break、return、continue,在業(yè)務中也會需要在遍歷的時候退出循環(huán),需要的朋友可以參考下
前言
javascript中的遍歷方法有很多，今天，主要總結一下這些遍歷方法如何跳出循環(huán)，歡迎各位大神和同行們指教和修正??
首先，必須要知道的是：
- return必須是使用在函數里面的
- return有2個作用，結束函數和返回結果
JS中的遍歷有如下方式可以跳出循環(huán)
1.for方法 跳出循環(huán)
- break 跳出當前循環(huán)，循環(huán)后面的代碼仍然可以執(zhí)行
- return 可以終止當前函數，循環(huán)后面的代碼不可以執(zhí)行
- continue 跳過當次循環(huán)，仍然執(zhí)行后續(xù)的循環(huán)
function a(){
var arr = [1,3,5,7,9];
var id = 5;
for (var i = 0; i < arr.length; i++) {
if(arr[i]=== 1) continue; //跳過當次循環(huán)
console.log(arr[i])
if (arr[i] === id) {
break; //滿足條件，跳出循環(huán);循環(huán)后面的代碼仍然可以執(zhí)行
}
if (arr[i] === 6) {
return; //滿足條件，可以終止當前函數
}
}
}
2.forEach方法跳出循環(huán)
- 無法使用break，continue來跳出遍歷， 因為foreach是異步執(zhí)行，可能在break之前代碼就已經執(zhí)行完了
- forEach()本身無法跳出循環(huán)，必須遍歷所有的數據才能結束
- 通過拋出異常的方式跳出循環(huán) 實現(xiàn)break效果
// 在forEach中，無法用break等函數在遍歷結束之前結束遍歷，如果要提前終止，必須把forEach（）方法放在一個try塊中，并能拋出一個異常。
var arr = [1,3,5,7,9];
var id = 5;
try {
arr.forEach(function (curItem, i) {
if(curItem === 1) return;
console.log(curItem)
if (curItem === id) {
throw Error(); //滿足條件，跳出循環(huán)
}
})
} catch (e) {
}
- 通過return跳過當次循環(huán) 實現(xiàn)continue的效果
arr.forEach(function (curItem, i) {
if(curItem === 1) return;
console.log(curItem)
if (curItem === id) {
return; //滿足條件，跳出當次循環(huán)
// break 語法報錯;
}
})
3. map() 跳出循環(huán)
- map和forEach一樣無法通過break跳出循環(huán)。
- map() 和 forEach()的區(qū)別
// 前者不改變原數組的內容 // 后者改變原數組的內容
4. for of 跳出循環(huán)
- continue 跳出當次循環(huán)
for (let i of arr) {
if (i === 3) {
continue
}
console.log(i)
}
- break 跳出當前循環(huán)
for (let i of arr) {
if (i === 3) {
break
}
console.log(i)
}
- return 可以終止當前函數，循環(huán)后面的代碼不可以執(zhí)行
var a=[1,2,3,4];
function b(){
for(var key of a){
if(key=2){
return false
};
console.log('哈哈哈')}
};
console.log(b()) //false
5. while do while 跳出循環(huán)
- continue 跳出當次循環(huán)
let j = 1
while (j < 6) {
if (j === 3) {
j++
continue
}
console.log(j) // 1 2 4 5
j++
}
- break 跳出當前循環(huán)
var i=0;
while (i < 6) {
if (i === 3) {
i++
break
}
console.log(i) // 0,1,2
i++
}
- return 可以終止當前函數，循環(huán)后面的代碼不可以執(zhí)行
var i=0;
while (i < 6) {
if (i === 3) {
return
}
console.log(i)
i++
}
every 遍歷
- every可以通過return的返回bool值，控制是否繼續(xù)遍歷。
let arr = [1, 2, 3, 4, 5]
arr.every(i => {
console.log(i)
return true //1,2,3,4,5
})
arr.every(i => {
console.log(i)
if (i === 3) {
return false //1,2,3
} else {
return true
}
})some 遍歷
- some 可以通過控制return true來結束遍歷。
- 如果沒有寫return，會遍歷到最后一個值，默認給true關閉
let arr = [1, 2, 3, 4, 5]
arr.some(i => {
console.log(i) // 1，2，3，4，5
})
arr.some(i => {
console.log(i)
if (i === 3) {
return true //1,2,3
}
})
}總結
到此這篇關于JavaScript中遍歷跳出循環(huán)方法總結的文章就介紹到這了,更多相關JS遍歷跳出循環(huán)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
javascript數組includes、reduce的基本使用
這篇文章主要給大家介紹了關于javascript數組includes、reduce的基本使用方法,includes方法是用于檢查特定元素是包含在數組還是字符串中的方法,而reduce用法則有很多,需要的朋友可以參考下2021-07-07
本篇文章主要介紹了Javascript中字符串相關常用的使用方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
一個標簽僅僅是要觸發(fā)onclick行為，遇到了A標簽觸發(fā)onclick事件時不執(zhí)行跳轉，下面與大家分享下四種解決方法，感興趣的朋友可以參考下哈2013-06-06
JavaScript isArray()函數判斷對象類型的種種方法
我們知道，JavaScript中檢測對象類型的運算符有：typeof、instanceof，還有對象的constructor屬性2010-10-10
可以自定義廣告的圖片、鏈接、長、寬等。光標移到圖片上會出現(xiàn)左右箭頭，有需要的朋友可以參考一下2013-10-10
JavaScript的數據類型是非常弱的（不然不會叫它做弱類型語言了）！在使用算術運算符時，運算符兩邊的數據類型可以是任意的，比如，一個字符串可以和數字相加2016-03-03
基于微信小程序實現(xiàn)人臉數量檢測的開發(fā)步驟
最近項目需求是統(tǒng)計當前攝像頭中的人臉個數,所以下面這篇文章主要給大家介紹了關于基于微信小程序實現(xiàn)人臉數量檢測的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-12-12
項目實踐一圖片上傳之form表單還是base64前端圖片壓縮(前端圖片壓縮)
這篇文章主要介紹了項目實踐一圖片上傳之form表單還是base64前端圖片壓縮(前端圖片壓縮)的相關資料,需要的朋友可以參考下2016-07-07
在 JavaScript 中監(jiān)聽用戶的鍵盤輸入是很容易的事情，但用戶一旦使用了輸入法，問題就變得復雜了。2011-05-05
這篇文章主要介紹了JS字符串的切分的方法,結合實例形式分析了JavaScript使用split針對字符串進行切分與遍歷的相關技巧,需要的朋友可以參考下2016-02-02