label的機制-如何跳出雙重循環

項目中有時要進行多重循環遍歷，考慮到性能的問題，如何及時終止循環，是一個值得考慮的問題，通常的做法是我們聲明一個變量，作爲循環終止的標識，代碼如下：

    var arrObj = [
                    [0,1,2],
                    [3,4,5],
                    [6,7,8],
                    [9,10,11],
                 ];
    for(var i=0;i<arrObj.length;i++){
        var currentArr=arrObj[i];
        console.log("當前的數組index----",i);
          for(var j=0;j<currentArr.length;j++){
            console.log("當前的數組值：",currentArr[j]);
                  if(currentArr[j]==6){
                    console.log(currentArr[j]);
                    break;
                  }
          }
    }

打開頁面效果如下：

• 可以看到，break只是跳出了內層循環，外層循環依然在進行，假如我們想要內層循環終止的時候，外層循環也終止呢？這可能需要自己來寫邏輯，進行終止循環的操作，代碼如下：

var arrObj = [
                [0,1,2],
                [3,4,5],
                [6,7,8],
                [9,10,11],
             ];
    //是否終止，默認不終止
    var isBreak=true;
    for(var i=0;i<arrObj.length;i++){
        var currentArr=arrObj[i];
        console.log("當前的數組index----",i);
        if(isBreak){
            for(var j=0;j<currentArr.length;j++){
                console.log("當前的數組值：",currentArr[j]);
                if(currentArr[j]==6){
                    console.log(currentArr[j]);
                    //終止循環
                    isBreak=false;
                    break;
                }
            }
        }
    }

打開頁面效果如下：

• 可以看到，我們自己編寫邏輯也能讓循環及時終止。但是我們看到控制檯打印了index-----3,這說明外層循環的代碼還是執行了一次。爲了簡單起見，思考一下，js語言本身是否給我們提供了某些語法，可以達到我們想要的效果，實際上，js語言提供了語法，只是我們不經常使用而已，偶然看文檔發現的驚喜，今天和大家分享一下，那就是js的標記語法label，而不是你想象中的<label>標籤。我們先看一下MDN對於label語法的說明及使用方法：

• 我們來測試一下：

var arrObj = [
                [0,1,2],
                [3,4,5],
                [6,7,8],
                [9,10,11],
             ];
    //外層標記
    loop1:
    for(var i=0;i<arrObj.length;i++){
        var currentArr=arrObj[i];
        console.log("當前的數組index----",i);
        //內層標記
        loop2:
            for(var j=0;j<currentArr.length;j++){
                console.log("當前的數組值：",currentArr[j]);
                if(currentArr[j]==4){
                    console.log(currentArr[j]);
                    //終止循環
                    break loop1;
                }
            }

    }

頁面效果如下：

可以看到，通過這種js自帶的語法，可以輕鬆實現跳出某一代碼快的操作，執行的邏輯，也不會像我們自己寫的那樣，會多執行一步。瞭解了js的這個語法特性，在性能方面，會有極大的提升。