快捷導航

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

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

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

forEach()方法

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

其中

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

currentvalue參數(shù)表示數(shù)組的當前元素項，必須的參數(shù)
index參數(shù)表示的當前元素下標，可選參數(shù)
arr參數(shù)表示當前元素所屬的數(shù)組，可選參數(shù)

thisValue表示執(zhí)行回調(diào)函數(shù)callback()時的this指向?？蛇x參數(shù)。當不寫時，則默認是指向window全局

示例

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

運行結(jié)果：

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

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

 try {
   let array = [1, 2, 3, 4]
   array.forEach((item, index) => {
     if (item === 3) {
       throw new Error('end')//報錯，就跳出循環(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.自己寫一個😁

//可跳出循環(huán)的數(shù)組遍歷
Array.prototype.loop = function(cbk) {
  //判斷當前數(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)
  }
})