快捷導(dǎo)航

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指向?？蛇x參數(shù)。當(dāng)不寫(xiě)時(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) {
 }

這種寫(xiě)法反而很麻煩。

解決方式：

1.使用every替代：

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

2.自己寫(xiě)一個(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)文章

JavaScript實(shí)現(xiàn)的一個(gè)計(jì)算數(shù)字步數(shù)的算法分享
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的一個(gè)計(jì)算數(shù)字步數(shù)的算法分享,本文先是講解了算法描述與實(shí)現(xiàn)原理,然后給出實(shí)現(xiàn)代碼,需要的朋友可以參考下
2014-12-12
用js實(shí)現(xiàn)簡(jiǎn)單的tab選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了用js實(shí)現(xiàn)簡(jiǎn)單的tab選項(xiàng)卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
使用JavaScript實(shí)現(xiàn)鏈表的數(shù)據(jù)結(jié)構(gòu)的代碼
鏈表（Linked list）是一種常見(jiàn)的基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)，是一種線性表，但是并不會(huì)按線性的順序存儲(chǔ)數(shù)據(jù)，而是在每一個(gè)節(jié)點(diǎn)里存到下一個(gè)節(jié)點(diǎn)的指針(Pointer) 。下面我們用 JavaScript 代碼對(duì)鏈表的數(shù)據(jù)結(jié)構(gòu)進(jìn)行實(shí)現(xiàn)
2017-08-08
用js的document.write輸出的廣告無(wú)阻塞加載的方法
這篇文章主要介紹了用js的document.write輸出的廣告無(wú)阻塞加載的方法,需要的朋友可以參考下
2014-06-06
游戲人文件夾程序 ver 4.03
游戲人文件夾程序 ver 4.03...
2006-07-07
electron如何使用typescript
引入 TypeScript 到 Electron 項(xiàng)目可以幫助你捕捉錯(cuò)誤并在編寫(xiě)代碼時(shí)提供更好的自動(dòng)完成和文檔，這篇文章主要介紹了electron使用typescript的步驟,需要的朋友可以參考下
2024-04-04
JavaScript的eval JSON object問(wèn)題
在做AJAX應(yīng)用開(kāi)發(fā)的時(shí)候，我們通常喜歡把服務(wù)器端返回的JSON格式字符串在客戶端的回調(diào)函數(shù)中把它作為JavaScript代碼執(zhí)行并用一個(gè)變量保存起來(lái)，以方便使用返回的數(shù)據(jù)。
2009-11-11
JavaScript實(shí)現(xiàn)表單全選或反選效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)表單全選或反選效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
xml文檔轉(zhuǎn)換工具，附圖表例子(hta)
xml文檔轉(zhuǎn)換程序的一個(gè)小應(yīng)用，幾行代碼生成餅圖。源代碼打包提供。
2010-11-11
深入理解JavaScript中的尾調(diào)用(Tail Call)
尾調(diào)用（Tail Call）是函數(shù)式編程的一個(gè)重要概念，下面這篇文章主要給大家深入的介紹了關(guān)于JavaScript中尾調(diào)用的相關(guān)資料，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，有需要的朋友們下面來(lái)一起看看吧。
2017-02-02