js 跳出迴圈/結束遍歷的方法

該篇文章使用的測試資料:

const a = [1, 2, 3, 4, 5];
const b = [11, 12, 13, 2, 14, 15];

1. for迴圈、for...in、for...of

// 跳出單層迴圈, break, continue, 函式搭配return
for (let i = 0; i < a.length; i += 1) {
    if (i === 3) {
        break; //跳出迴圈, [1, 2, 3]
        // continue; 跳出本次迴圈, [1, 2, 3, 5]
    }
    console.log(a[i]);
}

for (let i in a) {
    if (i === '3') {
        break;
    }
    console.log(a[i]); // [1,2,3]
}

// 跳出多層迴圈，return
testFor();
function testFor() {
    console.log('444');
    for (let i = 0; i < a.length; i++) {
        for (let j = 0; j < b.length; j++) {
            if (a[i] === b[j]) {
                return false;
            }
            console.log('111');
        }
        console.log('222');
    }
    console.log('333');
}
// output
輸出:
// 1次444
// 6次111
// 1次222
// 3次111

// for迴圈沒有區域性作用域的概念，函式有區域性作用域的概念，return跳出當前作用域

// 指定label, 跳出特定迴圈
bbq:
for(let i = 0; i < a.length; i++){
    ccc:
    for(let j = 0; j < b.length; j++){
        if( i === 5 ){
            break bbq; //直接跳出bbq外層迴圈
        }
    }
}

2. forEach、map、filter

a.forEach((item, index) => {
    if (index === 3) {
        return;
    }
    console.log(item); // [1,2,3,5]
})

// return語句跳出本次迴圈; break、continue語句無效; try..catch丟擲異常
// 無法終止/跳出for迴圈（丟擲異常），使用其他方式替代

3. some、every、find、findIndex

a.some((item, index) => {
    if (index === 3) {
        return; // 跳出本次迴圈
        return false; // 跳出本次迴圈
        return true; // 跳出迴圈
    }
    console.log(item);
})

a.every((item, index) => {
    if (index === 3) {
        return; // 跳出本次迴圈
        return false; // 跳出迴圈
        return true; // 跳出本次迴圈
    }
    console.log(item);
})

// some與every結束遍歷的條件相反: some、find遍歷中為true退出執行，every遍歷中為false退出執行