跳出循环/结束遍历

前言：

今天同事问我，forEach怎么跳出循环？
内心第一反应，break不行吗？第二反应，那就流氓一点，'throw error' 咯。

今天就来整理整理那些常用的遍历方法中，不可跳出/结束遍历的。（如有错误，欢迎指正）

首先，定义一个简单的数组，拿for循环开始第一步

var arr = [1, 2, 3, 4];

1、for循环

for (var i = 0; i < arr.length; i++) {
    if (i == 2) {
      break;
    }
    console.log(i);
}
console.log('over')
//控制台依次打印，0,1,over
//break，跳出循环，结束遍历

for (var i = 0; i < arr.length; i++) {
    if(i == 2){
      continue;
    }
    console.log(i);
}
console.log('over')
// 控制台依次打印，0,1,3,over
// continue，只跳出本次循环

2、for...in.../for...of...

for (var i in arr) {
    if (i == 2) {
        break;
    }
    console.log(i);
}
console.log('over')
//控制台依次打印，0,1,over
//break，跳出循环，结束遍历

for (var i in arr) {
    if (i == 2) {
        continue;
    }
    console.log(i);
}
console.log('over')
// 控制台依次打印，0,1,3,over
// continue，只跳出本次循环

3、forEach

arr.forEach((item, index) => {
    if (index == 2) {
      return false; //return,return true 都可
    }
    console.log(index);
})
console.log('over')
// 控制台依次打印，0,1,3,over
// return/return false/return true，只跳出本次循环

4、map( )

arr.map((item, index) => {
    if (index == 2) {
      return false; //return,return true 都可
    }
    console.log(index);
})
console.log('over')
// 控制台依次打印，0,1,3,over
// return/return true/return false，只跳出本次循环

5、some( )

arr.some((item, index) => {
    if (index == 2) {
        return false; //return 也可
    }
    return console.log(index);
})
console.log('over')
// 控制台依次打印，0,1,3,over
// return / return false，只跳出本次循环

arr.some((item, index) => {
    if (index == 2) {
      return true; 
    }
    return console.log(index);
})
console.log('over')
// 控制台依次打印，0,1,over
// return true，跳出循环，结束遍历

注意：some遍历中为true，退出执行，而every遍历中为false才会退出执行，两者相反。

6、every( )

arr.every((item, index) => {
    if (index == 2) {
      return false; //return 也可
    }
    console.log(index);
})
console.log('over')
// 控制台依次打印，0,1,3,over
// return / return false，只跳出本次循环

arr.every((item, index) => {
    if (index == 2) {
      return true; 
    }
    console.log(index);
})
console.log('over')
// 控制台依次打印，0,1,3,over
// return true，跳出循环，结束遍历

3、filter( )

arr.filter((item, index) => {
    if (index == 2) {
      return false; //return,return true 都可
    }
    console.log(index);
})
console.log('over')
// 控制台依次打印，0,1,3,over
// return/return false/return true，只跳出本次循环

// 还有一种方式,改变arr1的length，为突出区别，重新给arr定义
var arr = [1, 2, 3, 4, 5, 6];
arr.filter((item, index , arr1) => {
    if (index == 2) {
       arr1.length = 0;
    }
    console.log(index);
})
console.log('over')
// 控制台依次打印，0,1,2,over
// 改变length，从下一次开始跳出循环，结束遍历，所以if条件要适当调整

总结：（暂不算上改length）

遍历方法	break	continue	return/return false	return true	结束遍历
for	结束遍历	跳出本次循环	error	error	👌
for...in.../for...of...	结束遍历	跳出本次循环	error	error	👌
forEach( )	error	error	跳出本次循环	跳出本次循环	🙅
map( )	error	error	跳出本次循环	跳出本次循环	🙅
some( )	error	error	跳出本次循环	结束遍历	👌
every( )	error	error	结束遍历	跳出本次循环	👌
filter( )	error	error	跳出本次循环	跳出本次循环	🙅

如果非要变不可能为可能，最简单的一个方法就是开头提到的throw error ，再用上try catch，不过超级不推荐哦！以下拿forEach举例～

try {
    arr.forEach((item, index) => {
      if (index == 2) {
        throw new Error('我结束遍历啦～')
      }
      console.log(index);
		})
		console.log('over')
} catch(error) {
    throw error;
}
// 控制台依次打印，0,1，即Error
// 跳出循环，结束遍历

结尾：好记性不如烂笔头，写点笔记，督促进步。撒花 🎉🎉🎉
多嘴一句：for循环的性能真的大哥大！