JavaScript foreach 方法跳出循环

article/2025/8/29 5:35:02

通常,在 for循环中跳出循环可以用 break或者 continue 来跳出循环。
break:跳出循环;
continue:跳过当次循环。

而有时候需要在 foreach 中跳出循环,该怎么做呢?

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。对于空数组不会执行回调函数。
回调函数的参数 :
function(currentValue, index, arr)
currentValue 必需。当前元素
index 可选。当前元素的索引值
arr 可选。当前元素所属的数组对象

在 forEach 中使用return:

let arr = [1,2,3,4,5,6,7,8,9];
let num = 6
arr.forEach((item)=>{
if(item == num) {return;
}
console.log('item',item);
})
console.log(123)

运行结果:
在这里插入图片描述
可以看到,forEach中使用 return 语句的作用只能跳出当前循环(实现了continue的效果),并不能跳出整个循环,没达到期待的效果,满足条件后还继续执行了循环。

在 forEach 中使用break:

let arr = [1,2,3,4,5,6,7,8,9];
let num = 6
arr.forEach((item)=>{
if(item == num) {break;
}
console.log('item',item);
})
console.log(123)

运行结果:
在这里插入图片描述
直接报错了,后面的代码也没执行。

在 forEach 中使用continue:

let arr = [1,2,3,4,5,6,7,8,9];
let num = 6
arr.forEach((item)=>{
if(item == num) {continue;
}
console.log('item',item);
})
console.log(123)

运行结果:
在这里插入图片描述
和 break 一样,直接报错了,后面的代码也没执行。

上面的例子可以看到,foreach不能使用breakcontinue这两个关键字。

因为 forEach 本身无法跳出循环,必须遍历所有的数据才能结束,它传入的是一个回调函数,因此形成了一个作用域,它内部所定义的变量不会像for循环一样污染全局变量。

解决方法

forEach方法跳出循环 —— 通过 try catch 抛出异常的方式跳出循环

let arr = [1,2,3,4,5,6,7,8,9];
let num = 6
try {arr.forEach((item, i)=> {        console.log('item',item)if (item === num) {throw new Error('LoopInterrupt');         //满足条件,跳出循环}})} catch (e) {if (e.message !== "LoopInterrupt") throw e
}
console.log(123)

运行效果:
在这里插入图片描述


http://chatgpt.dhexx.cn/article/8HP8I8VF.shtml

相关文章

C++跳出for循环的方式

注&#xff1a;continue只能跳出当前层的循环&#xff0c;无法直接跳出for循环 方法1&#xff1a; for循环中满足条件后使用break语句&#xff1b; #include <iostream> using namespace std;int main(int argc,char *argv[]) {int i;for(i0;i<5;i){if(i2)break;}cou…

Js之跳出for循环,跳出多次for循环详解

一、for循环退出方式 首先我们都知道循环中最常用的就是continue;break; continue:表示跳出本次循环&#xff0c;也就是不执行本次循环continue之后的操作 break:表示跳出当前的循环&#xff0c;针对整个循环体终止后续的遍历&#xff1b; 最简单的应用效果如下&#xff1a; …

layui遮罩

layui遮罩 在执行某个按钮功能时,可能出现网络延迟或是其他原因时 避免重复表单提交,用遮罩.此次请求不响应,执行完毕,就一直遮罩住其他功能 var loading layer.load(1, {shade: [0.8, #393D49], time: 0}); layer.close(loading);写的位置 在请求开启之前遮住 在请求响应之…

遮罩Mask

一、遮罩&#xff1a;遮罩层范围内可看见被遮罩层图层&#xff0c;遮挡层范围可看见笼罩层图形 遮罩层必须至少有两个图层&#xff0c;上面的一个图层为“遮罩层”&#xff0c;下面的称“被遮罩层”&#xff1b;这两个图层中只有相重叠的地方才会被显示。也就是说在遮罩层中有…

基于vue3.0的遮罩

前言 最近在uniapp中要写一个弹窗&#xff0c;弹窗好写&#xff0c;但是遮罩没有接触过。找到了下面这篇文章&#xff0c;推荐仔细阅读一下。在这篇文章的基础下&#xff0c;简单封装了一个遮罩。 推荐文章&#xff1a;论如何用Vue实现一个弹窗-一个简单的组件实现 遮罩 备…

html5 div遮罩,CSS3 遮罩属性

遮罩(Mask)和Photoshop里的蒙版效果含义一致&#xff0c;用于为指定元素建立一个覆盖在上面的遮罩层。它显示在元素之上&#xff0c;和背景效果使用起来正好相反。我们可以使用遮罩在元素上方叠加一幅图或者一个渐变效果。 遮罩、内容和背景效果的显示层次如下图所示&#xff1…

html添加遮罩

html添加遮罩的代码如下所示 使用divcss &#xff0c;加载中的图片是网上下载的动图&#xff0c;可以根据自己需要进行修改 <!DOCTYPE html> <html> <head><title>DIV CSS遮罩层</title><script language"javascript" type"t…

Android渐变遮罩

Android Studio版本&#xff1a; Android Studio Chipmunk 这篇文章介绍如何在Android中实现这样的渐变遮罩 依赖项 1.CardView 在app下的build.gradle中添加依赖&#xff0c;并且完成编译 dependencies {implementation androidx.cardview:cardview:1.0.0 } 2.两张svg图片…

Blender 利用遮罩剔除顶点

&#x1f369;mask &#x1f367;效果&#x1f961;步骤&#x1f366;mask贴图制作&#x1f364; 添加顶点权重编辑&#x1f957;添加mask&#x1f35f;应用修改 &#x1f367;效果 &#x1f961;步骤 &#x1f366;mask贴图制作 &#x1f4a1; 本次教程参考以下贴图制作mas…

Unity之ASE 图片遮罩

前言 当一张图片,我们希望它只显示一部分时,就可以使用一张特定的遮罩图来控制它的显示。 比如下图,我们希望它的边缘变成圆角,且过渡自然。 我们就可以和下面的遮罩图进行融合。 最后出来的效果如下图所示: 原理 原理很简单,我们只使用了一个Multiply相乘即可 我们…

手写遮罩层

&#xff08;注&#xff1a;图文不符&#xff0c;仅供参考&#xff09; 遮罩层原理 就是当出现弹窗或者确认框的时候&#xff0c;点击弹窗外的地方不会触发别的响应&#xff0c;只是单纯地关闭弹窗&#xff08;或者不关闭也不触发其他响应&#xff09; 遮罩层的简单写法 任意…

利用Openlayers4实现地图遮罩效果(三)

文章目录 前言完整代码效果 代码解读完整项目代码(含测试数据&#xff09; 前言 之前写的关于利用openlayer创建遮罩的文章&#xff08;原文&#xff09;&#xff0c;那篇文章主要是讲如何创建一个四周遮罩&#xff08;即四周外围遮罩但露出目标中心区域&#xff09;。后面有很…

前端遮罩层实现_前端制作遮罩与蒙版

-1 遮罩: 有色则显示,无色抠取,半透明则半透明 蒙版: 黑色则抠除,白色显示,灰色则半透明 概念上两者非常容易混淆,但完成的效果是一样的,需记住哪个是无色抠取,哪个是黑色抠除。 再者还有个裁剪,只是做裁切,没有对半透明情况的处理。 这样一说就知道,本文阅读起来可…

elementui 遮罩

今日突发奇想&#xff0c;在之前的项目中是通过jQyery layUI实现遮罩效果的&#xff0c;效果如图 ​​​​​​​ 但jQuery和layUI的时代已经过去了&#xff0c;于是思考了一下如何通过VUE elementUI实现遮罩效果&#xff0c;本人没亲手实现&#xff0c;但目测通过elementU…

div遮罩层

实现遮盖层&#xff0c;使一部分区域不可点击编辑等。 1.简易遮罩层一&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"width<device-width>,…

CSS mask遮罩

一、CSS mask遮罩的过往和现状 CSS mask遮罩属性的历史非常久远了&#xff0c;远到比CSS3 border-radius等属性还要久远&#xff0c;最早是出现在Safari浏览器上的&#xff0c;差不多可以追溯到09年。 不过那个时候&#xff0c;遮罩只能作为实验性的属性&#xff0c;做一些特…

spin遮罩

旋转遮罩 前言知识基石?和&#xff01;[ ]和.样式css样式选择器 数据类型Symble获取Symbol.toPrimitive 对象属性定义ToPrimitive ( input [ , preferredType ] ) void 0&undefinedhasOwnProperty空对象对象拷贝assign深拷贝 spin__assign默认属性 前言 我们加载资源等待…

遮罩和蒙版

遮罩&#xff1a;即遮挡、遮盖&#xff0c;部分画面被遮挡&#xff0c;相当于一个窗口&#xff0c;它是一个单独的图层&#xff0c;上面的图层会遮挡下面的图层。即通过上面的图层遮挡下面的图片&#xff0c;起到遮挡的效果。时间轴上一个视频轨上的素材对应一个图层。 蒙版&am…

遮罩和蒙版有什么区别,视频遮罩怎么用

在制作短视频时&#xff0c;好多小伙伴分不清遮罩与蒙版的区别&#xff0c;甚至有的人认为它们就是一个东西&#xff0c;要说起来&#xff0c;这两个看似一样的概念&#xff0c;其实还是有很大的区别&#xff0c;今天就来带各位了解一下遮罩和蒙版有什么区别&#xff0c;视频遮…

oracle手动锁表和解锁_oracle锁表查询和解锁方法是什么

oracle锁表查询和解锁方法&#xff1a;首先使用【PL/SQL Developer】连接并操作oracle数据库&#xff1b;然后使用语句select for update来锁表&#xff1b;最后用语句【alter system kill session sid】解锁。 本文操作环境&#xff1a;Windows7系统&#xff0c;PL/SQL Develo…