快捷導(dǎo)航

JavaScript中遍歷跳出循環(huán)方法總結(jié)

更新時間：2023年12月06日 15:06:29 作者：@德瑪玩前端

這篇文章主要給大家介紹了關(guān)于JavaScript中遍歷跳出循環(huán)方法的相關(guān)資料,一想到想到循環(huán)的跳出,立馬就會想到三個關(guān)鍵,break、return、continue,在業(yè)務(wù)中也會需要在遍歷的時候退出循環(huán),需要的朋友可以參考下

前言

javascript中的遍歷方法有很多，今天，主要總結(jié)一下這些遍歷方法如何跳出循環(huán)，歡迎各位大神和同行們指教和修正??
首先，必須要知道的是：

return必須是使用在函數(shù)里面的
return有2個作用，結(jié)束函數(shù)和返回結(jié)果

JS中的遍歷有如下方式可以跳出循環(huán)

1.for方法跳出循環(huán)

break 跳出當(dāng)前循環(huán)，循環(huán)后面的代碼仍然可以執(zhí)行
return 可以終止當(dāng)前函數(shù)，循環(huán)后面的代碼不可以執(zhí)行
continue 跳過當(dāng)次循環(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;    //跳過當(dāng)次循環(huán)
     console.log(arr[i])
     if (arr[i] === id) {    
         break;                   //滿足條件，跳出循環(huán);循環(huán)后面的代碼仍然可以執(zhí)行
     }
	 if (arr[i] === 6) {
	     return;                   //滿足條件，可以終止當(dāng)前函數(shù)
	 }
 }
}

2.forEach方法跳出循環(huán)

無法使用break，continue來跳出遍歷，因?yàn)閒oreach是異步執(zhí)行，可能在break之前代碼就已經(jīng)執(zhí)行完了
forEach()本身無法跳出循環(huán)，必須遍歷所有的數(shù)據(jù)才能結(jié)束
通過拋出異常的方式跳出循環(huán) 實(shí)現(xiàn)break效果

// 在forEach中，無法用break等函數(shù)在遍歷結(jié)束之前結(jié)束遍歷，如果要提前終止，必須把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跳過當(dāng)次循環(huán) 實(shí)現(xiàn)continue的效果

arr.forEach(function (curItem, i) {
     if(curItem === 1) return;
     console.log(curItem)
     if (curItem === id) {
         return;         //滿足條件，跳出當(dāng)次循環(huán)
		                 // break 語法報錯;
 			 
     }
 })

3. map() 跳出循環(huán)

map和forEach一樣無法通過break跳出循環(huán)。
map() 和 forEach()的區(qū)別

 // 前者不改變原數(shù)組的內(nèi)容
 // 后者改變原數(shù)組的內(nèi)容

4. for of 跳出循環(huán)

continue 跳出當(dāng)次循環(huán)

for (let i of arr) {
	if (i === 3) {
	  continue
	}
	console.log(i)
}

break 跳出當(dāng)前循環(huán)

for (let i of arr) {
	if (i === 3) {
	  break
	}
	console.log(i)
}

return 可以終止當(dāng)前函數(shù)，循環(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 跳出當(dāng)次循環(huán)

let j = 1
while (j < 6) {
  if (j === 3) {
	j++
	continue
  }
  console.log(j) // 1 2  4 5
  j++
}

break 跳出當(dāng)前循環(huán)

var i=0;
while (i < 6) {
  if (i === 3) {
	  i++
	break
  }
  console.log(i) // 0,1,2
  i++
}

return 可以終止當(dāng)前函數(shù)，循環(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來結(jié)束遍歷。
如果沒有寫return，會遍歷到最后一個值，默認(rèn)給true關(guān)閉

  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
        }
      })
    }