js中几种循环的退出方式实例总结

更新时间：2022年12月08日 12:02:12 作者：我不会JavaScript

提到在一段程序中如果碰到需要终止,结束一个循环,函数或者一段代码,一般会想到以下这几个关键字return、continue、break,这篇文章主要给大家介绍了关于js中几种循环的退出方式,需要的朋友可以参考下

一、for循环

终止for循环的方式：break和continue

break：退出循环 continue：退出本次循环

let list = [1, 2, 3, 4]
for (let i = 0; i < list.length; i++) {
  if (i == 1) {
    continue
  }
  if (i == 2) { 
    break;
  }
}

二、forEach循环

用return、break、continue的方式都不能终止forEach循环，return在forEach里相当于for循环里的continue，能够退出本次循环，可以使用try...chtch终止foreach循环

try{
  var array = ["first","second","third","fourth"];
  // 执行到第3次,结束循环
  array.forEach(function(item,index) {
    if(item == "third"){
      throw new Error("EndIterative");
    }
 
    console.log(item); // first second
  });
}catch(e){
  if(e.message != "EndIterative") throw e;
}
// 下面的代码不影响继续执行
console.log("继续执行。。。");

二、map循环

·map和forEach的区别

map不会改变原数组，而是会返回一个新的数组，数组中的元素为原数组调用callback函数处理后的值；如果是空数组，map返回的也是空数组
forEach只针对数组的每个元素调用callback，没有返回值，对于空数组是不会调用回调函数的，也没有返回值

终止map循环的方式和forEach相同

let list = [1, 2, 3, 4]
try {
  list?.map(item => {
    console.log('执行');
    if (item == 1) {
      throw new Error('stop')
    }
  })
} catch (e) {
  if (e.message !== 'stop') {
    throw e
  }
}

list?.some(item => {
  if (item == 1) {
    return true
  }
})

可以看出，forEach和map并不适合提前终止循环的情景，可以用every()、some()代替

三，for in 循环

for…in循环主要是为了遍历对象的，break或continue可以生效

注：当for…in用来遍历数组时，遍历的结果为当前元素索引值的字符串形式

const person = {
  name: "111",
  age: 18,
  1: 1,
  job: "student",
};

for (const key in person) {
  if (key === "age") {
    break;
  }
  if (key === 'name') {
    continue;
  }
}

四，for of 循环

for…of和for…in都能用break和continue结束(跳出当前)循环

我们都知道for…of只能用来遍历那些内置iterator（Array, Atring, ArrayLike, Set, Map…）或者实现了@@iterator方法的数据类型，而普通的Object并没有内置iterator

for (const val of arr) {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
if (val === 2) {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
continue;
}
if (val === 3) {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
break;
}
}

五，every()和some()

every()：相当于且，只要有一个不满足条件，就return false，只有都满足条件才会返回true

some()：相当于或，只要有一个满足条件，就return true

let list = [
  { name:"aaa", age:3 },
  { name:"bbb", age:4 },
  { name:"ccc", age:5 },
]

var every = list.every(function (item) {
  return item.age > 4
})
console.log(eve) // false

var some = list.some(function (item) {
  return item.age > 4
})
console.log(some) // true

some退出循环：return / return true（不能return false） every退出循环：return false

附：return、continue、break三者的区别

break: 终止整个循环(有内层循环时终止的是内层循环)，退出switch语句；只能用于循环或者switch语句中，其他地方使用会报错
continue：与break相似，不同之处在于结束的是本次循环，相当于跳过本次循环执行下一次循环；只能用于while,do/while,for,for/in循环中，其他地方使用会报错
return: return false截断语句之后的代码执行，如果用于函数中，可以返回一个特点的值，做完函数的返回值；不能用在循环中

总结

到此这篇关于js中几种循环的退出方式的文章就介绍到这了,更多相关js循环退出方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js限制输入框只能输入数字(onkeyup触发)
这篇文章主要介绍了通过js实现input输入框只能输入数字的实现方法，主要是通过正则表达式替换实现,需要的朋友可以参考下
2018-09-09
如何实现axios的自定义适配器adapter
Axios是一个非常优秀的基于promise的HTTP库，可以用在浏览器和node.js中。并且提供了很多便捷的功能，但如果我们想基于axios 扩展一些自己的数据请求方式（例如某些APP内专属的数据请求方式等），并能够使用上axios提供的便捷功能，该怎么自定义一个适配器adapter
2021-05-05
JavaScript事件对象event用法分析
这篇文章主要介绍了JavaScript事件对象event用法,结合实例形式分析了事件对象event中常用的属性、方法、相关操作技巧与注意事项,需要的朋友可以参考下
2018-07-07
js select option对象小结
本篇文章主要是对js中的select option对象进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
JavaScript实现图片拖曳效果
这篇文章主要为大家详细介绍了JavaScript实现图片拖曳效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
BootStrap表单验证实例代码
这篇文章主要介绍了bootstrap表单验证的实例代码，代码中包括引入的js文件，具体实现方法，大家参考本文
2017-01-01
Javascript中的getter和setter初识
最近在工作中遇到了getter和setter，getter 是一种获得属性值的方法，setter是一种设置属性值的方法。下面这篇文章主要给大家介绍了关于Javascript中getter和setter的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-08-08
微信小程序实现图片上传放大预览删除代码
这篇文章主要为大家详细介绍了微信小程序实现图片上传放大预览删除代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
Js跳出两级循环方法代码实例
这篇文章主要介绍了Js跳出两级循环方法代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
判断输入的字符串是否是日期格式的简单方法
下面小编就为大家带来一篇js判断输入的字符串是否是日期格式的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07