js中Array.forEach跳出循環(huán)的方法實(shí)例

更新時(shí)間：2021年09月01日 10:02:07 作者：陌生的L君

相信大家都知道forEach適用于只是進(jìn)行集合或數(shù)組遍歷,for則在較復(fù)雜的循環(huán)中效率更高,下面這篇文章主要給大家介紹了關(guān)于js中Array.forEach跳出循環(huán)的相關(guān)資料,需要的朋友可以參考下

forEach()方法

語(yǔ)法：array.forEach(callback(currentvalue,index,arr) ,thisValue)

其中

callback為數(shù)組中每個(gè)元素執(zhí)行的函數(shù)，該函數(shù)可接受1-3個(gè)參數(shù)：

currentvalue參數(shù)表示數(shù)組的當(dāng)前元素項(xiàng)，必須的參數(shù)
index參數(shù)表示的當(dāng)前元素下標(biāo)，可選參數(shù)
arr參數(shù)表示當(dāng)前元素所屬的數(shù)組，可選參數(shù)

thisValue表示執(zhí)行回調(diào)函數(shù)callback()時(shí)的this指向。可選參數(shù)。當(dāng)不寫時(shí)，則默認(rèn)是指向window全局

示例

    var arr = [1, 3, 5, 13, 2];
    var res = arr.forEach(function(item,index) {
        console.log(`數(shù)組第${index+1}個(gè)元素是${item}`);
    })
    console.log(res);//forEach的返回值為undefined,

運(yùn)行結(jié)果：

js中 Array.forEach如何跳出循環(huán)

forEach是不能通過(guò)break或者return跳出循環(huán)的，一般跳出循環(huán)的方式為拋出異常：

 try {
   let array = [1, 2, 3, 4]
   array.forEach((item, index) => {
     if (item === 3) {
       throw new Error('end')//報(bào)錯(cuò)，就跳出循環(huán)
     } else {
       console.log(item)
     }
   })
 } catch (e) {
 }

這種寫法反而很麻煩。

解決方式：

1.使用every替代：

let array = [1, 2, 3, 4]
array.every((item, index) => {
  if (item === 3) {
    return true
  } else {
    console.log(item)
  }
})

2.自己寫一個(gè)😁

//可跳出循環(huán)的數(shù)組遍歷
Array.prototype.loop = function(cbk) {
  //判斷當(dāng)前數(shù)組是否為空
  if (this?.length) {
    for (let i = 0; i < this.length; i++) {
      let stop = cbk(this[i], i, this)
      //判斷是否停止循環(huán)
      if (stop) {
        break
      }
    }
  }
}


let array = [1, 2, 3, 4]
array.loop ((item, index) => {
  if (item === 3) {
    return true
  } else {
    console.log(item)
  }
})

總結(jié)

到此這篇關(guān)于js中Array.forEach跳出循環(huán)的文章就介紹到這了,更多相關(guān)js中Array.forEach跳出循環(huán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Ionic如何實(shí)現(xiàn)下拉刷新與上拉加載功能
在日常項(xiàng)目開發(fā)中我們經(jīng)常見到下拉刷新上拉加載的功能，接下來(lái)通過(guò)本文給大家介紹ionic如何實(shí)現(xiàn)下拉刷新與上拉加載的相關(guān)資料,需要的朋友可以參考下
2016-06-06
js實(shí)現(xiàn)StringBuffer的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)StringBuffer的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09
js實(shí)現(xiàn)彈框效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-03-03
javascript初學(xué)者常用技巧
這篇文章主要介紹了javascript初學(xué)者常用技巧,包括javascript的存放位置、格式及焦點(diǎn)事件等,需要的朋友可以參考下
2014-09-09
JavaScript具有類似Lambda表達(dá)式編程能力的代碼(改進(jìn)版)
在之前的一篇博文中我介紹了一種方法可以讓JavaScript具有一種近似于Lambda表達(dá)式的編程能力——但是它有一些缺點(diǎn)，其中妨礙它的使用的最主要的一條就是多了一層括號(hào)，讓代碼變得難以閱讀。
2010-09-09
javascript+iframe 實(shí)現(xiàn)無(wú)刷新載入整頁(yè)的代碼
用iframe也可以實(shí)現(xiàn),但沒(méi)有上述做法完美,參見discuz那些網(wǎng)站,如登陸彈出一個(gè)層,也是載入的一個(gè)頁(yè)面,但我發(fā)現(xiàn)狀態(tài)欄左邊出現(xiàn)的是正在打開about:blank
2010-03-03
如何基于viewport vm適配移動(dòng)端頁(yè)面
這篇文章主要介紹了如何基于viewport vm適配移動(dòng)端頁(yè)面,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-11-11
JavaScript canvas實(shí)現(xiàn)動(dòng)態(tài)點(diǎn)線效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)動(dòng)態(tài)點(diǎn)線效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
Ant Design Blazor 組件庫(kù)的路由復(fù)用多標(biāo)簽頁(yè)功能
在 Ant Design Blazor 組件庫(kù)中實(shí)現(xiàn)多標(biāo)簽頁(yè)組件的呼聲日益高漲。于是，我利用周末時(shí)間，結(jié)合 Blazor 內(nèi)置路由組件實(shí)現(xiàn)了基于 Tabs 組件的 ReuseTabs 組件，需要的朋友跟隨小編一起看看吧
2021-07-07
javascript最基本的函數(shù)匯總
這篇文章主要給大家匯總介紹了javascript最基本的7個(gè)函數(shù)，十分的實(shí)用，有需要的小伙伴可以參考下。
2015-06-06