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

作者:异步漫步时间:2026-10-26 07:23:10浏览:174

本文系统总结 JavaScript 中 for、forEach、map、for...in、for...of 以及 every、some 等循环结构的退出机制。重点解析 forEach 无法直接终止的解决方案(如 try...catch),以及 map、every、some 在条件判断下的不同行为,帮助开发者根据实际需求选择正确的循环控制方式。

一、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 不会修改原数组,而是返回一个新数组,其元素由原数组调用回调函数处理后的值组成;若原数组为空,map 同样返回空数组。
  • forEach 仅对数组的每个元素执行回调函数,不返回任何值;对于空数组,它不会调用回调函数,也没有返回值。

终止 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, String, 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():逻辑上相当于“且”,只要有一个元素不满足条件,就返回 false;只有所有元素都满足条件时,才会返回 true。

some():逻辑上相当于“或”,只要有一个元素满足条件,就返回 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 会截断语句之后的代码执行;如果用于函数中,可以返回一个特定的值,作为函数的返回值;return 不能直接用在循环语句中控制流程。

总结

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

作者最新文章