快捷導(dǎo)航

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

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

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

前言

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

return必須是使用在函數(shù)里面的
return有2個(gè)作用，結(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 跳過(guò)當(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;    //跳過(guò)當(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)

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

// 在forEach中，無(wú)法用break等函數(shù)在遍歷結(jié)束之前結(jié)束遍歷，如果要提前終止，必須把forEach（）方法放在一個(gè)try塊中，并能拋出一個(gè)異常。 
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) {
 }

通過(guò)return跳過(guò)當(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 語(yǔ)法報(bào)錯(cuò);
 			 
     }
 })

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

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

 // 前者不改變?cè)瓟?shù)組的內(nèi)容
 // 后者改變?cè)瓟?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可以通過(guò)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 可以通過(guò)控制return true來(lái)結(jié)束遍歷。
如果沒(méi)有寫(xiě)return，會(huì)遍歷到最后一個(gè)值，默認(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
        }
      })
    }