JavaScript中遍历跳出循环方法总结

 更新时间:2023年12月06日 15:06:29   作者:@德玛玩前端  
这篇文章主要给大家介绍了关于JavaScript中遍历跳出循环方法的相关资料,一想到想到循环的跳出,立马就会想到三个关键,break、return、continue,在业务中也会需要在遍历的时候退出循环,需要的朋友可以参考下

前言

javascript中的遍历方法有很多,今天,主要总结一下这些遍历方法如何跳出循环,欢迎各位大神和同行们指教和修正😁
首先,必须要知道的是:

  • return必须是使用在函数里面的
  • return有2个作用,结束函数和返回结果

JS中的遍历有如下方式可以跳出循环

1.for方法 跳出循环

  • break 跳出当前循环,循环后面的代码仍然可以执行
  • return 可以终止当前函数,循环后面的代码不可以执行
  • continue 跳过当次循环,仍然执行后续的循环
function a(){
var arr = [1,3,5,7,9];
var id = 5;
for (var i = 0; i < arr.length; i++) {
     if(arr[i]=== 1) continue;    //跳过当次循环
     console.log(arr[i])
     if (arr[i] === id) {    
         break;                   //满足条件,跳出循环;循环后面的代码仍然可以执行
     }
	 if (arr[i] === 6) {
	     return;                   //满足条件,可以终止当前函数
	 }
 }
}

2.forEach方法跳出循环

  • 无法使用break,continue来跳出遍历, 因为foreach是异步执行,可能在break之前代码就已经执行完了
  • forEach()本身无法跳出循环,必须遍历所有的数据才能结束
  • 通过抛出异常的方式跳出循环 实现break效果
// 在forEach中,无法用break等函数在遍历结束之前结束遍历,如果要提前终止,必须把forEach()方法放在一个try块中,并能抛出一个异常。 
var arr = [1,3,5,7,9];
var id = 5;
try {
     arr.forEach(function (curItem, i) {
         if(curItem === 1) return;
         console.log(curItem)
         if (curItem === id) {
             throw Error();         //满足条件,跳出循环
         }
     })
 } catch (e) {
 }
  • 通过return跳过当次循环 实现continue的效果
arr.forEach(function (curItem, i) {
     if(curItem === 1) return;
     console.log(curItem)
     if (curItem === id) {
         return;         //满足条件,跳出当次循环
		                 // break 语法报错;
 			 
     }
 })

3. map() 跳出循环

  • map和forEach一样无法通过break跳出循环。
  • map() 和 forEach()的区别
 // 前者不改变原数组的内容
 // 后者改变原数组的内容

4. for of 跳出循环

  • continue 跳出当次循环
for (let i of arr) {
	if (i === 3) {
	  continue
	}
	console.log(i)
}
  • break 跳出当前循环
for (let i of arr) {
	if (i === 3) {
	  break
	}
	console.log(i)
}
  • return 可以终止当前函数,循环后面的代码不可以执行
var a=[1,2,3,4];
function b(){
	for(var key of a){
		if(key=2){
			return false
		};
		console.log('哈哈哈')}
};
console.log(b()) //false

5. while do while 跳出循环

  • continue 跳出当次循环
let j = 1
while (j < 6) {
  if (j === 3) {
	j++
	continue
  }
  console.log(j) // 1 2  4 5
  j++
}
  • break 跳出当前循环
var i=0;
while (i < 6) {
  if (i === 3) {
	  i++
	break
  }
  console.log(i) // 0,1,2
  i++
}
  • return 可以终止当前函数,循环后面的代码不可以执行
var i=0;
while (i < 6) {
  if (i === 3) {
	return
  }
  console.log(i)
  i++
}

every 遍历

  • every可以通过return的返回bool值,控制是否继续遍历。
	 let arr = [1, 2, 3, 4, 5]
	   arr.every(i => {
	     console.log(i)
	     return true //1,2,3,4,5
	   })
	   
	 	arr.every(i => {
	     console.log(i)
	     if (i === 3) {
	       return false //1,2,3
	     } else {
	       return true
	     }
	   })

some 遍历

  • some 可以通过控制return true来结束遍历。
  • 如果没有写return,会遍历到最后一个值,默认给true关闭
  let arr = [1, 2, 3, 4, 5]
      arr.some(i => {
        console.log(i) // 1,2,3,4,5
      })
     
    
arr.some(i => {
        console.log(i)
        if (i === 3) {
          return true //1,2,3
        }
      })
    }

总结 

到此这篇关于JavaScript中遍历跳出循环方法总结的文章就介绍到这了,更多相关JS遍历跳出循环内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS对select控件option选项的增删改查示例代码

    JS对select控件option选项的增删改查示例代码

    Javascript操作select是表单中比较常见的,大家可以在网上搜索到很多的相关资料,接下来为大家详细介绍下,JS动态操作select中的各种方法,感兴趣的朋友可以参考下
    2013-10-10
  • 小程序实现录音上传功能

    小程序实现录音上传功能

    这篇文章主要为大家详细介绍了小程序实现录音上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • JavaScript一文带你玩转web表单网页

    JavaScript一文带你玩转web表单网页

    表单通常用来收集网页访问者信息,常见的表单比如搜索引擎的搜索框、各网页应用的注册或者登陆界面等,通读本篇对大家的学习或工作具有一定的价值,需要的朋友可以参考下
    2021-10-10
  • Javascript学习笔记-详解in运算符

    Javascript学习笔记-详解in运算符

    in运算符是javascript语言中比较特殊的一个,可以单独使用作为判断运算符,也常被用于for...in循环中遍历对象属性
    2011-09-09
  • JS文本框追加多个下拉框的值的简单实例

    JS文本框追加多个下拉框的值的简单实例

    这篇文章介绍了JS文本框追加多个下拉框的值的例子,有需要的朋友可以参考一下
    2013-07-07
  • JS/HTML5游戏常用算法之追踪算法实例详解

    JS/HTML5游戏常用算法之追踪算法实例详解

    这篇文章主要介绍了JS/HTML5游戏常用算法之追踪算法,结合吃豆人游戏的算法原理以实例形式详细分析了追踪算法的相关算法操作技巧与注意事项,需要的朋友可以参考下
    2018-12-12
  • JS实现超简单的汉字转拼音功能示例

    JS实现超简单的汉字转拼音功能示例

    这篇文章主要介绍了JS实现超简单的汉字转拼音功能,结合实例形式分析了javascript汉字转换成拼音的函数定义与使用技巧,需要的朋友可以参考下
    2016-12-12
  • CSS(js)限制页面显示的文本字符长度

    CSS(js)限制页面显示的文本字符长度

    限制页面显示的字符长度,一直被众多网友倾睬,本人也是一fans利用闲暇时间搜集整理了一些实用技巧,需要了解的朋友可以参考下
    2012-12-12
  • 如何用JavaScipt测网速

    如何用JavaScipt测网速

    这篇文章主要介绍了如何用JavaScipt测网速,对测网速感兴趣的同学,可以参考下
    2021-05-05
  • uni-app表单组件(form表单)用法举例

    uni-app表单组件(form表单)用法举例

    平时我们经常会使用到表单,下面这篇文章主要给大家介绍了关于uni-app表单组件(form表单)的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12

最新评论