快捷導(dǎo)航

詳解JS中如何終止foreach循環(huán)

更新時(shí)間：2024年01月15日 09:31:35 作者：有蟬

forEach專門用來(lái)循環(huán)數(shù)組,可以直接取到元素,同時(shí)也可以取到index值,終止forEach存在局限性,不能continue跳過(guò)或者break終止循環(huán),所以本文給大家詳細(xì)介紹了在JS中如何終止foreach循環(huán),需要的朋友可以參考下

forEach專門用來(lái)循環(huán)數(shù)組，可以直接取到元素，同時(shí)也可以取到index值

存在局限性，不能continue跳過(guò)或者break終止循環(huán)，沒有返回值，不能return

終止foreach循環(huán) ：運(yùn)用拋出異常（try catch）可以終止foreach循環(huán)

for of是ES6新引入的特性。修復(fù)了ES5中for in的不足

允許遍歷 Arrays（數(shù)組）、Strings（字符串）、Maps（映射）、Sets（集合）等可迭代的數(shù)據(jù)結(jié)構(gòu)

for of 支持return

最下方有個(gè)在項(xiàng)目中的實(shí)例

錯(cuò)誤用法1：使用break(會(huì)報(bào)錯(cuò))

var array = ["第一","第二","第三","第四"];
        
// 直接就報(bào)錯(cuò)了
array.forEach(function(item,index){
    if (item == "第三") {
        break;
    }
    alert(item);
});

報(bào)錯(cuò)如下

錯(cuò)誤用法2：使用return fasle （只是終止本次循環(huán)）

相當(dāng)于for 循環(huán)中的continue

var array = ["第一","第二","第三","第四"];
        
// 會(huì)遍歷數(shù)組所有元素，只是執(zhí)行跳過(guò)"第三"，return false下面的代碼不再執(zhí)行而已
array.forEach(function(item,index){
    if (item == "第三") {
        return false;
    }
    console.log(item);// "第一" "第二" "第四"
});
console.log("以下代碼")// 以下代碼

正確用法：運(yùn)用拋出異常（try catch）

try {
    var array = ["第一","第二","第三","第四"];
    
    // 執(zhí)行到第3次，結(jié)束循環(huán)
    array.forEach(function(item,index){
        if (item == "第三") {
            throw new Error("第三");
        }
        console.log(item);// 第一 第二
    });
} catch(e) {
    if(e.message!="第三") throw e;
};
// 下面的代碼不影響繼續(xù)執(zhí)行
console.log("下方代碼");//下方代碼

實(shí)例如下

      try {
        this.txt.forEach((item, index) => {
          if (!item.name) {
            throw new Error('單課不能為空！')
          }
          if (!item.val) {
            throw new Error('上課老師不能為空！')
          }
          if (!item.date) {
            throw new Error('上架時(shí)間不能為空！')
          }
        })
      } catch (e) {
        this.$message.warning(e.message)
        return
      };

以上就是詳解JS中如何終止foreach循環(huán)的詳細(xì)內(nèi)容，更多關(guān)于JS終止foreach循環(huán)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: