forEach循環(huán)里break使用方式詳解
一. 在forEach里使用break 會(huì)發(fā)生什么
大家都知道 js 的 forEach里是不能使用break。但是為什么不能在forEach里使用呢?在forEach里使用break 會(huì)發(fā)生什么呢?
紙上得來終覺淺,絕知此事要躬行。要想知道發(fā)生什么,不妨在代碼里驗(yàn)證一下。
let arr = [1, 2, 3, 4, 5]; arr.forEach((item, index) => { if (item > 2) { break } console.log(item) }) // SyntaxError: Illegal break statement (非法中斷語句)
在控制臺(tái)可以看到輸出:語法錯(cuò)誤。
二. 為什么不能在forEach里使用break
要想知道forEach里為什么不能使用break,必須先要搞清楚break的語法。
你真的了解break嗎
break 表示中止當(dāng)前循環(huán)。
語法:break [label];
label:與語句標(biāo)簽相關(guān)聯(lián)的標(biāo)識(shí)符。如果 break 語句不在一個(gè)循環(huán)或者Switch語句中,則該項(xiàng)是必須的。
我們看一個(gè)例子:
我們平時(shí)正常使用時(shí)
let arr = [1, 2, 3, 4, 5] for (let i = 0; i < arr.length; i++) { if (arr[i] > 2) { break // 大于2 跳出整個(gè)循環(huán) } console.log(arr[i]) // 1, 2 }
break 與語句標(biāo)簽一起使用時(shí)
let arr = [1, 2, 3, 4, 5] outer_block: // 標(biāo)識(shí)最外層循環(huán) for (let i = 0; i < arr.length; i++) { console.log('i', arr[i]) // 1 inner_block: // 標(biāo)識(shí)里面的for循環(huán) for (let j = 0; j < arr.length; j++) { if (j > 3) { break outer_block // 跳出最外層循環(huán) } console.log('j', arr[j]) // 1, 2, 3, 4 } }
輸出結(jié)果:最外層輸出:1,最次層輸出:1,2,3,4。可以看出brake終止循環(huán)是有條件的。我們?cè)诨貋砜磃orEach這個(gè)問題。
先看下forEach語法:
forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
是上面的定義相當(dāng)于:
Array.prototype.forEach = function(callback) { for (let i = 0; i < this.length; i++) { callback(this[i], i, this); } };
可以看出:我們?cè)趂orEach里使用break,其實(shí)是在callback里使用break。再明白一點(diǎn),其實(shí)就是相當(dāng)于你在for循環(huán)里這樣寫:
let arr = [1, 2, 3, 4, 5] outer_block: for (let i = 0; i < arr.length; i++) { console.log('i', arr[i]) inner_block1: (function() { inner_block2: break // 報(bào)錯(cuò),不能直接使用break })() }
到這里我想你已經(jīng)明白了為什么不能在forEach里使用break了。回到本文的題目上來。
三.如何在forEach的循環(huán)里break?
查閱MDN,上面有一個(gè)備注:
編輯切換為居中
MDN
在forEach里合法的使用break
function breakInForEach(arr) { let BreakException = {}; let res = false; try { arr.forEach(item => { if (item === 2) { res = true; throw BreakException; } }) } catch(e) { if (e !== BreakException) throw e } return res; } console.log(foreachBreak([1, 2, 3, 4, 5, 6])); // true
也可以使用every 或者 some等
最推薦的方式呢,就是這種需要break的場(chǎng)景下,直接使用every或者some。
- every: 碰到return false的時(shí)候,循環(huán)中止,return true 循環(huán)繼續(xù);
- some: 碰到return ture的時(shí)候,循環(huán)中止,return false 循環(huán)繼續(xù);
總結(jié)
本文介紹了為什么不能在forEach里使用break;在forEach里使用break 會(huì)發(fā)生什么以及怎樣在forEach里使用break,更多關(guān)于forEach循環(huán)break使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
微信小程序上滑加載下拉刷新(onscrollLower)分批加載數(shù)據(jù)(二)
這篇文章主要介紹了微信小程序上滑加載下拉刷新(onscrollLower)分批加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2017-05-05arco?design按需導(dǎo)入報(bào)錯(cuò)排查思路與解決方案解析
這篇文章主要為大家介紹了arco?design?按需導(dǎo)入報(bào)錯(cuò)排查思路與解決方案解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03JS開發(fā)Blob和FileReader構(gòu)造函數(shù)使用示例詳解
這篇文章主要為大家介紹了JS開發(fā)Blob和FileReader構(gòu)造函數(shù)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08JS實(shí)現(xiàn)頁面炫酷的時(shí)鐘特效示例
這篇文章主要為大家介紹了JS實(shí)現(xiàn)頁面炫酷的時(shí)鐘特效示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08JS網(wǎng)頁repaint與reflow?的區(qū)別及優(yōu)化方式
這篇文章主要為大家介紹了JS網(wǎng)頁repaint與reflow?的區(qū)別及優(yōu)化方式,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09MutationObserver在頁面水印實(shí)現(xiàn)起到的作用詳解
這篇文章主要為大家介紹了MutationObserver在實(shí)現(xiàn)頁面水印所起到的作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07