JavaScript中如何跳出循環(huán)/結(jié)束遍歷

Simon 發(fā)布于2019-08-26 10:59 / 3654人閱讀

摘要：中如何跳出循環(huán)結(jié)束遍歷直接拋結(jié)論，下表是中常用的實現(xiàn)循環(huán)遍歷的方法的跳出結(jié)束遍歷的辦法，經(jīng)過測試后的總結(jié)。遍歷中返回才會退出執(zhí)行，而則需要返回才會退出執(zhí)行。

JavaScript中如何跳出循環(huán)/結(jié)束遍歷

直接拋結(jié)論，下表是JS中常用的實現(xiàn)循環(huán)遍歷的方法的跳出/結(jié)束遍歷的辦法，經(jīng)過測試后的總結(jié)。可能各位大佬還有其他的辦法，我在此表示大佬NB。

序號	方法	break	continue	return	return true	return false	結(jié)論
1	for循環(huán)	成功	跳出本次循環(huán)	不合法	不合法	不合法	√
2	Array.forEach()	不合法	不合法	跳出本次循環(huán)	跳出本次循環(huán)	跳出本次循環(huán)	×
3	for...in	成功	跳出本次循環(huán)	不合法	不合法	不合法	√
4	Array.map()	不合法	不合法	跳出本次循環(huán)	跳出本次循環(huán)	跳出本次循環(huán)	×
5	Array.some()	不合法	不合法	跳出本次循環(huán)	成功	跳出本次循環(huán)	√
6	Array.every()	不合法	不合法	成功	跳出本次循環(huán)	成功	√
7	Array.filter()	不合法	不合法	跳出本次循環(huán)	跳出本次循環(huán)	跳出本次循環(huán)	×

forEach、map和filter目前我不知有什么辦法停止遍歷，在其他幾種方法中，上表中列出的方法均可實現(xiàn)結(jié)束循環(huán)。

1. for循環(huán)

var arr = ["a", "b", "c", "d", "e"];
var show = [];

for (var i = 0; i < arr.length; i++) {
    if (i === 2) {
        break;// ["a", "b"] 成功跳出循環(huán)
        // continue;// ["a", "b", "d", "e"] 只能跳出本次循環(huán)
        // return;// Uncaught SyntaxError: Illegal return statement
        // return true;// Uncaught SyntaxError: Illegal return statement
        // return false;// Uncaught SyntaxError: Illegal return statement
    }
    show.push(arr[i]);
}

2. Array.forEach()

var arr = ["a", "b", "c", "d", "e"];
var show = [];

arr.forEach((item, index) => {
    if (index === 2) {
        // break;// Uncaught SyntaxError: Illegal break statement
        // continue;// Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement
        // return;// ["a", "b", "d", "e"] 只能跳出本次循環(huán)
        // return true;// ["a", "b", "d", "e"] 只能跳出本次循環(huán)
        // return false;// ["a", "b", "d", "e"] 只能跳出本次循環(huán)
    }
    show.push(item);
})

3. for...in...

var arr = ["a", "b", "c", "d", "e"];
var show = [];

for (var item in arr) {
    if (item === "2") {
        break;// ["a", "b"] 跳出循環(huán)成功
        // continue;// ["a", "b", "d", "e"] 只能跳出本次循環(huán)
        // return;// Uncaught SyntaxError: Illegal return statement
        // return true;// Uncaught SyntaxError: Illegal return statement
        // return false;// Uncaught SyntaxError: Illegal return statement
    }

    show.push(arr[item]);
}

4. Array.map()

var arr = ["a", "b", "c", "d", "e"];
var show = [];

arr.map((item, index) => {
    if (index === 2) {
        // break;// Uncaught SyntaxError: Illegal break statement
        // continue;// Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement
        // return;// ["a", "b", "d", "e"] 只能跳出本次循環(huán)
        // return true;// ["a", "b", "d", "e"] 只能跳出本次循環(huán)
        // return false;// ["a", "b", "d", "e"] 只能跳出本次循環(huán)
    }
    show.push(item);
})

5. Array.some()

var arr = ["a", "b", "c", "d", "e"];
var show = [];

arr.some((item, index) => {
    if (index === 2) {
        // break;// Uncaught SyntaxError: Illegal break statement
        // continue;// Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement
        // return;// ["a", "b", "d", "e"] 只能跳出本次循環(huán)
        return true;// ["a", "b"] 成功跳出循環(huán)
        // return false;// ["a", "b", "d", "e"] 只能跳出本次循環(huán)
    }
    show.push(item);
})

6. Array.every()

var arr = ["a", "b", "c", "d", "e"];
var show = [];

arr.every((item, index) => {
    if (index === 2) {
        // break;// Uncaught SyntaxError: Illegal break statement
        // continue;// Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement
        // return;// ["a", "b"] 成功跳出循環(huán)
        // return true;// ["a", "b", "d", "e"] 只能跳出本次循環(huán)
        return false;// ["a", "b"] 成功跳出循環(huán)
    }
    return show.push(item);
})

some()與every()不同，some遍歷中一個為真全部即為真，而every遍歷中全部為真才行。some遍歷中返回true才會退出執(zhí)行，而every則需要返回false才會退出執(zhí)行。

7. Array.filter()

var arr = ["a", "b", "c", "d", "e"];
var show = [];

arr.filter((item, index) => {
    if (index === 2) {
        // break;// Uncaught SyntaxError: Illegal break statement
        // continue;// Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement
        // return;// ["a", "b", "d", "e"] 只能跳出本次循環(huán)
        // return true;// ["a", "b", "d", "e"] 只能跳出本次循環(huán)
        return false;// ["a", "b", "d", "e"] 只能跳出本次循環(huán)
    }
    show.push(item);
})