快捷導(dǎo)航

JS中map與forEach無法跳出循環(huán)及every和some的使用

更新時間：2023年05月24日 14:27:14 作者：JuS巨山超力霸

在我們平時使用習(xí)慣中,for循環(huán)里要跳出整個循環(huán)是使用break,但在數(shù)組中用forEach循環(huán)或者map如要退出整個循環(huán)使用break會報錯,使用return也不能跳出循環(huán),下面這篇文章主要介紹了關(guān)于JS中map與forEach無法跳出循環(huán)及every和some的使用的相關(guān)資料,需要的朋友可以參考下

前言

在項目中遍歷數(shù)組的時候，使用到了array.map

在循環(huán)里面需要進(jìn)行判斷，只要有一項滿足條件就返回false

發(fā)現(xiàn)效果不對，debug一下才發(fā)現(xiàn)，return沒有真正退出循環(huán)。

下面探索一下正確的跳出循環(huán)方案~~

1.map

使用return不能跳出循環(huán)

  let arr = [1,2,3];
    arr.map((item)=>{
        if(item == 2){
            return false
        }
        console.log(item)
    })

使用break報錯

 let arr = [1,2,3];
    arr.map((item)=>{
        if(item == 2){
            break;
        }
        console.log(item)
    })

2.forEach

使用return不能跳出循環(huán)

 let arr = [1,2,3];
    arr.forEach((item)=>{
        if(item == 2){
            return false
        }
        console.log(item)
    })

使用break報錯

let arr = [1,2,3];
    arr.forEach((item)=>{
        if(item == 2){
          break;
        }
        console.log(item)
    })

3.every方法

判斷數(shù)組中是否所有元素都滿足條件

every()方法會遍歷數(shù)組的每一項，如果有有一項不滿足條件，則表達(dá)式返回false,剩余的項將不會再執(zhí)行檢測；如果遍歷完數(shù)組后，每一項都符合條件，則返回true。

return true : 循環(huán)繼續(xù) 當(dāng)前元素滿足條件,繼續(xù)判斷,如果循環(huán)執(zhí)行完畢還是true,則every的返回值就是true

return false : 循環(huán)結(jié)束,當(dāng)前元素不滿足條件,every的返回值也是false

let arr = [1,2,3];
    arr.every((item)=>{
        if(item == 2){
          return false
        }
        console.log(item)
    })

4.some方法

判斷數(shù)組中是否有滿足條件的元素

return true : 循環(huán)結(jié)束,找到了滿足條件的元素

return false : 循環(huán)繼續(xù),沒找到循環(huán)繼續(xù),如果所有元素全部遍歷還是沒找到,最終結(jié)果為false

let arr = [1,2,3];
    arr.some((item)=>{
        if(item == 2){
          return true
        }
        console.log(item)
    })

5.for循環(huán)使用return 和 break 都可以跳出循環(huán)

單層循環(huán)

1.for循環(huán)中return語句：會直接跳出循環(huán)，

因為js中for是沒有局部作用域的概念的，所以只有把for循環(huán)放在函數(shù)中時，才可以在for循環(huán)中使用return語句。

2.for循環(huán)中的break語句：和return一樣會直接跳出循環(huán)

與return不同的是，使用break時，for循環(huán)可以不用一定放在函數(shù)中；

多層循環(huán)：

1.return：和單層循環(huán)一樣必須放在函數(shù)中，否則將會報語法錯誤

使用return會直接跳出函數(shù)

   var a=[1,2,3];
   var b=[4,5,6,7,8];
   function test(){
        for(var i=0;i<a.length;i++){
            for(var j=0;j<b.length;j++){
                if(b[j]==5){
                    // break
                    return;
                }else{
                    console.log(13);
                }
            }
            console.log(12);
        }
        console.log(14);
    }
    test();//打印結(jié)果為：13

使用return后，當(dāng)b[j]=5的時候，會直接跳出函數(shù)，for循環(huán)后面的語句也不再執(zhí)行；

2.break語句：和單層循環(huán)一樣，可以可以不用放在函數(shù)中

但是在多層循環(huán)中與return不同的是，break不是跳出函數(shù)，而是跳出最里層的for循環(huán)，外面的循環(huán)和最外層for循環(huán)后面的語句也將繼續(xù)執(zhí)行

 var a=[1,2,3];
 var b=[4,5,6,7,8];
 function test(){
        for(var i=0;i<a.length;i++){
            for(var j=0;j<b.length;j++){
                if(b[j]==5){
                    break ;
                    // return;
                }else{
                    console.log(13);
                }
            }
            console.log(12);
        }
        console.log(14);
    }
    test();//打印結(jié)果為13 12 13 12 13 12 14

總結(jié)

到此這篇關(guān)于JS中map與forEach無法跳出循環(huán)及every和some的使用的文章就介紹到這了,更多相關(guān)JS map與forEach無法跳出循環(huán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: